S’il y a quelque chose que tous les sites ont en commun, c’est bien le formulaire de contact.

Même s’il y a encore des irréductibles qui ne veulent pas être dérangés, on peut dire que la quasi-totalité des sites ont une page de contact.

Dès lors, pour mettre cela en place sur un site WordPress, il y a deux possibilités :

  1. 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.
  2. 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…

Formez-vous à WordPress en 8 semaines

avec la formation à distance la plus généreuse du marché (éligible aux financements)

WPChef, la formation WordPress de référence

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.

plugin Contact Form 7 sur le répertoire officiel de WordPress

Configurer un formulaire de base

Une fois que vous aurez installé et activé Contact Form 7 (jetez un œil à 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 :

Contact Form 7 homepage

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.

L'extension Flamingo sur le répertoire officiel

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).

Création d'un formulaire sur CF7

Vous arrivez sur la page suivante qui comporte 4 onglets différents :

  • Formulaire
  • Email
  • Messages
  • Réglages additionnels
Ajout d'un formulaire de contact

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.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

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

Marqueurs de formulaire Contact Form 7


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.

Onglet « Email »

Etudions les champs de cette section et ce qu’ils contiennent :

Email du destinataire

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 WPMarmite, je pourrais choisir le sujet suivant « [WPMarmite] 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 :

Email 2 de CF7

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 WPMarmite :

Messages d'erreur de Contact Form 7

Onglet « 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.

Réglages additionnels de Contact Form 7

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…

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

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).

Aperçu du champ Texte

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.

Intégration du champ Texte dans le formulaire

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 :

Champ Date de Contact Form 7

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.

champs texte contact form 7

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 :

menu deroulant contact form 7

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>.

Balise de confirmation Contact Form 7

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.

quiz contact form 7

Et dans le formulaire :

quizz inséré

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 :

Balise fichier

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.

Accélérez votre site internet avec WP Rocket

Transformez votre site en fusée grâce au plugin de cache reconnu le plus performant par les experts WordPress.

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.

Balise Envoyer

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.

reCAPTCHA sur CF7

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 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.

Google reCAPTCHA formulaire

Une fois les infos remplies, Google vous affichera votre Clé du site et votre Clé secrète.

Clés de sécurité Google

Il ne vous reste plus qu’à les copier-coller dans les cases prévues à cet effet, cliquer sur Enregistrer les changements et vous êtes bon pour le service.

Intégration en page des clés Google

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.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

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 :

shortcode contact form 7

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 :

choisir destinataires contact form 7

Comme le montre l’image, il faut créer un menu déroulant et mettre les destinataires dans les choix. Utilisez la structure SERVICE|EMAIL pour masquer les emails aux visiteurs (ex : Direction|direction@monsite.com).

Afin que cela fonctionne, il faut impérativement mettre le marqueur [service] dans le champ Pour.

service contact form 7

3. Obtenir l’IP du visiteur

Si, pour une quelconque raison, vous désirez obtenir l’IP de la personne qui vous contacte, insérez le marqueur [_remote_ip] dans le corps du message (par exemple sous la signature).

4. Obtenir la date et l’heure de l’envoi

De même, il est possible d’avoir la date et l’heure d’envoi de l'email. Vous allez me dire que cela correspond à la date et l’heure de réception de l'email et vous aurez raison.

Mais bon, si vous en avez besoin, insérez les marqueurs [_date] et [_time] dans le corps du message.

5. Obtenir l’adresse de la page d’envoi

Si vous avez intégré votre formulaire dans un widget ou quelque par dans votre thème, connaitre la page exacte depuis laquelle le formulaire a été envoyé peut être intéressant.

Pour cela, insérez le marqueur [_url] dans le corps du message ([_post_url] retournera le permalien de l’article, à vous de voir donc).


En complément, il existe deux autres astuces que je ne détaillerai pas ici car leur mise en place concerne des utilisateurs plus avancés. Je ne comprends pas trop pourquoi l’auteur a intégré ces fonctionnalités de cette manière mais bon, c’est comme ça. Il s’agit de :

Pour tout savoir sur Google Analytics et apprendre à en tirer profit pour comprendre les statistiques de votre site WordPress, consultez cet article.

Contact Form 7 : on fait le bilan

Contact Form 7 fait partie des 6 extensions du répertoire officiel WordPress.org cumulant plus de 5 millions d’installations actives.

Il permet de créer des formulaires simples mais il ne sera pas toujours facile de créer des choses complexes avec lui.

Vous devrez avoir quelques connaissances en HTML pour avoir un rendu correct. Si vous avez des bases en CSS, vous pourrez pousser la personnalisation grâce aux classes et identifiants qu’il est possible d’ajouter à chaque élément.

Si vous recherchez plus de simplicité, je vous recommande plutôt Gravity Forms.

Il permet notamment d’élaborer des formulaires grâce à de simples glisser-déposer. Ce qui – il faut le dire – place Contact Form 7 loin derrière.

De multiples extensions complémentaires sont disponibles pour bénéficier de davantage de fonctionnalités (comme par exemple Slack, Mailchimp ou encore Paypal). Il y a vraiment de quoi faire.

Désormais, je vous laisse la parole. Que pensez-vous de Contact Form 7 ? Quel plugin de formulaire utilisez-vous pour votre site ?

Exprimez-vous en publiant un commentaire ci-dessous.