You are on page 1of 10

GeeMee.hautetfort.

com

Avec EmailMeForm.com
créer une page de contact
pour un blog Hautetfort
version du 1er septembre 2009

• Ce document, à peine présentable, constitue la version hors-connexion de quelques
notes publiées sur le blog geemee.hautetfort.com Je vous remercie d'en avoir un
usage qui soit le moins consommateur possible de ressources épuisables (électricité,
papier, vous trouverez le bon équilibre).
• Le texte a été mis en forme avec OpenOffice puis exporté en PDF.
• À la plupart des images sont affectés des hyperliens qui permettent de les visualiser en
ligne à une plus grande taille.
• Pour joindre l'auteur de ce document, afin de lui signaler son sens personnel de
l'orthographe, et ou ses approximations techniques, vous pouvez vous rendre sur la
page À propos de son blog hébergé par la plateforme hautetfort
Créer une page de contact sur Hautetfort avec EmailMeForm

Créer une page de contact pour votre blog Hautetfort
C'était l'un des feuilletons de l'été 2009 sur le blog de Gee Mee pour pallier l'une des carences
de la plateforme : le formulaire de contact. Vous hésitez à mettre votre adresse en direct sur
votre blog, mais vous voulez que l'on puisse vous envoyer un message ? Ce document est
pour vous.
Sans être extrêmement compliquée, la chose n'est pas si simple, en particulier pour ceux qui
ne seraient pas très à l'aise avec l'anglais. Je remercie Soufiane de Leblogger d'avoir publié
cet article qui m'a mis sur la voie. Je vous conseille d'ailleurs la lecture régulière de son blog,
qui fourmille de solutions intéressantes, même si les mises en œuvre sont consacrées à Blogger
& Blogspot.
Commençons par la fin, voici le résultat...

Your Name

Your Email Address

Subject

Message

Image Verification

Please enter the text from the image
[ Refresh Image ] [ What's
This? ]

Send email Clear

Ce formulaire fonctionne, en utilisant le service gratuit du site EmailMeForm.com
C'est sous cette forme que vous pouvez le récupérer pour vos pages, si vous vous contentez
de valider chacune des étapes. L'objet de mes notes sera bien évidemment de vous expliquer
chacune des étapes de création, et d'intégration dans votre blog.
Lien permanent :
http://geemee.hautetfort.com/archive/2009/08/11/creer-une-page-de-contact-pour-votre-blog-
hautetfort.html

GeeMee.hautetfort.com 2
Créer une page de contact sur Hautetfort avec EmailMeForm

Procéder à l'inscription et créer une page de remerciement
Même pour faire fonctionner le très basique formulaire de l'épisode précédent, il faut d'abord
s'inscrire, et savoir remercier.

Je n'ai pas de prévention particulière à l'encontre d'EmailMeForm mais je n'ai pas de parts
sociales non plus. Je n'arrive pas à soupçonner le site de collecter les adresses à des fins
« inappropriées », mais si quelqu'un dispose d'informations incitant à la méfiance, qu'il n'hésite
pas à en faire état. Par ailleurs, il existe peut-être une solution équivalente en français ; si une
bonne âme en venait à me la faire connaître, j'en assurerais sûrement la promotion.

Revenons au principe de fonctionnement
Vous allez insérer un formulaire dans une note préparée dans l'éditeur Hautetfort.
Quand la note est publiée, l'internaute qui le souhaite va renseigner puis valider le formulaire.
Les informations vont partir vers un automate d'EmailMeForm qui vous enverra un courrier
électronique, pour vous les transmettre à son tour.
L'internaute sera quant à lui dirigé vers une page de remerciement.

Pourquoi et comment s'inscrire à EmailMeForm ?
L'inscription est obligatoire. Elle vous permettra d'avoir plusieurs formulaires, éventuellement
pour plusieurs sites. Vous pourrez avoir des statistiques, conserver les données soumises par les
utilisateurs du formulaire. Il faut reconnaître que le service n'est pas loin d'être complet.

La lecture de l'image ci-contre (cliquez, vous verrez mieux) permet de
voir une partie des engagements d'EmailMeForm concernant l'utilisation
qu'il pourraient faire de votre adresse. Cela a toutes les apparences
d'un service honnête.

On ne vous demande que le minimum pour vous inscrire, et vous n'êtes
même pas obligé de dire la vérité. Sauf que vous avez tout de même
intérêt à donner une bonne adresse de courrier électronique et une adresse de page de
remerciement valide.

On commence par la fin, on dit merci.
EmailMeForm ne vous demande pas où se situera le formulaire, cela ne semble pas être son
problème. Par contre, il a besoin de savoir où conduire l'internaute qui l'aura validé. Vous
devez donc d'abord prévoir une note qui fera office de page de remerciement, la publier, et
en noter l'adresse, le lien permanent. Au passage, cette note n'a pas besoin de commentaire
(vous pouvez les fermer) ou de trackback (vous pouvez les retirer), et un petit tour dans la
configuration avancée de la note s'avère utile. Pour que cette page n'apparaisse pas en haut
de la liste des dernières notes, vous l'anti-daterez au moment de la publication.

