Les meilleures extensions WordPress > Créer des formulaires de contact

Les formulaires de contact sont un peu plus complexe que ce qu’on s’imagine. 

Il ne s’agit pas simplement de les créer et les publier mais également de les relier à un système qui va automatiquement nous envoyer les emails. 

Et si on les utilise pour générer des champs d’inscription à la newsletter pour notre emailing, il faut également les relier automatiquement à notre solution d’emailing marketing (comme Mailchimp par exemple).

Heureusement, ce guide va aborder en détail et clics par clics, comment créer, publier et automatiser gratuitement tous vos formulaires sur WordPress.

Ce guide va vous apprendre à créer des formulaires de contact et de souscription à la newsletter sur votre site internet en utilisant l’extension WordPress Contact Form 7.

Il existe de nombreuses extensions vous permettant de créer des formulaires de souscription.

Mais Contact Form 7 est extrêmement flexible, gratuit et va nous permettre de relier des formulaires à Mailchimp. 

C’est pourquoi nous restons sur Contact Form 7, tellement populaire qu’il vient avec d’autres addons qui vont augmenter ses fonctionnalités de bases.

Voici un exemple de formulaire que l’on va pouvoir créer à travers ce guide : 

formulaires de contact wordpress

Comment créer des formulaires de contact et de souscription sur son site WordPress ?

En 4 grandes étapes, nous allons créer de A à Z nos formulaires de contact, les publier sur notre site WordPress et les relier à Mailchimp.

Allons-y !

ETAPE 01 :

Créer des formulaires de contact et de souscription à la newsletter avec Contact Form 7

Nous allons utiliser le plugin Contact Form 7 qui va nous permettre de créer entièrement nos formulaires de contact.

Nous allons construire un formulaire avec des champs entièrement personnalisés.

A la fin de cette partie vous serez capable de construire n’importe quel formulaires de contact pour votre site WordPress

Contact Form 7 est une extension très simple à utiliser mais également très puissante.

Elle permet de créer autant de formulaire que vous le souhaitez et de les publier n’importe où sur votre site internet.

Voilà le type de formulaire que l’on va créer dans cette partie du guide :

Contact Form 7 permet une grande variété de champs et s’intègre aussi bien sur vos pages et articles WordPress que sur vos pages créées avec le constructeur Elementor Page Builder.

En effet l’addon à Elementor : Essential Addons for Elementor, intègre un widget gratuit Contact Form 7.

Contact Form 7 nécessite de prime abord un petit tuto pour être correctement pris en main.

Heureusement ce guide est là pour ça.

Installer Contact Form 7

Puisque c’est une extension, on va dans Tableau de bord > Extensions > Ajouter.

Ensuite on cherche Contact Form 7

Puis Installer > Activer

contact form 7 formulaires de contact wordpress

Une fois installé, on va avoir un nouvel onglet dans notre tableau de bord intitulé Contact.

C’est à partir de cet onglet qu’on va pouvoir créer nos formulaires de contact.

Créer un nouveau formulaire de contact WordPress avec Contact Form 7

Tableau de bord Google Analytics

Donc si on va dans Contact > Formulaire de contacts, on a déjà un premier formulaire créé automatiquement par Contact Form 7.

On va cliquer dessus pour l’éditer et on arrive sur la page de création du formulaire :

formulaire de contact avec contact form 7

Première chose à faire, on donne un titre au formulaire.

Le titre ne sera pas visible, c’est pour nous pour pouvoir le distinguer des autres formulaires que vous allez créer.

Donc donnez quelque chose d’explicite comme Form Page Contact ou Form souscription Newsletter, etc.

Une fois nommé, on va pouvoir commencer à créer notre formulaire.

Comprendre le panneau de création de Contact Form 7:

On va comprendre rapidement comment construire son formulaire :

Donc on a déjà un premier formulaire pré-rempli.

Voilà à quoi va ressembler notre formulaire de contact actuel une fois publié (a gauche la fenêtre actuelle Contact Form 7, à droite le rendu sur une page WordPress) :

preview formulaire de contact form 7

Je vous montre ainsi systématiquement le rendu une fois publié pour mieux comprendre ce que vous écrivez dans Contact Form 7.

La zone de délimitation d'un champ :

Un champs de notre formulaire de contact form 7 c’est ce bout de code. 

  • On va retrouver le label qui encardre le titre ou tout le champ. 
  • Puis le titre 
  • Le champ en question (entre crochet)
  • Et le texte d’aide 


