Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel]

Utilisé par plus de 5 millions de sites, Contact Form 7 est l’extension gratuite de WordPress idéale pour créer ton formulaire de contact.

Je t’accompagne pas à pas dans ce tutoriel. Chaque étape est illustrée.

Tu intègres facilement ton formulaire où tu le souhaites :

  • ta page de contact
  • ta page d’accueil
  • ton pied de page…

Cela ne prends que quelques minutes pour un formulaire simple. Tu n’auras qu’à réaliser un copier-coller.

Honnêtement, la version standard est moche et encombrante. Je te dévoile comment disposer d’une version esthétique avec des astuces de personnalisation.

Je suis passé de ce formulaire qui faisait le travail

formulaire d'origine

à celui-ci que je te propose d’intégrer sur ton site.

formulaire Contact Form 7 attractif

Nous verrons également comment le protéger du spam qui sinon représente une vraie plaie.

Cet article prend environ 12 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel Pinterest de l'article Comment créer gratuitement un beau formulaire de contact avec Contact Form 7
picto articles débutants

Débutant

Avant de nous lancer dans l’installation de l’extension sous WordPress, je te présente synthétiquement des astuces pour un formulaire performant.

7 conseils pour un formulaire efficace

  • Limite au maximum le nombre de champs à ceux dont tu as besoin à court terme. Il sera toujours le temps de demander le numéro de TVA intracommunautaire plus tard dans la relation.
  • Précise clairement les champs facultatifs. Le mieux est de les éliminer.
  • Les menus déroulants sont à limiter au maximum. L’expérience utilisateurs est désastreuse sur mobile. Les cases à cocher sont à privilégier.
  • Le texte du bouton d’action doit être clair. Un texte d’action à la première personne est plus parlant :
    • J’envoie mon message
    • Je communique mon CV
    • Je reçois les prochains articles
  • Si la demande est particulière, un exemple aide à visualiser le résultat attendu : Votre numéro de facture est situé en haut à droite du devis sous la forme F2019.328.
  • Si une question est personnelle ou sort de l’ordinaire, une explication est la bienvenue. Je précise que le calcul 5+2 est destiné à lutter contre le spam.
  • Toute information personnelle comme l’e-mail doit faire l’objet d’un consentement actif sur sa destination dans le RGPD.

Rentrons, si tu le veux bien, dans le vif du sujet.

Crée ton formulaire avec Contact Form 7

Installe l’extension

Tu te rends dans Extensions puis Ajouter.

wordpress menu ajout d'une extension

Tu recherches Contact form 7.

rechercher contact form 7

Tu l’installes

installer contact form 7

et actives l’extension.

activer contact form 7

Pour gagner du temps, tu recommences la même opération avec Material Design for Contact Form 7.

extension Material Design for Contact Form 7

Tu disposes désormais d’un menu Contact.

menu contact

Tu peux supprimer le formulaire de démonstration.

supprimer le formulaire de démonstration

Crée ton premier formulaire

Tu cliques sur créer un formulaire.

créer un formulaire

Tu nommes ton formulaire.

Un nom descriptif qui indique où tu vas l’insérer te permettra de le retrouver plus facilement par la suite (par exemple : Formulaire page d’accueil).

nom formulaire

Voici le formulaire standard.

formulaire standard

En dehors de ne pas être super attractif, il lui manque surtout la case RGPD obligatoire en Europe.

Je te propose le formulaire suivant.

formulaire attractif

Si celui-ci te convient, tu copies le code ci-dessous

[md-form spacing="tight"]

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">[md-text label="Prénom" outlined="yes"][text* Prenom][/md-text]</div>
<div class="column-half">[md-text label="Nom" outlined="yes"][text* your-name akismet:author][/md-text]</div>
</div>

<div class="form-row">
<div class="column-half">[md-text label="E-mail" outlined="yes"][email* your-email akismet:author_email][/md-text]</div>
<div class="column-half">[md-text label="Téléphone" outlined="yes"][tel Tel][/md-text]</div>
</div>