La page de remerciement doit être cohérente avec le formulaire, avec l'objet de ce dernier,
vous veillerez à créer une nouvelle si nécessaire. Pour information, voici la page de
remerciement de mon formulaire de contact sur la page À propos.

GeeMee.hautetfort.com 3
Créer une page de contact sur Hautetfort avec EmailMeForm

Reprenons la première étape de création du formulaire
Web form name ou Nom du formulaire web : Ce nom n'est pas visible de
l'internaute, mais vous sera utile pour le reconnaître dans votre liste de formulaires,
et pourra être utilisé pour l'objet des messages qui vous seront envoyés par
l'automate.

Recipients Emails ou Destinataires des courriels : Vous pouvez inscrire plusieurs adresses, ce qui
peut être intéressant dans un blog collaboratif. La plupart du temps, vous ne mettrez que la
votre. En fait, elle sera inscrite par défaut, puisque vous êtes inscrit, donc reconnu.

Spam Email address ou Destinataire des courriers non sollicités : si vous utilisez un service de
dénonciation des abus. Normalement, le service utilise une Captcha que ne devraient pas
pouvoir contourner les robots.

Thank you page ou Page de remerciement : nous y voilà. Je vous avais dit qu'il fallait
commencer par la fin.
Number of fields ou Nombre de champs : C'est qu'il y a beaucoup à dire...
Lien permanent :
http://geemee.hautetfort.com/archive/2009/08/14/creer-une-page-de-contact-pour-votre-blog-
hautetfort-2.html

GeeMee.hautetfort.com 4
Créer une page de contact sur Hautetfort avec EmailMeForm

Organiser les champs
Nous nous sommes quittés en rase campagne, en plein champs, aussi nous consacrerons
nous aujourd'hui aux différents types, et à leur organisation.
Par défaut le formulaire propose quatre champs de texte, dont l'un possède plusieurs lignes
pour le corps de votre message. Vous avez bien d'autres choix, tant dans la quantité que dans
la qualité. Vous trouverez ci-dessous un formulaire exploitant tout que vous avez déjà croisé
par ailleurs.

Texte court

Text long

Case-s à cocher lundi
mardi
mercredi
jeudi
vendredi
Boutons radio oui
non
Menu déroulant Sélectionnez

Téléchargement

Image Verification