Voyons rapidement chacun de ces éléments pour comprendre simplement comment se contruit notre formulaire de contact : 

Champs formulaires de contact wordpress contact form 7 code

Entre les deux balises label, on a un champ de formulaire.

Il y a une subtilité très importante avec ces 2 balises label : 

Les balises labels peuvent donc être soit directement de chaque côté du titre, soit une au début et une à la fin du champ. 

Si vous utilisez Elementor : Balises de part et d’autre du titre. 

  • Si vous utilisez Elementor pour créer et publier vos pages, alors le mieux est de mettre les balises entourant le titre. De cette manière les champs de notre formulaire de contact vont prendre toute la largeur de la section dans laquelle ils sont publiés. Ce qui permet de faire des réglages beaucoup plus beaux sur Elementor.

Si vous n’utilisez pas Elementor : balises de part et d’autre du champ 

  • Si vous ne travaillez pas avec Elementor alors utilisez la mise en page proposée par Contact Form 7 avec les deux balises label qui entourent le champs du formulaire.  
formulaire de contact balises label wordpress
Ici par exemple, les balises label sont de chaque côté du champs, au début et à la fin. C'est recommandé si notre formulaire n'est pas publié sur Elementor mais sur une pages WordPress classique.

Le titre du champ ou label :

titre champ formulaires de contact

<label> Titre du champ

Après la balise label, on retrouve le titre de notre champ.

Par exemple Nom ou prénom ou encore adresse email.

C’est le texte qui va se retrouver au-dessus de notre champ

Le type de champs de notre formulaire de contact

type de champs formulaires de contact

[champ du formulaire]

Entre crochets, on retrouve le champ du formulaire

On va le sélectionner à chaque fois le type de champs que l’on veut afficher (texte, date, nombre, adresse email etc.) parmi les boutons de champs possibles et il va automatiquement s’ajouter ici.

On verra ça juste après.

Le Placeholder ou texte d'aide :

placeholder formulaire de contact

[champ du formulaire placeholder “texte d’aide” ]

Il est possible d’ajouter un texte d’aide à l’intérieur d’un champ.

C’est souvent beaucoup plus beau de retirer le titre et de ne garder que le texte d’aide.

Pour ça on écrit simplement placeholder “texte d’aide” juste avant le crochet de fermeture.

Obtenir son identifiant ID de suivi du site

Ce qui nous donne pour résumer :

Champs formulaires de contact wordpress contact form 7 code

Créer les champs de son formulaire Contact Form 7

Donc pour créer notre formulaire de contact, il suffit juste d’ajouter des champs ou de les supprimer.

Prenons pour exemple un formulaire de contact très complet.

Par exemple vous avez un gîte et vous souhaitez mettre en place un formulaire de réservation.

Lorsque quelqu’un remplis le formulaire, vous voulez recevoir :

  • Prénom et nom
  • Adresse email
  • Téléphone
  • Nombre d’adultes et nombre d’enfants
  • Date d’arrivée et de départ
  • Un menu déroulant avec la langue de communication préférée (Parce que vous pouvez les accueillie en Français, Anglais et Espagnol par exemple).
  • Enfin une zone de texte ou ils pourront préciser s’ils ont des exigences particulières, s’ils viennent avec des animaux ou s’ils ont des allergies.

L’avantage de faire un formulaire c’est que vous éviterez les multiples échanges d’email et aurez toutes les informations d’un seul coup.

On va donc commencer à créer notre formulaire. 

Ajouter un champ Texte à son formulaire Contact Form 7

Le premier champ, nom et prénom sont des champs de texte.

Donc on clique sur le bouton Text

champ texte formulaire wordpress

Ensuite : 

  1. On indique si le champ est obligatoire
  2. On ne touche pas au Nom
  3. Valeur par défaut : il s’agit de texte d’aide qui va se trouver dans le champ. Si vous ne voulez pas de texte d’aide, laisser vide.
  4. Utiliser ce texte comme texte indicatif de champs, cocher pour rendre visible le texte d’aide.
  5. Et Insérer la balise
insérer un champs texte dans le formulaire de contact

 On se retrouve avec le champ qui est créé :

champs prénom formulaire

Si c’est bon pour vous, on passe à la suite.

Si vous voulez ajouter un titre, comme on l’a vu, il suffit d’écrire notre titre entre des balises <label> et </label>

