Contact Form 7 : Comment créer votre formulaire sur WordPress

Contact Form 7 est une extension WordPress gratuite qui permet de créer simplement des formulaires. Avec plus de 5 millions d’installations et des mises à jour régulières, Contact Form 7 supporte l’envoi par Ajax, permet d’ajouter des CAPTCHAs et s’associe parfaitement à Akismet pour éviter le spam.

Rappelons que l’extension Akismet est installée d’office sur votre WordPress et que l’acquisition d’un code utilisateur permet de restreindre les commentaires édités par les robots.

Voici le programme de ce tutoriel consacré à Contact Form 7 :

• Comment installer Contact Form 7
• Découvrir l’interface du plugin (Formulaires | Emails | Messages | Réglages)
• Créer son premier formulaire et l’intégrer à son site WordPress
• Personnaliser votre formulaire

 

Installer Contact Form 7 sur WordPress

Le plugin Contact Form 7 est accessible dans les extensions proposées par WordPress. Rendez-vous sur votre Dashboard, cliquez sur « Extensions » puis « Ajouter » :

 

Vous pouvez ensuite taper dans la barre de recherche « Contact form 7 », installer et activer l’extension.

Comme la plupart des extensions, vous pouvez remarquer que celle-ci s’ajoute sur la barre latérale gauche de votre Dashboard en tant que « Contact ».

Comprendre l’interface de l’extension Contact Form 7

Tout d’abord, rendez-vous dans « intégration ».

Cette rubrique vous permet de configurer les clés pour utiliser l’outil « reCAPTCHA » proposé par l’extension. Celle-ci s’associe à Akismet pour restreindre l’accès à votre site, aux indésirables et notamment aux robots malveillants.

Cliquez sur « Configurer les clés ». Vous pouvez ainsi voir s’afficher :

Vous pouvez maintenant définir une clé pour votre site ainsi qu’une clé secrète. Pour les obtenir, rendez-vous sur la page Google.com/recaptcha.

Cliquez sur le bouton en haut à droite de votre écran « Get reCAPTCHA ». Si vous êtes connecté à votre compte Google et que vous avez déjà utilisé le CAPTCHA de Google, vous pouvez y retrouver les différentes clés que vous avez défini par site web.

Pour ajouter une nouvelle entrée,  je sélectionne la version 2 du reCAPTCHA car c’est elle qui correspond le plus à mes besoins et j’ajoute mon nom de domaine dans la rubrique destinée à cette information.

Notez que lorsque vous ajouter votre domaine, l’outil reCAPTCHA de Google prend en compte automatiquement les sous-domaines associés à votre site.

Enfin, acceptez les conditions générales d’utilisation de reCAPTCHA et décidez si vous souhaitez recevoir des notifications de la part de Google lorsqu’un incident est détecté (erreurs de configuration ou accroissement suspect de votre trafic).

Une fois cette opération validée, Google vous affiche la clé du site et votre clé secrète.

Il ne vous reste qu’à les saisir sur votre site internet dans la partie « intégration » de l’extension Contact Form 7.

Je vous invite maintenant à vous rendre dans la partie « Formulaires de contact ». Par défaut, un formulaire de base existe déjà et vous verrez que lorsque nous allons créer un nouveau formulaire, l’extension aura présélectionné une configuration avec les éléments principaux (nom, email, sujet et message).

Voyons maintenant comment créer votre premier formulaire Contact Form 7.

Créer votre 1er formulaire avec Contact Form 7

Cliquez sur la partie « Créer un formulaire ». Vous êtes renvoyé directement vers le formulaire dont nous parlions plus haut avec les éléments de Base.

Dans un premier temps, définissez le titre de votre formulaire et sauvegardez. Dans l’exemple ci-dessous, j’ai décidé d’appeler mon formulaire « Contact ».

Avant de s’attaquer au formulaire, nous allons définir :