Please enter the text from the image
[ Refresh Image ] [ What's This? ]

Send email Clear

Powered by http://www.EmailMeForm.com

GeeMee.hautetfort.com 5
Créer une page de contact sur Hautetfort avec EmailMeForm

Comment gérer le nombre de champs ?
Cela se passe dans l'étape 1, cela paraît facile. Quand vous souhaitez
ajouter un champ, il suffit de revenir à cette étape, avec les boutons
[Back] du site en non de votre navigateur, et de porter le nombre de
champs à la quantité désirée. Cela ne changera rien à vos champs
déjà paramétrés. Quand vous voulez supprimer un champ, vous
revenez à cette étape, et vous réduisez le nombre. Attention, c'est le
dernier champ du formulaire qui va disparaître alors que ce n'est pas forcément celui que
vous voulez supprimer. Prenez donc la précaution de garder vos paramètres par devers vous
pour recommencer le cas échéant.

Quels sont les différents types ?
Par défaut, vous héritez de quatre champs de deux types : texte court sur une ligne [(short text
- one line)], et texte long [large text (more lines)].
Vous disposez de case à cocher [Checkbox], bouton radio [Radio buttons] ou menu
déroulant [Drop down menu]. Vous pouvez même prévoir un champ de téléchargement de
document [File Attachment].
Petit rappel :
- si l'on veut une seule réponse par question, il faut des boutons radio.
- si l'on autorise plusieurs réponses pour une question, il faut des cases à cocher.
C'est du moins le fonctionnement logique, mais vous pouvez par mégarde ou facétie
contrarier ce qui est attendu.

Vous organisez les champs lors de l'étape 2 :
Vous précisez le nom du champs (Field name) tel qu'il apparaîtra
Vous pouvez mettre ce nom en gras, ou en italique (police et couleur se
gèrent plus tard)
Vous décidez du type de champs (les modalités se gèrent après)
Vous précisez le caractère requis (required) ou facultatif de chaque champs.

De fait, c'est aussi dans cette étape que vous décidez de l'ordre des champs.

Vous précisez taille et contenu des champs lors de l'étape 3
Pour du texte, vous n'avez qu'à préciser (au besoin) le nombre de
colonnes (col) et le nombre de lignes (rows).
Pour les champs avec alternative, vous précisez les options disponibles.

Lien permanent :
http://geemee.hautetfort.com/archive/2009/08/18/creer-un-formulaire-de-contact-pour-votre-
blog-hautetfort-3.html

GeeMee.hautetfort.com 6
Créer une page de contact sur Hautetfort avec EmailMeForm

Mettre en forme
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.

Mise 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

GeeMee.hautetfort.com 7
Créer une page de contact sur Hautetfort avec EmailMeForm

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.

Lien permament :
http://geemee.hautetfort.com/archive/2009/08/21/creer-une-page-de-contact-pour-votre-blog-
hautetfort-4-mettr.html.

GeeMee.hautetfort.com 8
Créer une page de contact sur Hautetfort avec EmailMeForm

Le message et le code
Nous allons maintenant paramétrer les messages qui seront générés par le formulaire, et
récupérer le code.

Voyons maintenant comment « Expéditeur », « objet », « copie », « préparation de l'utilisation
des données de formulaire » sont autant de paramètres sur lesquels vous pouvez intervenir,
pour que la solution d'EmailMeForm corresponde à vos besoins les plus précis. Ensuite, nous
récupérerons le code du formulaire.

Message From ou Message de. Vous pouvez demander à ce que le
message généré par le formulaire ait pour expéditeur EmailMeForm, ou
le nom et l'adresse de l'utilisateur du formulaire. Je vous conseille de
garder le site, notamment pour ne pas retrouver aléatoirement des
messages dans la corbeille parce que votre anti-virus n'aurait pas
reconnu l'expéditeur. Quand l'adresse d'EmailMeForm aura été
déclarée fiable par vos soins, tous les messages passeront.

Message subject ou Objet ou Titre du message. Là encore vous pouvez utiliser le nom de votre
formulaire ou le texte écrit par le visiteur dans l'un des champs. Logiquement ce serait « sujet »,
mais vous pouvez utiliser n'importe quel champs. Si vous avez plusieurs formulaires, je vous
conseille d'utiliser le paramètre Form name, qui facilitera le classement des messages.

Send copy to sender, ou envoyer une copie à l'expéditeur. On peut envoyer une copie à
l'expéditeur, mais il faut bien faire attention à ce que l'expéditeur déterminé plus haut ne soit
pas le site d'EmailMeForm lui-même.
Include data for export, ou inclure les données pour export. Cela ne vous sera pas tellement
utile pour un simple formulaire de contact, à moins de vouloir établir des statistiques. Pour un
sondage, un concours, vous pouvez utiliser un formulaire EmailMeForm pour obtenir des
données que vous exploiterez vous-même dans un tableur.

Quand vous aurez validé ces choix, vous aurez accès à une
prévisualisation de votre formulaire. Il est toujours temps de revenir en
arrière avec le bouton [Back] et reconsidérer certains de vos choix.
Certains aspects de mise en forme, et le texte de la « vérification
d'image » ne pourront être modifiés qu'après la récupération du code.

Quand vous avez un projet de formulaire qui vous convient, vous cliquez
enfin sur le bouton [finish]
Le site vous confirme la création du formulaire, mais il vous reste à
récupérer le code pour pouvoir l'intégrer dans votre page. Le premier
lien hypertexte vous permet de tester le fonctionnement en conditions
réelles avant même l'intégration.

Dessous, vous trouvez la phrase [Click here to get the Html code], et donc forcément, vous
allez cliquer. C'est pas le moment de flancher.

GeeMee.hautetfort.com 9
Créer une page de contact sur Hautetfort avec EmailMeForm

Mais il avait dit que c'était gratuit non ?

Je maintiens. On ne vous demande de l'argent que pour récupérer le
code HTML et le code PHP, le vrai code actif, celui qui fait mouvoir les
robots de messagerie. Sur une plateforme de blog, vous n'en avez pas
besoin.

Vous copiez donc le code, et vous l'intégrez dans une note

Pour intégrer le formulaire :
- Dans la note, positionner le curseur où se situera le formulaire.
- Cliquer sur le bouton avec la note et un haut-parleur [Insérer un fichier multimédia]
- Cliquer sur l'onglet [code embed]
- Dans la zone "Insérer le code de l'embed" coller le code obtenu chez EmailMeForm
- Valider en cliquant sur [Valider]
- De retour dans votre note, vous voyez le formulaire et vous pouvez en peaufiner la
présentation.
C'est ce que j'ai du faire pour le formulaire de la page À propos, dont l'apparence d'origine
est la suivante

Votre nom

Votre adresse
électronique
Votre blog ou site

Sujet de votre
message
Votre message

Image Verification
Please enter the text from the image:

[ Refresh Image ] [ What's This? ]

web form Envoyer Annuler

Lien permanent :
http://geemee.hautetfort.com/archive/2009/08/28/creer-une-page-de-contact-me-message-et-le-code.html

GeeMee.hautetfort.com 10