Ajoutez un formulaire de contact à votre site avec Contact 7
Votre thème possède un modèle de page « Contact » ou un autre moyen d’inclure un formulaire et, dans ce cas, c’est tout bon.
Passer par une extension pour inclure un formulaire dans votre page Contact.
Dans cet article, nous allons voir comment utiliser un plugin téléchargé plus d’1 milliard 300 millions de fois (au moment d’écrire ces lignes) ! J’ai nommé Contact Form 7 (CF7).
Bien qu’il soit assez simple d’utilisation, je tenais à rédiger une « recette » pour vous montrer comment intégrer des formulaires de contact plus ou moins évolués sur votre site.
Voyons de quoi se compose cet article dans le…
Sommaire
Qu’est-ce que Contact Form 7 ?
Contact Form 7 est une extension WordPress gratuite pour créer des formulaires de contact simplement et rapidement.
Flexible grâce à la présence de nombreux champs personnalisables, elle permet aussi de lutter contre le spam.
Elle fait partie des plugins les plus populaires du répertoire officiel.
Configurer un formulaire de base
Une fois que vous aurez installé et activé Contact Form 7 (jetez un oeil à ce tuto pour découvrir comment installer un plugin), vous verrez qu’un élément Contact a été ajouté dans le menu (sous Commentaires). Cliquez dessus pour vous arriver sur la page principale de l’extension :
Comme vous pouvez le voir, le plugin a été traduit en français par de gentils contributeurs 🙂
D’entrée de jeu Contact Form 7 vous informe que vous êtes protégés du spam via Akismet ou reCAPTCHA.
Vous êtes également invité à télécharger une extension supplémentaire, Flamingo, également conçue par Takayuki Miyoshi, le créateur de CF7.
Grâce à elle, vous pouvez sauvegarder en base de données tous les messages soumis dans vos formulaires. Sans ça, vous ne les auriez que dans votre boîte de réception (mais ça vous suffira peut-être).
Enfin, ne vous inquiétez pas, ce tuto va vous aider à créer votre premier formulaire. Pour ce faire, cliquez simplement sur le bouton Créer un formulaire en haut de l’écran (ou dans le menu).
Vous arrivez sur la page suivante qui comporte 4 onglets différents :
Formulaire
Email
Messages
Réglages additionnels.
Il y en a un formulaire présent par défaut. Voyons à quoi correspondent les différentes options :
Saisissez le titre de votre formulaire
Cette première section sert à donner un nom à votre formulaire. Appelez-le « Contact », ou comme bon vous semble.
Vous pouvez aussi lui donner un nom particulier, si le formulaire que vous créez doit être placé sur une page spécifique (formulaire de support, de demande de devis, etc).
Un bouton Enregistrer est également présent. N’oubliez pas de vous en servir une fois que vous aurez apporté vos modifications.
Onglet « Formulaire »
Cette section contient le code HTML de votre formulaire de contact. Plusieurs paragraphes sont présents (balises <p>...</p>) avec des marqueurs pour les champs du formulaire ainsi que le bouton Envoyer.
Détaillons tout cela pour mieux comprendre.
<label>Votre nom (obligatoire)
[text* your-name]</label>
Le code ci-dessus affichera le texte « Votre nom (obligatoire) » puis le champ texte associé au nom.
Dans la seconde partie de ce tutoriel, nous verrons comment créer des marqueurs. Vous verrez que leur syntaxe n’est pas très importante.
Les champs email, sujet et message sont structurés de la même façon. Le dernier élément entre crochets – [submit "Envoyer"] – embarque le marqueur du bouton de validation du formulaire.
Utilisations des marqueurs
Les boutons au-dessus du formulaire vous permettent d’ajouter toutes sortes de champs dans les formulaires que vous créez : texte, email, date, menu déroulant, boutons radios, quiz et même envoyer des fichiers.
Nous verrons comment les configurer dans la partie « Ajouter des champs supplémentaires » de cet article.
Email du destinataire
Etudions les champs de cette section et ce qu’ils contiennent :
Pour : L'email vers lequel le message doit être envoyé (votre email ou celui de votre client).
De : Email de l’expéditeur. Ici on récupère l'email de la personne à partir du champ email du formulaire (identifié par le marqueur [your-email] dans le code du formulaire). Le nom est indiqué avant l'email par le marqueur [your-name].
Il est important de bien garder la structure NOM <EMAIL> dans ce champ pour que cela s’affiche convenablement dans votre boite de réception.
Objet : Dans notre cas, le formulaire récupère le sujet indiqué par l’expéditeur grâce au marqueur [your-subject]. Cela dit vous n’êtes pas obligé de vous en servir. Si j’utilisais CF7 pour WP Marmite, je pourrais choisir le sujet suivant « [WP Marmite] Message de [your-name]« .
En-têtes additionnelles : Ce champ est utile pour spécifier des personnes à mettre en copie et en copie cachée. Vous pouvez par exemple envoyer une copie de l'email à la personne qui vous contacte (on verra que nous pouvons le faire d’une autre manière juste après).
Pour mettre une personne en copie, ajoutez Cc : cofondateur@site.com. Vous pouvez aussi utiliser la structure NOM <EMAIL> vue précédemment : Cc : GÉRARD <cofondateur@site.com>
Afin de mettre une personne en copie cachée, utilisez Bcc : cofondateur@site.com. Comme pour la copie normale, la structure NOM <EMAIL> fonctionne aussi.
Corps du message : Ce champ va servir à mettre en page le message que vous allez recevoir. Dans la capture d’écran, on voit que les marqueurs sont réutilisés.
Pour y voir plus clair, insérez uniquement le marqueur [your-message] afin de n’avoir que le message de l’expéditeur (l'email et le nom étant déjà dans le champ De). En procédant ainsi, le message reçu ressemblera davantage à un message envoyé directement.
Une signature est ajoutée automatiquement par Contact Form 7 pour indiquer à partir de quel formulaire le message a été envoyé. Elle n’est peut-être pas optimale mais je vous conseille de la conserver pour vous rappeler de la provenance de l'email. Vous pouvez l’éditer à votre guise pour la rendre plus pertinente.
Exclure les lignes dont la balise d'email est vide : La traduction n’est pas correcte ici. Cette option sert à exclure les lignes pour lesquelles le marqueur n’a pas été indiqué par l’expéditeur. Par exemple, si vous avez un champ Ville et que la personne ne remplit pas ce champ, la ligne devant afficher le marqueur Ville ne sera pas affiché. Vous voyez où je veux en venir ?
Envoyer cet email au format HTML : Ici rien de compliqué, cochez la case pour recevoir les emails de contact au format HTML. Dans la plupart des cas, ce n’est pas nécessaire.
Pièces jointes : Dans le cas où vous donnerez la possibilité d’envoyer des pièces jointes. Il faudra indiquer le ou les marqueurs correspondants dans ce champ pour les recevoir (ne vous étonnez pas de rien recevoir si vous avez laissé ce champ vide).
Email (2)
À partir du moment où l’on a la possibilité de mettre des personnes en copie, on peut se demander à quoi sert un second champ d'email.
Ce champ est utile si vous désirez envoyer un message structuré différemment.
Par exemple, si vous voulez envoyer une copie de l'email à l’expéditeur, vous pouvez ajouter une phrase du genre en introduction : « Merci de m’avoir contacté, je vous répondrai d’ici 24h. Pour rappel, voici le contenu de votre message : ». Voyez plutôt :
Onglet Messages
Ensuite viennent les messages d’erreur et de réussite qui s’afficheront en retour lors de l’envoi de l'email.
Si tout se passe bien, le message de réussite s’affichera (le premier), sinon un des messages d’erreur sera affiché selon le problème.
À vous de voir ce que vous désirez modifier. Vous pouvez personnaliser le message de réussite et d’erreur pour être moins froid. Voilà ce que j’ai mis à l’époque pour WP Marmite :
Réglages additionnels
La dernière section de cette page concerne des utilisations un peu plus avancées. Nous en verrons quelques une dans les 5 astuces proposées à la fin de l’article.
Vous voilà désormais en possession d’un formulaire de contact basique (n’oubliez pas de le sauvegarder grâce au bouton Enregistrer, situé en haut à droite de la page). Voyons maintenant comment le personnaliser…
Ajouter des champs supplémentaires
Après la découverte des différentes sections de la page d’édition d’un formulaire, intéressons-nous à l’utilisation des marqueurs, ce qui va nous permettre d’insérer de nouveaux champs.
Commençons par cliquer sur le premier élément :
Le Champ texte
Une zone de configuration du champ texte s’affichera. Vous pouvez lui attribuer :
Une obligation de le remplir ;
Un nom ;
Une valeur par défaut (que vous pouvez placer en filigrane) ;
Une vérification antispam via le plugin Akismet (seulement utile si le champ texte est un nom) ;
Un identifiant (pour le CSS) ;
Une classe (toujours pour le CSS) ;
Dans l’exemple ci-dessous, j’ai rendu le champ obligatoire et ajouté du texte en filigrane (placeholder).
Une fois que le champ est configuré, on obtient un marqueur qu’il faut placer dans le code du formulaire.
Cliquez maintenant sur « Insérer la balise » pour cela. Pour conserver un affichage classique, j’ai repris la structure en label des autres champs.
Maintenant que ce champ est dans le formulaire, il faut pouvoir le récupérer lorsqu’une personne enverra un message. D’où la présence d’un second marqueur [text-126].
Comme le plugin l’indique, il faut le placer dans le corps du message de l'email qui nous sera envoyé.
Enfin, vous pouvez aussi le placer dans le sujet si cela a un intérêt pour vous.
La procédure est la même pour tous les autres champs. Regardons en tout de même certains d’entres-eux.
Je vais passer sur le champ email, URL et les différents nombres pour vous parler du…
Champ date
Admettons que vous créez un formulaire de réservation : avoir une date d’arrivée et une date de départ est impératif. De la même manière que le champ texte, on peut configurer une date :
Pour la date d’arrivée, j’ai défini une date minimale et une date maximale afin d’éviter aux gens d’inclure de mauvaises valeurs.
La zone de texte
Pour rédiger leur message, les expéditeurs auront besoin d’une zone de texte.
Comme pour les autres champs, il faut insérer le premier marqueur dans le code du formulaire, et le second dans le corps du message.
Menu déroulant
Si votre formulaire permet à vos visiteurs de vous contacter au sujet d’une de vos offres, un menu déroulant peut s’avérer utile pour connaître l’offre sur laquelle le visiteur veut des informations.
Indiquez un choix par ligne et cochez éventuellement des options :
Note : Les boutons radios et les cases à cocher ont des fonctionnements similaires.
Confirmation
Avec ce champ, vous pouvez ajouter un bouton d’acceptation. Si le bouton n’est pas coché par votre visiteur, l'email ne pourra pas être envoyé.
Pour vous conformer en partie au RGPD, vous pouvez vous servir de ce champ pour demander à vos visiteurs d’accepter de votre Politique de confidentialité.
Dans ce cas, pensez à ajouter un petit texte dans ce style “En cochant cette case, j’accepte la Politique de confidentialité de ce site” au milieu de deux balises <label>.
Au niveau des options, notez qu’il est possible de rendre cette case à cocher facultative.
Quiz
Si vous voulez filtrer les emails que l’on vous envoie, vous pouvez utiliser un quiz (je vous parle un peu plus tard d’une autre solution).
Même si le spam est généralement bien traité par Contact Form 7, ajouter une question subsidiaire permet d’être certain que ses interlocuteurs sont bien humains.
Et dans le formulaire :
Dans ce cas, j’ai demandé quelle était la capitale de la France mais vous pouvez tout à fait demander la solution d’un petit calcul.
L’important est d’utiliser la structure : Question|Réponse
Envoi de fichiers
Vos interlocuteurs peuvent aussi vous envoyer des fichiers. Cela peut être un cahier des charges, des images, etc. Bref, tout ce que vous voulez :
Pour éviter de recevoir n’importe quel type de fichiers, il est recommandé de définir une taille maximale. Indiquez 1, 2, 3 ou 10mb, voire plus selon les fichiers que vous attendez.
Indiquez également les formats de fichiers acceptés par votre formulaire, basez-vous sur cet exemple : pdf|doc|docx. L’important est de bien séparer les extensions par des barres verticales : |.
Dernière chose à savoir, il ne faut pas mettre le second marqueur ( [fichier]) dans le corps du message mais dans le champ Pièces jointes de l'email.
Bouton Envoyer
Afin d’envoyer son message, votre interlocuteur devra cliquer sur un bouton Envoyer. Comme pour les champs étudiés précédemment, il est possible d’ajouter un identifiant et une classe afin de le personnaliser avec du CSS.
Le libellé correspond au texte du bouton, il est donc important de le spécifier.
Collez ensuite le marqueur dans le code du formulaire sur la gauche.
Nous avons terminé notre tour des marqueurs proposés par Contact Form 7. Mais avant de passer à l’intégration de votre formulaire sur votre site, j’aimerais m’arrêter quelques instants sur les captchas.
CAPTCHA
Tout à l’heure, pour pouvoir filtrer les emails, je vous ai indiqué qu’il était possible d’utiliser un quiz avec Contact Form 7.
Mais il existe aussi une solution non native sur CF7, mais plus conseillée : l’utilisation d’un captcha.
Un captcha est un test qui permet notamment de lutter contre le spam en différenciant les humains des robots.
Il nécessite une réponse de l’utilisateur (choisir des photos, recopier des mots) avant d’effectuer une action (télécharger un fichier, création d’un compte mail, valider un commentaire, envoyer un formulaire, etc.).
Pour insérer un captcha avec CF7, comment on fait ?
Eh bien avant la mise à jour de cet article, je vous avais détaillé comment faire grâce à une autre extension conçue par le créateur de CF7 : Really Simple Captcha.
Elle permet notamment de choisir la taille et le thème du captcha (couleur de fond et couleur des caractères).
Entre temps (pour les versions de CF7 supérieures à la 4.3), Takayuki Miyoshi a viré sa cuti et recommande désormais l’utilisation de reCAPTCHA.
Il s’agit d’un service de Google qui permet de prouver que vous n’êtes pas un robot en cochant une seule case.
Si l’ordinateur a un doute sur votre état d’humain, il vous fait passer un petit test.
Pour lier reCAPTCHA à CF7, suivez le lien Intégration dans le menu de l’extension. Puis cliquez sur le bouton Configuration de l’intégration.
Sur la page suivante, on vous invite à saisir une Clé du site et une Clé secrète.
Pour cela, rendez-vous sur cette page et cliquez sur le bouton bleu Admin Console, en haut à droite de la page.
Renseignez les informations demandées en choisissant le captcha de votre choix (version 3 ou version 2). Google vous présente les différents types de captchas sur cette ressource.
Par exemple, optez pour un reCAPTCHA version 2 si vous voulez qu’une case à cocher “Je ne suis pas un robot” s’affiche.
Une fois les infos remplies, Google vous affichera votre Clé secrète et votre Clé du site.
Il ne vous reste plus qu’à les copier-coller dans les cases prévues à cet effet, et vous êtes bon pour le service.
Et pour tout savoir sur les captchas, WPMarmite a le guide qu’il vous faut, au sein duquel on vous présente notamment 6 extensions dédiées.
Allez, comme promis, il est temps de passer à l’intégration de votre formulaire dans votre contenu.
Intégrer un formulaire sur votre site
Une fois que vous aurez terminé de configurer les champs de votre formulaire, cliquez sur le bouton Enregistrer, en haut à droite de l’écran.
Sous le titre, vous constaterez la présence d’un shortcode :
Pour insérer votre formulaire, il vous suffit de coller le code court (en anglais on parle de shortcode) dans l’article, la page ou le widget de votre choix.
Et oui, ce n’est pas plus compliqué 🙂
Je vous propose de terminer ce tutoriel par…
5 astuces pour personnaliser vos formulaires
Si vous voulez que vos formulaires aient des comportements un peu plus avancés, voici quelques astuces qui pourront vous aider.
Bien sûr, ce ne sont pas les seules choses qu’il est possible de faire avec cette extension.
Jetez un œil aux autres plugins qui se couplent à Contact Form 7 pour voir ce qu’ils peuvent faire.
1. Insérer un formulaire n’importe où
Par défaut, il n’est possible d’insérer des formulaires que dans les publications (articles, pages ou autre) et dans les widgets.
Si vous voulez inclure un formulaire dans un modèle de page ou à un endroit précis de votre thème, utilisez le code PHP suivant (évidemment en mettant le bon shortcode):
<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>
2. Laisser le visiteur choisir le destinataire
Pour donner la possibilité à vos visiteurs de contacter une personne ou un service particulier de votre entreprise, procédez de la façon suivante :