1. Qui recevra une notification de nouveau message et comment personnaliser celui-ci ?
2. Le type de message envoyé à l’utilisateur en fonction d’un événement spécifique (par exemple « si l’internaute ne remplit pas un champ obligatoire »)
3. les réglages additionnels qu’il est possible de faire.

1. Qui recevra une notification de nouveau message et comment personnaliser celui-ci ?

Rendons-nous dans le sous-onglet « Email ».

Voyons ensemble la correspondance de chacun de ces champs ci-dessus :

• « Pour » : définit l’adresse email qui recevra la demande de contact (normalement il s’agit de la vôtre ou de celle de votre client)
• « De » : définit l’adresse email de l’internaute qui vous contacte. Ce champ utilise le marqueur [your name] mais vous pourriez utiliser aussi [your-email] pour avoir l’email de l’internaute qui s’affiche en tant qu’émetteur.
• « Sujet » : définit l’objet de l’email que vous allez recevoir. Ici, j’ai indiqué « Contact »
• « En-tête additionnels » : Ils permettent de mettre un ou plusieurs de vos collaborateurs en copie de l’email que vous recevrez. Vous pouvez également définir un email automatisé pour envoyer une copie de son message à l’internaute.
• « Cc » : pour ajouter une personne en copie
• « Bcc » :  pour ajouter une personne en copie “cachée
• « Corps du message » : cette partie vous donne un aperçu de l’email qui vous sera envoyé en fonction des paramètres que vous aurez défini plus haut. Vous pouvez également modifier le corps de ce message directement dans cette fenêtre pour le personnaliser davantage. A titre d’exemple, vous pourriez simplement indiquer [your-message] puisque les informations du contact seront déjà dans les champs prédéfinis.
• « Exclure les lignes dont la balise d’email est vide » : permet d’exclure les lignes qui ne seraient pas remplies par l’expéditeur de l’email que vous recevrez.
• « Envoyer cet email au format HTML » : comme son nom l’indique, ce champ permet de recevoir le message sous format HTML. A priori, vous n’en aurez pas besoin.
• « Pièce jointes » : si vous avez demandé à votre internaute d’envoyer un fichier, alors celui-ci sera joint à l’email que vous recevrez. Il vous faudra ajouter le marqueur du champ de téléchargement du fichier présent sur votre formulaire.
• « Email (2) » : il permet de configurer un mail automatisé à destination de vos collaborateurs ou de votre internaute. Si vous avez déjà ajouté vos collaborateurs en « Cc » ou en « Bcc », utilisez plutôt cette fonction pour envoyer une copie de son message à votre internaute. Vous pourrez le personnaliser en indiquant sous combien de temps sa demande sera traitée et lui rappeler l’objet de son message. Par exemple :

2. Le type de message envoyé à l’utilisateur en fonction d’un événement spécifique

Nous allons maintenant définir les messages qui s’afficheront en fonction d’événements spécifiques. Par exemple, un email mal renseigné, une url incohérente, le non-remplissage de champs obligatoires…

Rendez-vous sur l’onglet « message » :

Voyons quelques-unes de ces lignes ensemble.

• « Le message de l’expéditeur a bien été envoyé » : vous pouvez décider du message qui sera affiché une fois que l’expéditeur aura validé son formulaire et qu’il aura été envoyé avec succès.
• A l’inverse, la seconde ligne vous permet de définir la phrase si le formulaire n’a pas été correctement envoyé.
• « Des erreurs de validation sont survenues » : ici, vous pouvez définir un message si certains des champs du formulaire n’ont pas été remplis correctement et qu’ils empêchent donc l’envoi du formulaire. Cela arrive lorsque vous définissez un champ obligatoire et que la personne ne le remplit pas.
• Vous pouvez procéder de cette façon pour chacun des événements…

3. Les réglages additionnels

Les réglages additionnels permettent d’ajouter des éléments de personnalisation à votre formulaire. A titre d’exemple, si vous souhaitez que seules les personnes connectées puissent vous soumettre un message, c’est ici que vous le définissez.

