Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

21.08.2009

Créer une page de contact pour votre blog Hautetfort - 4 - Mettre en forme

Si nous résumons l'épisode précédent, nous avons choisi nos champs et les avons organisé, nous reste maintenant la mise en forme du formulaire par l'intermédiaire d'EmailMeForm. Il sera possible, et parfois nécessaire, de modifier certains éléments via l'éditeur Hautetfort.

Pour vous éviter de mettre les mains dans le code du formulaire, et de créer un décalage entre le code stocké chez EmailMeForm pour vous, et celui qui est effectivement intégré dans vos pages, je vous conseille de personnaliser autant que possible lors de cette étape.


EmailMeForm-WFCW-04-mise-en-forme.jpgMise en forme du texte.

D'abord la police, dans son apparence (Font face), vous taperez le cas échéant le nom d'une police différente. Juste à côté, vous précisez la taille (Size). C'est la même échelle que dans l'éditeur Hautetfort.

Ensuite, la couleur du texte (Colour text) et celle de l'arrière-plan (Colour background) avec les fameux codes hexadécimaux. La palette de l'éditeur Hautetfort peut vous être utile, ou Colorzilla, ainsi qu'un coup d'œil à votre feuille de style pour retrouver la couleur à laquelle vous tenez tant mais dont bêtement le code RVB en base 16 vous échappe.

EmailMeForm exige un code hexadécimal sur 6 caractères, n'espérez pas vous en tirer en laissant la case vide ou en écrivant « transparent ». Si rien ne vous convient à ce stade, utiliser la couleur standard, puis intervenez dans le code après intégration. À ce stade, vous pourrez supprimer les paramètres de background, ou imposer une image de fond si vous êtes vraiment trop fortiches.

Form description ou description du formulaire vous permet de laisser quelques mots d'introduction. Ils pourraient se trouver dans votre note, c'est à vous de voir.

Header (en-tête) et Footer (pied de « page ») peuvent accueillir du code HTML notamment pour fignoler la mise en forme. À réserver à ceux qui savent, et à ceux qui sont prêt à assumer les conséquences de leurs actes.

Dans le même ordre d'idées, à réserver aux spécialistes, la possibilité de recourir à une CSS pour le tableau (table) et pour les cellules (td).


Et clic ?

Send Button Name ou Nom du bouton Envoyer. Par défaut, le bouton gris de validation en bas du formulaire portera les mots « Send email ». Le terme « Envoyer » me paraît plus approprié, mais libre à vous de préférer « Et hop ! ».

Send Button Alignment ou alignement du bouton envoyer, et de son éventuel compagnon, car vous pouvez faire afficher un bouton de réinitialisation du formulaire.

Include a clear button ou inclure un bouton effacer. Cochez la case, et indiquez le terme « Effacer » ou « annuler », ou « bah non finalement, je vais recommencer au début ».

Conservez la mesure anti-spam à base de lettres et de nombres telle que proposée par défaut,. Cela fonctionne comme la captcha que vous rencontrez chez Hautetfort quand vous postez un commentaire avec un lien hypertexte. Une efficace mesure anti-robot, mais qui n'abrite pas de tous les nuisibles.

Image verification. Vous pouvez préciser la couleur de la ligne de titre « Image verification », et la couleur du texte. Par défaut, le texte est blanc sur fond vert soutenu. De même pour le texte à droite de l'image de vérification.


Et c'est fini ?

La mise en forme du formulaire n'est pas encore terminée. Il faudra la peaufiner dans l'éditeur de note Hautetfort après avoir intégré le code. Notamment pour modifier le texte en anglais qui accompagne l'image de vérification.

La prochaine fois, nous verrons les quelques paramétrages du message envoyé par EmailMeForm avant d'intégrer le code dans une note.

C'est ici.

 

Le feuilleton a commençé ici, et l'ensemble des notes a été réuni dans un document PDF à téléchager

16:17 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : formulaire, contact, emailmeform | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.