<div class="form-row">
<div class="column-full">[md-text label="Objet" outlined="yes"][text* your-subject][/md-text]</div>
</div>

<div class="form-row">
<div class="column-full">[md-textarea label="Votre message"][textarea* your-message][/md-textarea]
</div>

<div class="form-row">
<div class="column-half">[md-quiz label="" outlined="yes" help="Cette question protège du spam"][quiz quiz-1234 "Que font 7+2 ?|9" "Que font 4+2 ?|6" "Que font 3+5 ?|8"][/md-quiz]</div>
<div class="column-half">[md-accept label=""][acceptance optional] J'accepte que mon adresse e-mail soit stockée pour apporter une réponse [/acceptance][/md-accept]
</div>

<div class="form-row">
<div class="column-full">[md-submit][submit "J'envoie le message"][/md-submit]
</div>

</div><!--fin des instructions pour deux colonnes-->

[/md-form]

et remplaces le code présent à cet emplacement puis enregistres.

remplacer le code standard

Ajoute le code pour l’affichage sur deux colonnes

J’ai utilisé comme base de travail cet excellent article : Creating a responsive two column form using Contact form 7. Il crée deux colonnes pour certains champs qui passent sur une colonne en version mobile.

Tu vas ajouter du code à ton thème pour lui indiquer que tu souhaites modifier la mise en page du formulaire. Tu vas voir rien de sorcier.

Dans le menu de gauche : Apparence > Personnaliser

menu personnaliser le thème

Tu sélectionnes le menu de l’extension Material Design for Contact Form 7

menu extension material design for contact form 7

Tu copies le code ci-dessous,

#responsive-form{
	max-width:600px /* Tu peux modifier la largeur du formulaire ici*/;
	margin:0 auto;
  width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.3em;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/*Instructions pour le responsive*/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

tu le colles en bas dans CSS Personnalisé puis tu publies.

intégrer css pour le formulaire

Si tu as des besoins plus précis, je te détaille les différents champs de personnalisation dans la prochaine section.

Sinon, tu passes directement à l’étape de configuration de l’e-mail.

Modifie et ajoute des champs à ton formulaire

Tu vas ajouter ou modifier des éléments du formulaire réalisé au chapitre précédent.

Ajoute de nouvelles lignes

Si tu souhaites disposer de plus de champs de texte, tu copies-colles les instructions suivantes à l’emplacement désiré.

insérer de nouvelles lignes

Une ligne avec deux éléments :

2 champs
<div class="form-row">
<div class="column-half">[md-text label="TEXTE A AFFICHER A GAUCHE" outlined="yes"][text* NOM-CHAMP-GAUCHE][/md-text]</div>
<div class="column-half">[md-text label="TEXTE A AFFICHER A DROITE" outlined="yes"][text* NOM-CHAMP-DROITE][/md-text]</div>
</div>

Une ligne avec un seul champ :

champ unique
<div class="form-row">
<div class="column-full">[md-text label="TEXTE A AFFICHER" outlined="yes"][text NOM-CHAMP][/md-text]</div>
</div>

Tu remplaces ensuite le texte en majuscule.

Il existe d’autres éléments que tu peux intégrer.

Insère des cases à cocher

cases à cocher

Tu peux avoir un modèle qui accepte de multiples choix

<div class="form-row">
<div class="column-full">[md-checkbox label="Échantillons souhaités" display="columns-2" outlined="yes"][checkbox checkbox-1234 "bleu" "vert" "rouge" "jaune" "orange" "noir"][/md-checkbox]
</div>

ou une seule option acceptée.

<div class="form-row">
<div class="column-full">[md-checkbox label="Échantillon souhaité" display="columns-2" outlined="yes"][radio radio-1234 default:1 "bleu" "vert" "rouge" "jaune" "orange" "noir"][/md-checkbox]
</div>