Pour mieux comprendre les réglages que vous pouvez définir, je vous invite à consulter la documentation du plugin sur ce sujet à l’adresse : https://contactform7.com/additional-settings/

Personnaliser Contact Form 7

Nous allons maintenant revenir à la rubrique « formulaire » pour commencer à créer le nôtre.

Cependant, avant de se lancer, il est indispensable de comprendre les différents marqueurs ci-dessous :

Le champs « texte » : il est utilisé lorsque l’internaute doit saisir des caractères. Par exemple, pour son nom, son prénom ou son adresse.

Vous constaterez tout au long de cette partie que les paramètres « Type de champ », « Nom », « Valeur par défaut », « attribut « id » » et « attribut « class » » existent sur tous les marqueurs.

Dans la capture ci-dessus, définissez d’abord si ce champ est obligatoire. Le nom sert à l’intégration sur le formulaire. Vous pouvez néanmoins sélectionner une valeur par défaut et l’utiliser comme texte indicatif du champ. Cela revient à utiliser un « placeholder » (voir exemple ci-dessous).

Comme vous pouvez le constater, la valeur s’affiche à l’intérieur du cadre.

• Enfin les attributs « id » et « class » sont des marqueurs pour personnaliser le CSS de votre formulaire.
• Le champ « email » : comme son nom l’indique, il permet d’ajouter un champ d’email. Là, vous vous demandez quel est la différence avec un champ « texte » classique ? Et bien en mettant email plutôt que texte, l’internaute sera obligé de saisir une adresse email. Ce champ impose la saisie du signe « @ » et d’un nom de domaine (.fr, .com, .net…). Si l’internaute ne remplit pas ce champ correctement, une erreur s’affichera.
• Le champs « url » : permet à l’expéditeur d’ajouter un lien vers son site web par exemple. Là encore, comme le champ « email », si l’internaute n’indique pas une url du type “.fr”, “.com”, “.net”…,, un message d’erreur s’affichera.
• Le champ « tel » : il permet à l’internaute de saisir uniquement des chiffres pour indiquer son numéro de téléphone.
• Le champ « nombre » : il permet à l’internaute de sélectionner un nombre spécifique grâce à un compteur ou un curseur.

Ici, le type de champ permet de définir si vous souhaitez un compteur ou un curseur et s’il est obligatoire. Ensuite, vous pouvez définir un intervalle pour déterminer la valeur minimale et maximale.

• Le champ « date » : il permet à l’internaute de saisir une date (par exemple, sa date de naissance ou bien une date pour une réservation).

Remarquez qu’ici aussi, il est possible de définir un minimum et un maximum. Par exemple, si vous proposez un service accessible uniquement aux majeurs, vous pourrez mettre en minimum l’année 1999.

• Le champ « Zone de texte » : comme son nom l’indique, l’internaute peut saisir un message grâce à un espace texte. On appelle aussi ça le « textaera ».

• Le champ « menu déroulant » : permet à l’internaute de faire un choix. Voici ce que cela donne :

 

• Le champ « case à cocher » est une autre façon de présenter une liste à choix (comme celle décrite ci-dessous). Cependant, elle permet d’offrir la possibilité de faire plusieurs choix.
• Le champ « bouton radio » : est une nouvelle façon de présenter une liste à choix. Cependant, ce marqueur ne permet de faire qu’un seul et unique choix.
• Le champ « confirmation » permet d’obtenir de la part de l’internaute une acceptation avant envoi de formulaire. Vous pourrez utiliser ce marqueur si par exemple, vous souhaitez demander aux internautes d’accepter vos conditions générales d’utilisation pour qu’ils puissent envoyer leur message.
• Le champ « Quiz » permet de proposer des questions à vos internautes. Le paramétrage de ce marqueur nécessite de mettre les questions et les réponses séparées d’un « / ».
• Le champ « reCAPTCHA » : permet de restreindre l’envoi de formulaires par des robots comme vu dans la première partie de ce tuto.
• Le champ « fichier » : permet de proposer aux internautes de transférer un fichier vers votre serveur. Celui-ci vous sera également envoyé par email si vous l’avez configuré dans la rubrique « Message » de l’extension.