Ce qui donne :

champs prénom formulaire

Donc on refait la même chose pour le champ Nom :

champ non formulaire de contact wordpress

Voilà dont pour les champs de type Texte de notre formulaire. 

Ensuite, dans notre formulaire de contact WordPress, on voulait avoir l’adresse email de la personne.

Ajouter un champ Adresse email à son formulaire Contact Form 7

Exactement pareil, on clique sur le bouton e-mail :

champ adresse email formulaire de contact form 7

Et exactement comme précédemment, on la rend obligatoire, et on indique l’aide de champ si nécessaire :

champ adresse email formulaire de contact form 7

Puis on clique sur Insérer la balise.

On rajoute ensuite les balises <label> si on souhaite ajouter un titre.

Sinon on laisse comme ça :

champ adresse email formulaire de contact form 7

Pour notre formulaire de réservation, on voulait ensuite ajouter un numéro de téléphone.

Ajouter un champ Numéro de téléphone à son formulaire Contact Form 7

Maintenant vous avez saisit la logique :

On clique sur le bouton du type de balise à insérer, ici Tél.

champ téléphone formulaire contact 7 wordpress

On le rend obligatoire ou non et on ajoute un texte d’aide si on le souhaite 

champ téléphone formulaire contact 7 wordpress

Après avoir inséré la balise, il ne reste plus qu’à écrire un titre entre deux balises <label>

champ téléphone formulaire contact 7 wordpress

Dans notre formulaire de réservation on voulait également ajouter le nombre d’adultes et le nombre d’enfants.

Ajouter un champ nombres dans ses formulaires de contact avec Contact Form 7

ajouter un champ nombre formulaire de contact wordpress

Ensuite on définit si on souhaite un compteur ou un curseur

Et un minimum et un maximum

ajouter un champ nombre formulaire de contact wordpress

On ajoute un titre entre deux balises label ce qui nous donne :

ajouter un champ nombre formulaire de contact wordpress

Ajouter un champ Date dans ses formulaires de contact avec Contact form 7

Pour notre formulaire de réservation on veut maintenant savoir la date d’arrivée

Donc on sélectionne un champs Date :

ajouter un champ date contact form 7 wordpress

On peut définir si on le souhaite une date minimum et une date maximum.

C’est utile si vous faites un formulaire pour un événement qui a lieu sur plusieurs jours.

Il y a donc des dates à respecter.

Si c’est juste un formulaire de réservation dans ce cas vous pouvez laisser vide :

ajouter un champ date contact form 7 wordpress

Et on insère la balise, on ajoute un titre entre deux balises label et on obtient un calendrier pour venir entrer sa date d’arrivée.

ajouter un champ date contact form 7 wordpress

Pour la date de départ on peut remettre un autre champ date.

 

Maintenant si on veut demander la langue de communication préférée entre les langues que vous parlez, on va pour ça insérer un menu déroulant :

Ajouter un champ menu déroulant dans ses formulaires de contact avec Contact form 7

ajouter champ menu deroulant contact form 7 wordpress

On va simplement lister dans options toutes les lignes de votre menu déroulant.

Pas de virgules ou de séparation, il suffit de revenir à la ligne pour en créer une nouvelle.

Par défaut le formulaire affichera le premier choix sur la liste.

Mais vous pouvez laisser vide en cochant la case « insérer un choix vide comme première option »

ajouter champ menu deroulant contact form 7 wordpress

Puis on insère la balise ce qui nous donne un menu déroulant :

ajouter champ menu deroulant contact form 7 wordpress

On va terminer ensuite avec la zone de texte, le corps de leur message :

Insérer une zone de texte dans ses formulaires de contact avec Contact form 7

ajouter champ zone de texte contact form 7 wordpress

Comme toutes les autres balises, il suffit de cocher obligatoire ou non et de mettre le texte d’aide :

ajouter champ zone de texte contact form 7 wordpress

Une fois la balise insérée et le titre ajouté entre deux balises label on obtient bien une zone de texte pour laisser son message :

ajouter champ zone de texte contact form 7 wordpress

Une dernière chose un tout petit peu plus complexe, c’est de mettre en place une case à cocher obligatoire pour accepter les conditions générales par exemple.

Insérer un lien dans une case à cocher de confirmation dans ses formulaires de contact avec Contact form 7

ajouter case cocher confirmation contact formulaire wordpress