Tu modifies le titre Échantillons souhaités. Les intitulés sont entourés de “” et séparés d’un espace.

Ajoute un menu déroulant

menu déroulant

Le code à ajouter :

<div class="form-row">
<div class="column-full">[md-select label="Fonction" outlined="yes"][select menu "RH" "Comptabilité" "Ingénieur" "Autre"]
[/md-select]
</div>

Les menus déroulants sont difficiles à utiliser sur mobile. Tu dois réaliser un test pour valider que ce choix est pertinent pour les utilisateurs.

Intègre un champ date

champ date

Le code pour ajouter une date :

<div class="form-row">
<div class="column-full">[md-text label="Date de rendez-vous souhaitée" outlined="yes"][date date-1234][/md-text]</div>
</div>

Donne la possibilité de joindre un fichier

joindre un fichier

Ce champ permet de limiter le poids du fichier (en Bytes) et les extensions acceptées (jpg, png, pdf, xls…).

limitations pour joindre un fichier

J’ai paramétré l’exemple pour un fichier Word ou PDF inférieur à 5 Mo.

<div class="form-row">
<div class="column-full">[md-file label="Transmettez nous votre CV" nofile="Doc, DocX et PDF" btn_text="Joindre un fichier" help="La limite de taille est de 5 Mo."][file file-1234 limit:5242880 filetypes:doc|docx|pdf][/md-file]
</div>

Modifie le caractère obligatoire d’un champ

Un champ est obligatoire s’il comporte une * à la suite de son nom : [email* Votre-email].

Ajoute une liste de destinataires

J’ai découvert cette astuce dans l’article Ajoutez un formulaire de contact à votre site avec Contact Form 7 de WPmarmite.

Tu ajoutes le code suivant en haut de formulaire.

code destinataires multiples

<div class="form-row"><div class="column-full">[md-checkbox label="Service destinataire du message"][checkbox* Destinataire exclusive "Comptabilité | [email protected]" "RH | [email protected]" "Direction | [email protected]"][/md-checkbox]
</div>

Tu intègres les différentes options sous la forme “Service ou personne | email” séparés par un espace en remplacement du texte d’exemple puis tu enregistres. Tu peux également changer l’intitulé du champ : Service destinataire du message.

remplacer destinataires

Dans l’onglet E-mail, tu indiques [Destinataire] dans le champ De.

installer emails destinataires multiples

Passe sur une version sombre

Si tu as choisi un thème foncè, la version classique ne sera pas approprié. Tu peux basculer sur une version avec le texte en blanc.

formulaire sombre - pour pas un rond

Tu remplaces [md-form spacing=”tight”] par [md-form theme=”dark”] en haut des instructions du formulaire.

Contact Form 7 passer le texte en blanc

Ajuste la hauteur du pavé du message

Cela ne s’applique que pour les formulaires sans l’extension Material Design qui le réalise automatiquement.

Je trouvais le champ de saisie du message trop massif.

votre message : hauteur classique

Le résultat pour deux lignes en hauteur :

votre message : hauteur 2 lignes

Pour réduire sa hauteur, j’ai ajouté X2 pour n’afficher que deux lignes en hauteur dans [textarea your-message x2]. Tu peux tester différentes hauteurs.

code hauteur champ de saisi texte

Configure l’e-mail et les messages d’erreurs

Les réglages se situent dans le menu interne de la page.

menu email

Onglet e-mail

Tu définis le message que tu recevras lorsqu’un visiteur utilisera ton formulaire de contact.

Tu complètes ton adresse e-mail de réception des messages dans Pour.

destinataire

Tu peux ajouter un e-mail en copie cachée en ajoutant “cc: [email protected]” dans En-têtes additionnelles.

copie cachée du message

Je te recommande d’indiquer dans l’objet de l’e-mail la provenance du message avant “[your-subject]” par exemple : Formulaire page d’accueil.