Notez qu’ici, vous pouvez définir la limite de taille que vous acceptez ainsi que les formats.

• Le champs « soumettre » : il s’agit simplement du bouton qui permet à l’internaute d’envoyer votre formulaire.

Voyons ensemble comment créer un formulaire de contact simple. Admettons que je souhaite recueillir les informations suivantes :

1. Civilité
2. Nom
3. Email
4. Date de naissance
5. Message
6. Accepter les conditions générales d’utilisation
7. Fichier à joindre
8. Envoyer

Rendez-vous tout d’abord dans le menu de l’extension « Contact » et cliquez sur ajouter un nouveau formulaire.

Sélectionnez le titre de votre formulaire et enregistrez-le. Vous remarquerez qu’une ligne de code s’affiche dès que vous l’enregistrer (en bleu ci-dessous).

Je vous invite à copier ce code et à le coller dans une nouvelle page ou article. Ensuite, cliquez sur aperçu et scindez votre écran en deux. D’un côté, le formulaire que vous venez de créer et de l’autre, l’aperçu des modifications que vous lui apportez.

Nous devons donc ajouter à ce formulaire la civilité, le prénom, la date de naissance, la confirmation des conditions générales d’utilisation et un champ pour uploader un fichier.

Ajoutons la civilité :
Pour ce faire, nous allons utiliser les boutons radio pour n’autoriser qu’une seule réponse à cette question. Je sélectionne donc le marqueur « boutons radio ».

J’indique une option par ligne. Ici, j’ai choisi « Mademoiselle », « Madame », « Monsieur ». Je choisis ensuite d’entourer chaque élément par un libellé. Cette fonction consiste à ajouter une balise de type « label » pour faciliter la sélection des éléments si les boutons s’avèrent trop petits pour certains utilisateurs. Ils peuvent ainsi cliquer sur le contenu textuel pour sélectionner le bouton.

Ajoutons maintenant le champ pour la date de naissance.
Je sélectionne le marqueur « date ».

J’indique que ce champ est obligatoire et je lui ajoute un minimum (si mon site n’est pas autorisé aux mineurs par exemple) et je définis une valeur minimale et une valeur maximale.

Comme vous pouvez le constater sur l’aperçu du formulaire, la date apparaît bien mais aucun texte ne permet à l’internaute de savoir de laquelle il s’agit. Pour cela, je vais ajouter « Date de naissance » avant le champ que je viens de mettre en place.

Ajout du champ « envoi d’un fichier » :
Je clique sur le marqueur « fichier »

Ici, vous pouvez définir la taille maximale du document et les formats que vous acceptez (vous pouvez les séparer par un |).

Enfin, nous allons ajouter le champ de confirmation d’acceptation des conditions générales d’utilisation. Pour ce faire, cliquez sur le marqueur « confirmation » et validez.

Voilà, nous avons terminé de créer notre premier formulaire grâce au plugin Contact Form 7. Je le reconnais, le design des formulaires que vous créerez ne seront pas toujours à la hauteur de vos espérances. Certains des thèmes WordPress proposent une personnalisation de base de vos formulaires.

Vous pouvez également trouver quelques extensions qui proposent des designs prêts à l’emploi mais selon moi très saisonniers. Si vous souhaitez atteindre vos objectifs, je vous conseille d’utiliser les champs « id » ou « class » de chaque élément que vous définirez. Ils vous permettront de modifier plus simplement le CSS grâce à des critères de base comme « width, color, background-color… ».

 

Vous pouvez aussi découvrir d’autres extensions de formulaires telles que :

• WeForms
• Gravity Forms
• Caldera Forms
• CaptainForm
• Ninja Forms

A vous de jouer ;)