On va maintenant paramétrer notre bouton pour les conditions générales. 

ajouter case cocher confirmation contact formulaire wordpress

On va se retrouver avec notre texte entre deux balises Acceptance.

Pour l’instant cela nous donne ça :

ajouter case cocher confirmation contact formulaire wordpress conditions générales

Ce qu’on veut c’est avoir un lien cliquable, sur « Conditions générales », qui renvoie vers notre page des conditions générales.

 

Pour ça on va utiliser le code HTML pour les liens <a href=>

C’est très simple, voyons ça tout de suite :

Lorsque vous ajoutez une balise acceptance, vous obtenez ceci :

Dans notre formulaire Contact Form 7, on a pour l’instant notre texte entouré de deux balises acceptance

ajouter case cocher confirmation contact formulaire wordpress conditions générales

Si par exemple je souhaite rendre la zone « conditions générales » cliquable.

 

Je place mon curseur juste avant le mot condition.

J’ajoute simplement le code suivant :

<a href=” //www.liendelapage.com/ “>

Et je me place juste après le mot générales et j’ajoute le code suivant :

</a>

 

Ce qui nous donne :

ajouter case cocher confirmation contact formulaire wordpress conditions générales

Et si on fait une simulation sur notre formulaire, on obtient bien ce qu’on veut :

ajouter case cocher confirmation contact formulaire wordpress conditions générales

C’était donc le dernier champ.

 

On ajoute le bouton Envoyer :

Insérer un bouton Envoyer dans ses formulaires de contact avec Contact form 7

bouton envoyer formulaire de contact wordpress

On ajoute le texte du bouton :

bouton envoyer formulaire de contact wordpress

Et on insère.

On a maintenant tous nos champs qui sont prêts :

bouton envoyer formulaire de contact wordpress

Lorsqu’un visiteur rempli les champs du formulaire et qu’il clique sur Envoyer, ce qu’on veut c’est qu’un email nous soit automatiquement envoyé.

Dans cet email on doit retrouver l’ensemble des réponses de la personne.

 

On va donc maintenant paramétrer l’email pour faire remonter tous les champs de notre formulaire.

ETAPE 02 :

Recevoir des emails automatiques avec les champs du formulaire Contact Form 7

Créer son formulaire de contact est la première étape. 

Maintenant qu’on a créé l’ensemble de nos champs, on va les faire remonter dans un email qui nous sera envoyé chaque fois que quelqu’un rempli un formulaire. 

De plus on va peut être vouloir envoyer un email automatique à la personne pour lui confirmer que sa demande a été prise en compte avec les informations qu’elle nous a envoyé. 

On va donc mettre en places ces emails automatiques de contact. 

Cette partie va être très rapide.

Il faut juste bien la faire pour éviter qu’un des champs ne remontent pas dans l’email.

Donc on vient de terminer notre formulaire dans l’étape précédente.

Pour l’instant nous en sommes là :

formulaire de contact form 7 wordpress

On va maintenant paramétrer l’email.

Donc on enregistre et on clique sur le second onglet : email

onglet email contact form 7

On va prendre les champs email un par un :

Champ adresse de reception dans E-mail avec Contact form 7

Dans ce champ, on va simplement renseigner l’adresse email à laquelle vous souhaitez recevoir le formulaire.

Donc votre email à vous :

email de reception contact form 7

Champ adresse d’expédition dans E-Mail avec Contact form 7

Par défaut Contact Form 7 a indiqué une adresse email automatiquement générée.

Il ne faut pas y toucher, cette adresse est en quelque sorte l’adresse email de Contact Form 7 sur notre domaine qui va permettre d’envoyer de nous envoyer l’email :

email destination contact form 7

Dans le champ De : on va vouloir avoir l’adresse de la personne qui a rempli le formulaire.

Et dans notre formulaire on a demandé l’adresse email de notre visiteur.

On va donc aller la récupérer et l’ajouter ici.

 

On retourne dans notre formulaire et on voit que Contact Form 7 a automatiquement généré un code pour ce champ email.

Dans mon cas c’est email-962 :

email de destination contact form 7 wordpress

Donc on récupère ce code et on le colle dans le champ De : en le mettant entre crochets :

email de destination contact form 7 wordpress

A noter que maintenant qu’on a compris la logique, il n’est pas nécessaire de retourner dans l’onglet Formulaire.

Dans l’onglet E-mail, Contact Form 7 nous a listé toutes les balises qui apparaissent dans notre formulaire :