L’objet complété dans le formulaire représenté par “[your-subject]” est utile pour visualiser immédiatement les messages prioritaires et supprimer les éventuels spams sans ouvrir le message.

objet de l'e-mail

Tu peux supprimer dans le corps du message : “– Cet e-mail a été envoyé […]” qui n’apporte rien.

corps du message

Il n’est pas nécessaire de toucher aux autres champs.

Onglet messages

Il s’agit des messages qui apparaissent dans le formulaire.

Le premier indique que l’envoi s’est déroulé correctement.

message d'un envoi réussi

Les suivants sont des messages d’erreurs.

message d'erreur champ obligatoire

Les messages sont correctement traduits et formels.

Ils doivent refléter le ton utilisé sur ton site. J’ai modifié le premier en “Ton message est expédié. Je te remercie de m’écrire. Je te répondrai le plus rapidement possible.”. J’ai appliqué le tutoiement dans les messages comme sur l’ensemble du site.

personnaliser les messages d'erreurs

Teste et intègre ton formulaire

Il est intéressant de tester tranquillement ton formulaire pour vérifier que tout fonctionne avant de le mettre en ligne.

Crée une page de test

Tu copies le code généré par Contact Form 7 présent sous le titre. Il apparait dès que tu enregistres ton formulaire.

short code formulaire Contact Form 7

Tu crées une nouvelle page : Pages > Ajouter que tu supprimeras par la suite.

ajouter une page

Je te recommande d’ajouter Test ou A supprimer au nom pour bien l’identifier.

page de test

Tu colles le code dans un paragraphe. WordPress va automatiquement reconnaître le type d’informations et transformer le bloc en Code court (Shortcode).

ajout du short code du formulaire dans une page WordPress

Tu enregistres le brouillon puis cliques sur Prévisualiser.

prévisualiser le formulaire

Tu vérifies l’aspect visuel (sur ordinateur et sur mobile en réduisant la largeur de ta fenêtre) ainsi que les éléments suivants :

  • le message d’erreur avec un champ obligatoire vide
  • le message si la réponse au quiz contre les spams est incorrect
  • la bonne réception de l’e-mail
  • l’e-mail reçu contient tous les champs du formulaire

Quand tu réalises une modification, tu enregistres ton formulaire et recharges ta page.

recharger une page

Une fois que ton test est validé, tu peux copier ton code où tu le souhaites dans tes pages et articles.

Je n’ai pas remarqué de conflit entre Material Design et Elementor. Un lecteur m’a remonté qu’une de ses animations à disparu.

Il l’a résolu en supprimant l’animation. Tu vérifies ta page après publication.

Intègre ton formulaire dans le pied de page ou la barre latérale

formulaire en barre latérale

Menu de gauche : Apparence > Widget

menu widgets

Tu sélectionnes Texte et l’endroit où tu souhaites intégrer ton formulaire.

ajouter un widget texte

Tu donnes, si tu le souhaites, un nom qui apparaîtra en titre au-dessus du formulaire et colles le code de Contact Form 7.

intègre un formulaire dans la barre latérale

Sauvegarde tes messages

Contact Form 7 n’enregistre pas les messages qui te sont adressés. Si tu souhaites une sauvegarde, tu installes et actives l’extension Flamingo.

Flamingo extension WordPress de sauvegarde des messages de Contact Form 7

Tu disposes d’un nouvel élément dans ton menu.

flamingo messages entrants

Dans messages entrants, tu retrouves la liste des messages réceptionnés.

messages sauvegardés

Que tu peux retrouver en intégralité en cliquant dessus.

détails du message

Tu peux déclarer un expéditeur comme spammeur.

déclarer le message en spam

Tu retrouveras d’autres moyens efficaces contre le spam dans le prochain chapitre.

Le carnet d’adresses collecte toutes les adresses e-mail.

menu carnet adresses flamingo

