Contact Form 7 : créer un formulaire simple

Ce nouveau tutoriel de Contact Form 7 est une mise à jour. Depuis le premier tuto, cette extension a beaucoup évolué. Il est temps de mettre à jour sa notice de conception du formulaire.

L’installation de Contact Form 7 n’a pas changé. Vous pouvez retrouver la procédure dans l’ancien tutoriel : Contact Form 7 configuration simple : Tutoriel WordPress.

Création d’un formulaire

Pour créer un nouveau formulaire, rendez-vous dans le menu Contact > Créer un formulaire.
La création du formulaire débute par le choix de la langue.

Par défaut, le français sera utilisé si votre WordPress est paramétré dans ce langage. Cliquez ensuite sur le bouton Créer un formulaire.
Vous remarquerez que l’interface de création du formulaire a complétement changé. Le système de marqueurs a été supprimé et seuls les shortscodes (tag) sont dorénavant utilisés. Ils vous servent à simplifier la conception de votre formulaire sans avoir à vous soucier du code.

Commencez par donner un titre explicite à votre formulaire pour mieux l’identifier dans la liste des formulaires par la suite. Ce titre n’apparaitra pas sur la page où le formulaire sera inséré par la suite, il sert uniquement à l’identifier dans la liste des formulaires.

L’onglet Formulaire

Je vous le disais, maintenant, la création du formulaire est simplifié par des Tags. Certains sont déjà pré-formatés : ce sont les boutons au-dessus de l’écran de personnalisation du formulaire.

Les balises

Lorsque vous sélectionnez l’un de ces tags, cela ajoute une balise dans le formulaire après sa configuration, comme par exemple :

[text* your-name]

Cette balise indique que le champ est de format Text et s’appelle your-name. Notez que your-name sert au code : il ne faut donc pas laisser d’espace ou mettre un caractère spécial. Retenez aussi que le nom de vos balises doit se différencier de celles utilisées par WordPress : pour éviter des incidents, nommez originalement vos balises. Vous préferez des termes en français plutôt qu’en anglais, et s’ils sont en anglais, vous ajouterez un autre terme comme par exemple my-name. En effet, name est une balise WordPress.
Lorsque vous cliquez sur l’un de ces tags, un formulaire de création de la balise s’ouvre pour vous aider… Si vous n’avez pas de connaissance en développement, faites simple ! Sinon, prenez un peu de temps pour consulter la notice de Contact Form 7. Comme dirait un de mes collègues : ne réinventons pas la roue ! Je vais donc juste vous indiquer où trouver l’info en fonction du type de champ :

• Champs de texte
• Nombre (nombre, numéro, plage)
• Date
• Cases à cocher, boutons radio et menus
• Téléchargement de fichiers Champ
• CAPTCHA
• Quiz (questionnaire)
• Case à cocher d’acceptation des conditions
• Bouton de soumission

Vous pouvez aussi consulter les commentaires sur les champs dans le tuto de la version précédente de Contact Form 7. Ils sont toujours d’actualité.
C’est la même chose pour la mise en pages du questionnaire. Rien de compliqué si vous avez quelques bases en HTML… Vous utiliserez principalement les balises :

<p>je mets le texte de l'intitulé du champ et je mets une balise <br /> pour le retour à la ligne</p>

L’onglet Email

Dans cet onglet, le principe des tags est repris. Pour personnaliser vos mails, vous pouvez utiliser ceux pré-formatés : [your-name][your-email][your-subject][your-message] comme dans le texte fourni par défaut :

N’oubliez pas qu’un mail doit respecter un certain format pour ne pas être déclaré en Spam. Je vous conseille donc de personnaliser uniquement le texte du message et de laisser les balises insérées dans les champs To, From et Sujet.

L’onglet Messages

L’internaute en utilisant le formulaire va déclencher des actions. Contact Form 7 vous permet de personnaliser les messages liés à ces actions. Vous noterez que la traduction de ces messages est partielle. Il vous faut donc traduire personnellement les derniers messages soit par ces champs, soit en créant le fichier contact-form-7-fr_FR.po, dans le dossier Langages accessible par le chemin : /wp-content/plugins/contact-form-7/languages. Si nécessaire, vous trouverez la procédure pour la traduction dans ce tutoriel : Tutoriel WordPress : traduire les expressions de son thème en français ?.

L’onglet Réglages complémentaires

Cet onglet est réservé aux développeurs. Dans ce cas, les informations pour réaliser ces réglages sont disponibles dans la notice de l’auteur de Contact Form 7. Vous pourrez aussi y configurer le suivi analytics. J’y reviendrais dans une prochain article.

Mise en ligne et tests

Validez vos modifications en cliquant sur le bouton Sauvegarder et la configuration de votre formulaire est terminée. Il vous reste encore à insérer le formulaire dans votre site et à le tester.
Après la validation de votre configuration, vous êtes renvoyé vers la liste des formulaires que vous avez créés. Copiez le shortcode de celui que vous venez de créer.

Ouvrez la page où vous souhaitez insérer votre formulaire et collez ce shortcode (par exemple, dans la page contact). Enregistrez vos modifications.

Vérifiez que le questionnaire apparaît bien sur la page en question. Si c’est le cas, il ne vous reste plus qu’à tester votre questionnaire et visualiser les mails reçus. Quelques ajustements seront peut-être nécessaires selon le rôle de votre formulaire.