liste des balises email contact form 7

On va également ajouter avant l’adresse d’expédition le prénom et nom de la personne pour que cela s’affiche bien dans notre boite mail.

On copie le code du champ Prénom et nom et on les place avant le code de l’email.

Ce qui nous donne :

email de destination contact form 7 wordpress
On va avoir ainsi le Prénom, nom et adresse email qui vont apparaitre.

Et on peut enlever la mention « WordPress » pour alléger dans notre boite de réception :

email de destination contact form 7 wordpress

On va ainsi avoir le prénom, le nom et l’adresse email de la personne.

Ce qui nous permettra de rapidement l’identifier pour nos futures communications.

 

Passons maintenant à l’objet :

Champ objet dans E-Mail avec Contact form 7

Si on a demandé un objet alors ici on insère le code de l’objet.

Sinon (comme pour notre cas ici), on peut écrire l’objet nous-même et coller les codes qui nous intéresse.

Par exemple en objet je veux « Nouvelle demande de réservation X personnes »

Avec le nombre de personnes qui vient de ce qui a été rempli dans le formulaire par le visiteur.

Ce qui nous donne :

champ objet email contact form 7 formulaire WordPress

Quel que soit votre objet, gardez bien l’ensemble des termes entre guillemets.

En-tête additionnelles pour ajouter des personnes en copie et copie cachée de nos formulaires contact form 7 :

Les en-têtes additionnelles servent à ajouter des adresses email en copie ou en copie caché de cet email reprenant les informations du formulaire.

Ajouter une adresse email en copie avec Contact Form 7

Si vous souhaitez que le formulaire arrive sur votre boîte email pro et personnelle également ainsi que chez d’autres personnes de votre équipe par exemple, vous pouvez les mettre en copie.

Il suffit d’écrire Cc: suivi de l’adresse email que vous souhaitez mettre en copie.

Attention pas d’espace entre CC et les deux points.

copie email contact form 7 wordpress

Ajouter l’adresse email de la personne qui remplit le formulaire Contact Form 7

Tout d’abord, on pourrait être tenté de faire ça pour lui envoyer une copie de sa demande mais ce n’est pas recommandé.

En effet on va pouvoir paramétrer cela juste en dessous dans email2 qui va être notre réponse automatique à cette personne.

On pourra ainsi démarrer par une phrase personnalisée plutôt que de simplement lui renvoyer ses informations sans autre indication.

Si vous voulez vraiment le faire, il suffit de mettre Cc: suivi de la balise email de la personne tel qu’elle apparaît dans votre formulaire

copie email contact form 7 wordpress

Ajouter une adresse email en copie cachée avec Contact Form 7

Enfin pour mettre une adresse email en copie cachée

Il suffit d’écrire Bcc:

Et d’ajouter ensuite l’adresse email à mettre en copie caché :

adresse email copie cachée contact form 7 bcc

Le corps du message dans l’email Contact Form 7

Il ne nous reste plus qu’à indiquer quelles informations est ce qu’on souhaite faire remonter dans le corps du message.

Rappelez-vous que ce message vous sera destiné, il faut donc simplement faire remonter les informations du formulaire.

Pour faire plus simple, on va supprimer tout ce qui se trouve par défaut dans le corps du message.

Ensuite on va copier toutes les balises qui composent le formulaire, telles qu’on les retrouve en haut indiquées par Contact Form 7.

Et les coller dans le corps du message :

balises du formulaires de contact form 7 dans le corps de l'email

Il ne reste plus qu’à écrire autour pour construire notre message à nous même ou à nos équipes.

Par exemple :

email de contact formulaire contact form 7

L’important est que ce soit bien compréhensible parce que Contact Form 7 va faire remonter uniquement les réponses.

Donc bien remettre d’une manière ou d’une autre les titres de chacune des questions.

C’est un email à vous même mais restez le plus clair possible. 

Exclure les champs vides du corps de l’email dans Contact Form 7

En dessous on a la possibilité d’exclure les lignes dont la balise d’email est vide.

Il s’agit d’une erreur de traduction.

Si on coche cette case, on indique à Contact Form 7 de ne pas afficher dans l’email qui nous est destiné les réponses que le visiteur n’a pas remplie.

Ajouter les pièces jointes à l’email avec Contact Form 7