Il regroupe les messages par contact.

carnet d'adresses flamingo

Protège-toi contre le spam (4 outils)

Comme beaucoup de sites, j’ai reçu des quantités incroyables de spam par le formulaire. Voici ce que je recevais en deux heures.

spam reçus par le formulaire en deux heures

Quiz

quiz antispam standard

Le plus simple et le moins gênant pour l’utilisateur est l’ajout d’une question simple que les robots ne pourront pas résoudre. Je l’ai intégré dans mon exemple.

Le code à ajouter :

[quiz quiz-1234 "Question anti-spam : Que font 7+2 ?|9" "Question anti-spam : Que font 4+2 ?|6" "Question anti-spam : Que font 3+5 ?|8"]

Si tu souhaites avoir un meilleur rendu, tu peux utiliser le code que je présente.

Akismet

Dans l’article Spam Filtering with Akismet, l’équipe de Contact Form 7 propose d’ajouter les codes suivants aux champs pour utiliser l’anti-spam intégré :

  • URL : [text your-url akismet:author_url]
  • Auteur : [text* your-name akismet:author] (déjà réalisé dans la version communiquée dans cet article)
  • E-mail : [email* your-email akismet:author_email] (déjà réalisé dans la version communiquée dans cet article)

Honeypot

Contact Form 7 Honeypot installe une question invisible pour les utilisateurs mais que les robots peuvent compléter ce qui déclenche la mise en spam.

Tu la retrouves dans le répertoire des extensions WordPress.

contact form 7 honeypot

Elle ne demande aucun réglage

Captcha

Je ne suis pas un fan des captchas pour l’expérience utilisateurs. Le quiz est normalement suffisant pour filtrer les messages indésirables.

Cependant, Google a amélioré le système. Il donne une note de probabilité de spam et déclenche le capcha en fonction.

Installe l’extension dédiée aux Captchas de Contact Form 7

Tu installes et actives l’extension Really Simple CAPTCHA.

really simple captcha extension de lutte contre le spam dans les formulaires

Enregistre ton site sur Google

Tu te connectes sur une de tes adresses Gmail. Tu te rends sur la page Google reCaptcha.

  • Tu nommes le Captcha (par exemple Page d’accueil Mon Site),
  • choisis reCAPTCHA version 3,
  • complètes le nom de domaine de ton site sans https://www.,
  • acceptes les conditions
  • et valides.
paramètres de Google recaptcha

Tu obtiens tes clés d’activation.

clés captcha google

Dans WordPress, tu cliques sur Configuration de l’intégration dans Contact > Intégration.

intégration captcha dans WordPress

Tu colles les deux clés.

coller les clés captcha de google dans wordpress

Aucune autre action n’est nécessaire.

Le capcha ne s’affiche que si le visiteur possède un profil suspect. Tu vois cependant qu’il est actif avec ce logo qui apparaît en bas à droite.

logo recaptcha

Adresse une réponse automatique (autorépondeur)

Tu peux adresser un message automatiquement dès qu’un visiteur valide le formulaire.

Le plus naturel est d’indiquer que la demande de l’internaute est prise en compte et qu’une réponse lui sera adressée sous un certain délai.

Tu peux également adresser un code de réduction, renvoyer vers la page dédiées aux FAQ, diriger vers la nouvelle collection…

Tu actives l’e-mail (2) et complètes les champs.

email de réponse destinataire, expéditeur et objet

Il est possible de reprendre des champs complétés par l’internaute pour personnaliser le message.

personnalisation de l'email de réponse

Nous pourrions par exemple avoir :

Bonjour [Prenom],

Nous avons reçu votre demande concernant [your-subject]. Nous essayons de répondre le plus rapidement possible sous maximum 2 jours travaillés.

Cordialement,
M. Pink
[email protected]

Les champs de personnalisation disponibles sont visibles en haut de page.

champs personnalisation disponibles

