Contacter une entreprise, passer une commande, s’inscrire…, les formulaires sont une partie importante d’un site Internet même s’ils n’apportent pas de contenu. Il ne faut pas négliger leur apparence ni leur ergonomie au risque de perdre de précieux clients. Ils doivent être simple, clair et rapide à remplir.

Pour ce qui est de l’ergonomie, je vous conseille de lire cet article très complet sur ergolab et ergonomie des interfaces

Nous allons nous intéresser plus particulièrement à l’aspect et à la façon d’intégrer un design avec WebDev.

Prenons par exemple ce formulaire trouvé sur ce site

Commençons d’abord par créer les champs de saisie en indiquant bien le type et le masque de saisie. Rassurez-vous le masque n’apparaît pas en ligne.

Pour la couleur du fond de la page, rentrez sa valeur directement dans la fenêtre soit en hexadécimal, rgb ou cmjn.

Passons maintenant au style des champs de saisie. Pour aligner vos libellés à droite, allez dans la fenêtre du champ, dans l’onglet style, alignement, choisissez « à droite ». Lui attribuer une couleur de la même façon que pour le fond. Choisissez une typo, sa taille…
En temps normal pour crée cet effet d’arrondi et d’ombre sur les inputs, nous aurions mis une image de fond. Or je vais vous montrer comment faire du CSS3 avec Webdev et aller plus loin que les réglages de styles qui sont proposés.
Toujours dans l’onglet style, allez dans « plus d’option » et css personnalisé. Entrez votre code css. Si vous ne connaissez pas ce langage, ne vous inquiétez pas, c’est très simple à apprendre et vous trouverez toutes les propriétés sur le site du zéro.

Appliquez rapidement votre style à tout vos champs grâce à l’outil pinceau.

Le résultat ne sera pas visible dans votre AGL mais testez la page et vous verrez apparaître votre magnifique formulaire en css3.

Enfin, créer le bouton submit. Dans sa description générale, enlever le libellé. Dans l’onglet style, image du bouton, importer l’image de votre choix, ainsi que pour l’image de survol.

Petit bémol, le css3 sera implémenté officiellement qu’en 2014, donc pour le moment il n’est pas supporté par tous les navigateurs comme IE et les anciennes versions de firefox, chrome …
et cette fenêtre d’édition des styles permettant de personnaliser son css n’existe pas pour tout les éléments.

J’espère que cette astuce vous aidera et vous donnera plein d’autres idées de possibilité de design…