Si on ajoute un champs pièce jointe à notre formulaire, laissant la possibilité aux visiteurs de mettre des pièces jointe (généralement déconseillé pour des risques de taille, de spam et de sécurité, mieux vaut leur demander plus tard).

Pour ajouter les pièces jointes à votre email, vous ajouter ici les balises pièce jointe.

Pour les faire apparaître.

On est tout bon pour le message, on peut enregistrer.

On passe ensuite au message automatique qui va être envoyé par Contact Form 7 à la personne qui a rempli le formulaire.

E-mail (2) : envoyer un email de confirmation automatique avec Contact Form 7

En générale on va envoyer un email à la personne ayant complétée le formulaire, pour lui confirmer la bonne réception de sa demande.

Et qui reprend en dessous une copie des informations transmises.

Adresses et Objet de l’email de confirmation

Pour : il s’agit de la personne ayant rempli le formulaire. Donc on va simplement reprendre la baliser email et la coller ici.

De : il s’agit de l’adresse email avec laquelle vous souhaitez échanger.

Objet : Il s’agit d’un objet à destination de votre contact.

En-têtes additionnelles : comme précédemment si vous souhaitez également recevoir une copie de cet email (pas réellement nécessaire si vous recevez déjà l’email précédent), vous pouvez ajouter des adresse en Cc: et Bcc:

contact form 7 email 2 formulaires wordpress

Ensuite vient le corps du message :

Pour cela on va simplement copier ce qui a été fait pour le premier email et simplement adapter le texte et ajouter une en-tête de confirmation :

email client formulaire de contact form 7

Une fois finalisé on enregistre et on passe à l’onglet Message.

Paramétrer les messages de confirmation et d’erreur de nos formulaires WordPress

Cet onglet Message va nous permettre de paramétrer tous les messages générés automatiquement par Contact Form 7.

onglet message contact form 7 wordpress formulaires

Contact Form 7 propose des messages par défaut lorsqu’il y a une erreur, un champ mal rempli ou un problème avec le formulaire.

On peut changer librement les textes de ces différents messages d’erreur ou garder les propositions par défaut.

Un fois finalisé il ne reste plus qu’à cliquer sur Enregistrer et on va pouvoir publier et tester notre formulaire de contact !

ETAPE 03 :

Publier des formulaires Contact Form 7 sur son site WordPress

Maintenant qu’on a notre formulaire de réservation, on va pouvoir le publier de 3 manières :

  1. Premièrement dans le corps d’une page ou d’un article
  2. Deuxièmement dans la barre latérale (généralement d’un article)
  3. Ou encore sur nos pages construites avec Elementor

Voyons tout de suite ces 3 options.

Publier un formulaire Contact Form 7 sur une page ou un article WordPress :

La première chose à faire pour publier un contact form 7 sur son site c’est de récupérer le code court (shortcode) du formulaire.

Si on va dans Tableau de bord > Contact > Formulaires de contact, on se retrouve avec la liste de tous les formulaires qu’on a créé avec Contact Form 7.

Et en face de chaque formulaire il y a le code court entre crochet :

code court formulaires de contact form 7

On va copier ce code.

Ensuite on ouvre une page ou un article.

On ajoute un widget Code court dans nos pages ou article WordPress à l’endroit où on souhaite insérer le formulaire > Coller notre code court :

insérer formulaires contact form 7 article WordPress

Et si on va sur la version en ligne de la page ou de l’article, on a bien le formulaire de contact :

insérer formulaires contact form 7 article WordPress

Voyons pour l’ajouter à la barre latérale :

Ajouter le formulaire Contact Form 7 à la barre latérale (sidebar) sur WordPress

Tout ce qui se trouve dans la barre latérale se trouve dans Apparence > Widgets :

Ensuite on ajoute un Widget de texte à la barre latérale

Et dedans on colle le Short Code du formulaire 

formulaire contact wordpress sidebar

Lorsqu’on retourne dans une page avec une barre latérale, on se retrouve bien avec le formulaire qui apparaît :

formulaires sidebar wordpress

Voyons maintenant le plus intéressant, comment intégrer nos formulaires Contact Form 7 avec nos pages Elementor.

On va voir qu’Elementor offre énormément de possibilité de paramétrer le formulaire via son Essential Addons for Elementor

Ajouter un formulaire Contact Form 7 sur une page Elementor

On peut soit ajouter notre formulaire sur une page Elementor en utilisant tout simplement le widget Code Court.