Pour éviter que ton texte ne perde son sens, mieux vaut n’utiliser que des champs obligatoires.

Personnalise les couleurs et polices de ton formulaire

Je monte le niveau d’un cran en te détaillant les CSS que tu peux modifier dans ton formulaire. Si tu débutes, honnêtement, tu peux passer cette étape et y revenir plus tard.

Ces codes sont valables uniquement pour les formulaires réalisés avec Material Design for Contact Form 7.

Bouton d’envoi

Si tu veux modifier la couleur du bouton, tu as deux couleurs à renseigner.

Celle quand la case RGPD est décochée,

.mdc-button
{
background-color: #eeeeee!important;
}

et celle quand le formulaire est prêt à être envoyé.

.mdc-button--raised:not(:disabled)
{
color:#ff33f0!important;
background-color: #ff9f33!important
}

Pour modifier l’apparence du texte du bouton :

.mdc-button
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-style:italic;
font-size:1em!important
}

Couleurs des fonds

Tu peux modifier la couleur générale d’arrière-plan du formulaire :

.cf7md-form
{
  background: #E04B4D;
}

et celles des champs :

.mdc-text-field__input
{
  background-color: #fcff33!important;
}

Polices

Voici les instructions pour modifier la police et la taille de tous les éléments du formulaire.

cf7md-form,
.mdc-text-field__input,
.cf7md-item,
#cf7md-form input,
#cf7md-form label,
#cf7md-form textarea,
#cf7md-form p,
#cf7md-form h1,
#cf7md-form h2,
#cf7md-form h3,
#cf7md-form h4,
#cf7md-form h5,
#cf7md-form h6
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-size:1em!important;
padding-bottom:0.3em;
padding-top:0.3em
}

Fond et bordure de la case à cocher

Je n’ai pas réussi à différencier quand la case est ou non cochée.

.mdc-checkbox__background
{
background-color: #ff9f33!important;
border-color:#eeeeee!important
}

Conclusion

Le filtrage des spams issus du formulaire de contact représente un gain de temps considérable. J’ai reçu jusqu’à 11 e-mails indésirables en deux heures.

J’ai cherché comment obtenir le formulaire le plus attractif possible avec les solutions gratuites.

Découvre comment ajouter gratuitement un formulaire de contact esthétique sur ton site WordPress.

Le plus compliqué a été de limiter la partie technique au maximum pour que le tutoriel soit accessible au plus grand nombre.

Contact Form 7 est une extension fiable et mise à jour régulièrement. Cela t’assure de ne pas devoir tout refaire demain.

signature de Jean du site pour pas un rond

Les articles susceptibles de t’intéresser :

Retrouve tous les articles pour Créer seul ton site

portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

bannière de la newsletter de pour pas un rond version bleu-vert
Résumé
Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel]
Article
Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel]
Description
Un tutoriel pas à pas pour créer un formulaire esthétique sur WordPress. Retrouve un modèle prêt à l'emploi et des astuces contre le spam.
Auteur
Publié par
pour pas un rond
Logo

Cet article a 2 commentaires

  1. Merci pour cet article très complet et, super intéressant. J’ai pu créer un formulaire tel que je le voulais !
    Un petit problème à signaler cependant : sous WP 5.2.3 / thème Ocean / Elementor, la création du formulaire a bloqué l’animation fade in down d’un visuel qui jusque-là fonctionnait très bien. Le visuel a tout simplement disparu de la page (tout en apparaissant encore avec l’animation dans Elementor) > Incompréhensible. Je l’ai donc rendu statique et il a réapparu sur la page.
    Mystère…

    1. Bonjour,

      Je n’ai pas remarqué de conflit entre Material Design et des fonctionnalités d’Elementor. Merci pour ce retour. Je vais ajouter ce point de vigilance dans l’article.

      A bientôt,
      Jean

Laisser un commentaire

Fermer le menu
consequat. libero. Sed ipsum ut id, vulputate,