Soit en utilisant Contact form 7, le widget d’Essential Addons for Elementor, qui permettra de faire de la mise en forme. 

Ajouter les formulaires à ses pages Elementor avec le Code Court

On cherche donc le Widget Code court dans Elementor 

code court elementor wordpress

Et on colle dedans le code de notre formulaire. 

Ainsi notre formulaire s’affiche sur la page à l’endroit où se trouve le Widget. 

formulaire de contact WordPress

Ajouter les formulaires à ses pages Elementor avec Essential Addons

La première chose à faire est d’ajouter Essential Addons for Elementor à Elementor.

Si vous ne l’avez pas déjà, il s’agit d’une extension WordPress qui va venir ajouter de nombreux widgets à Elementor.

Et entre-autre, un widget Contact Form 7.

Donc si vous ne l’avez pas, allez jeter un œil rapidement ici pour l’installer puis revenez lire la suite.

Donc une fois installé on va utiliser le Widget Contact form 7 :

widget contact form 7

Ensuite on sélectionne dans la liste des formulaires créé avec Contact Form 7 celui que l’on veut afficher :

selectionner un formulaire de contact form 7 elementor wordpress

Et il n’y a plus qu’à faire les réglages comme un élément classique d’une colonne :

  • Avec Style pour les typographies et les couleurs
  • Avec Avancé pour les marges
Elementor contact form 7 formulaires wordpress

On va pouvoir ainsi aller très loin dans le niveau de design avec Elementor et Essential Addons pour faire de magnifique formulaires de contact.

formulaires de contact wordpress

ETAPE 04 :

Relier Contact Form 7 avec une liste de diffusion d’emailing MailChimp

MailChimp est un des service d’email Marketing gratuit les plus célèbre.

Il permet de créer des pop ups, des champs de souscription pour récupérer des adresses emails depuis son site internet.

Ensuite de construire des listes de diffusion d’emailing pour pouvoir gérer tous ses contacts à un seul endroit.

Et enfin de pouvoir envoyer des emails automatiques de bienvenue, planifier l’envoi de newsletter, bref gérer toute la relation email entre vous et vos visiteurs.

Si vous n’avez pas encore MailChimp mais que l’emailing marketing vous intéresse, je vous ai préparé un guide pour débutant ici pour que vous puissiez commencer immédiatement.

Pour ceux qui ont déjà Mailchimp :

On vient de le voir, Contact Form 7 permet de créer des formulaires très poussés.

On va donc :

  1. Créer un bouton de souscription à la Newsletter avec Contact Form 7
  2. Le publier sur le site
  3. Le lier à notre compte MailChimp

Créer un formulaire de souscription à la Newsletter avec Contact Form 7

On va dans Tableau de bord > Contact > Créer un formulaire.

Il va nous falloir :

  • Un seul champ et un bouton
  • Et champ adresse email


Si vous voulez vous pouvez ajouter également un champ prénom si vous l’utilisez ensuite dans vos communications.

Créer le formulaire de souscription à la Newsletter avec CF7

On fait la même chose que précédemment mais on ne garde que les champs que l’on veut faire apparaître :

Ici seulement l’adresse email et le bouton Envoyer :

formulaire souscription newsletter wordpress contact

Créer le formulaire de souscription à la Newsletter avec CF7

Concernant les emails, c’est différent d’un formulaire classique.

En effet lors de la souscription à la Newsletter il y a généralement un processus :

  1. Le visiteur donne son adresse email via le formulaire
  2. Il est redirigé vers une page lui demandant d’aller confirmer son adresse email
  3. Dans sa boîte email il a un email automatique lui demandant de confirmer son adresse email
  4. Une fois confirmé il est redirigé vers une page de confirmation du site.

Donc on ne va pas avoir besoin de lui envoyer un email de confirmation avec Contact Form 7 car tout est déjà paramétré dans MailChimp.

On va simplement rédiger un email pour nous prévenir d’un nouvel abonné à notre liste si on le souhaite :

email mailchimp formulaires wordpress

Et on décoche e-mail (2) car on ne va pas l’utiliser cette fois-ci.

Par contre dans Message, on va modifier le message de confirmation, car il s’agit ici d’une inscription à la newsletter.

Donc lui confirmer sa demande et le remercier :

message inscription newsletter

Ensuite on enregistre

Publier notre formulaire sur notre site WordPress :

Comme précédemment, on ajoute des Widget Code Courts sur nos pages et Articles pour publier le formulaire de souscription.

publier souscription mpages articles wordpress Contact form 7

Un Widget Texte pour publier dans la Barre latérale

formulaire contact form 7 souscription barre latérale wordpress

Et enfin le Widget Contact Form 7 d’Essential Addons pour publier sur une page Elementor :

formulaire Page elementor contact form 7

Maintenant que nos formulaires sont publiés, on va les lier à notre liste emailing :

Lier les formulaires Contact Form 7 à une liste d’emailing Mailchimp

Pour faire ça on va utiliser l’extension Chimpmatic Lite, Contact Form 7 Extension For Mailchimp :

chimpmatic contact form 7 mailchimp formulaires WordPress

Une fois installée on retourne dans Contact, on ouvre le formulaire de la Newsletter et on voit qu’un nouvel onglet s’est ajouté :

Chimpmatic Lite

onglet chimpmatic contact form 7 wordpress

Il suffit de rentrer une clé API de son compte MailChimp.

Pour cela allons sur notre compte MailChimp > Sur notre nom on va dans Account > Extras > API Keys

clé API compte mailchimp formulaires wordpress

On peut générer une nouvelle clé via le bouton Create A Key

On la copie et on la colle dans Chimpatic Lite pour activer le compte :

clé API compte mailchimp formulaires wordpress

Et on est connecté.

Donc dès qu’un visiteur va s’inscrire à notre newsletter via le formulaire de Contact Form 7, il va recevoir l’ensemble des emails automatiques de confirmation de de redirection tels qu’on les a paramétrés dans MailChimp 

Il ne reste plus qu’une seule chose :

Lors de la complétion du formulaire, le visiteur simplement un message de confirmation de Contact Form 7.

Comme vu plus haut on veut pouvoir le rediriger vers la page de notre choix.

ETAPE 05 :

Rediriger automatiquement le visiteur vers une page à la complétion des formulaires Contact form 7

A la souscription, idéalement on va rediriger le visiteur vers une page spéciale pour lui indiquer qu’un email se trouve dans sa boîte de réception et les prochaines étapes.

C’est ce qu’on va donc faire grace à l’extension Redirection pour Contact Form 7. 

Lorsque quelqu’un s’abonne à notre newsletter, on va vouloir le rediriger vers une page de confirmation.

Voici un exemple d’une page de confirmation :

page confirmation abonnement newsletter wordpress

Pour faire une redirection automatique vers cette page après que notre visiteur se soit inscrit, on va utiliser l’extension Redirection for Contact Form 7 :

Extension redirection contact form 7 formulaires wordpress

Une fois installée et activée, on retourne sur notre formulaire de souscription Contact Form 7.

Un nouvel onglet s’est alors ajouté : Redirect Settings :

Il ne reste plus qu’à choisir la page de redirection dans la liste.

Ou taper directement l’url en dessous et enregistrer :

onglet redirect settings contact form 7 formulaires wordpress

On termine ainsi avec nos formulaires de contact sur nos pages et articles WordPress et Elementor. 

ETAPE 06 :

Créer des formulaires de contact sur son site WordPress : Conclusion

Arrivé au bout de ce guide, on est maintenant capable de créer n’importe quel formulaire de contact. 

De personnaliser l’ensemble des champs. 

De les relier à des emails automatiques soit de confirmation, soit lié à notre liste d’email Marketing. 

On sait les faire apparaitre n’importe ou sur notre site WordPress : Pages et Articles et également sur Elementor. 

Donc maintenant on peut créer et diffuser rapidement n’importe quel formulaire de contact sur son site WordPress.

Félicitation !

Contact Form 7 est un outil qui au premier abord paraît complexe, mais il compense son expérience utilisateur minimale par une grande richesse sur le paramétrage.

Contrairement à des plugins ou solutions toutes faites, il va réellement nous permettre de créer des formulaires très aboutis.

En le couplant avec Essential Addons for Elementor on va également rajouter cette couche très avancée de design.

Ce guide est dense mais nécessaire. 

J’espère qu’il vous a été utile. Si c’est le cas, partagez-le et si vous avez des questions ou des remarques, laissez un commentaire. 

En tout cas merci de suivre Avalanche Mate, des guides sont publiés régulièrement. 

Donc ajoutez votre adresse mail et je vous les enverrai dès leur publication sur le site :

A bientôt !

Thomas

Partager l'article :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *