Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur reddit

Créer des formulaires avec Contact Form 7 et Elementor, le guide complet

Newsletter ou formulaire de réservation. Créez et partagez de magnifique formulaires avec Contact Form 7 et Elementor sur votre site WordPress.

Créer un formulaire avec Contact Form 7
et designez-le avec Elementor
Diffusez-le sur votre site
pages, articles et sidebar
Reliez-le à Mailchimp
Et construisez votre liste

Auteur : 

Thomas

 | 

2021

Depuis un formulaire de souscription à votre newsletter jusqu’à un formulaire de réservation complexe, apprenez à créer et designer des formulaires fonctionnels et magnifiques, en utilisant Contact Form 7 et Elementor pour WordPress. 

 

Contact Form 7 vous permet de créer n’importe quel formulaire sur votre site WordPress.

Il permet également de créer gratuitement des formulaires avec Elementor.

 

Dans ce tuto nous allons donc apprendre à créer et publier des formulaires de contact WordPress et à les relier à notre solution d’emailing marketing (comme Mailchimp par exemple).

Nous allons créer des formulaires de contact et de souscription à la newsletter sur votre site internet en utilisant l’extension WordPress Contact Form 7.

Et on va pouvoir complètement gérer le design de nos formulaires Contact Form 7, avec Elementor Page Builder.

 

Dans ce tutoriel Contact Form 7 et Elementor on va créer un formulaire complexe de réservation.

Et également un formulaire de souscription à la newsletter relié à Mailchimp pour ajouter automatiquement les personnes inscrite à votre liste d’emailing.

 

Voici le formulaire que nous allons créer :

 

formulaires de contact wordpress

 

 

Comment créer des formulaires de contact WordPress avec Contact Form 7 et Elementor ?

 

En quelques étapes, nous allons créer de A à Z nos formulaires avec Contact Form 7, les publier sur notre site WordPress, les designer avec Elementor et les relier à Mailchimp.

 

 

 

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

 

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.

 

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

 

Contact Form 7 est une extension WordPress.

Pour l’installer on se rend donc 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

 

Rendons-nous 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

 

Avant tout, donnez un titre à votre formulaire Contact Form 7.

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 Formulaire Page de Contact ou Formulaire 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 avec Contact Form 7.

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

Voilà à quoi va ressembler notre formulaire de contact actuel une fois publié.

À 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 un bout de code.

  • On va retrouver le label qui encadre le titre ou tout le champ et indiqué par <label>
  • Puis le titre du champ, qui n’est pas obligatoire.
  • Le champ en question, entre crochet.
  • Et le texte d’aide, que l’on appelle placeholder en anglais et qui se trouve à l’intérieur du champ pour aider l’utilisateur à le remplir.

Donc c’est extrêmement simple de construire son formulaire avec Contact Form 7.

On va utiliser ces éléments pour créer les différents champs de 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> :

  1. Les balises labels peuvent être soit directement de chaque côté du titre.
  2. 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.

 

Indiquez le titre du champ :

Après la balise <label>, on indiquez (si vous souhaitez en mettre un), le titre de votre champ.

 

titre champ formulaires de contact

 

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 votre formulaire de contact

Entre crochets, on retrouve le type de champ du formulaire : [champ du formulaire].

 

type de champs formulaires de contact

 

On indique à Contact Form 7 s’il s’agit d’un texte, d’une date, nombre, adresse email etc.

Nous allons voir juste après cette présentation, comment indiquer le type de champ.

 

Le Placeholder ou texte d’aide :

Il est possible d’ajouter un texte d’aide à l’intérieur d’un champ : [champ du formulaire placeholder « texte d’aide » ]

 

placeholder formulaire de contact

 

C’est souvent beaucoup plus beau de ne pas mettre de titre à un champ et de ne garder que le texte d’aide.

Ce qui nous donne pour résumer :

  1. Le <label> indiquant un nouveau champ
  2. Le titre du champ
  3. Le type de champ
  4. Le texte d’aide ou placeholder

 

Champs formulaires de contact wordpress contact form 7 code

 

Passons maintenant aux choses sérieuses et créons notre premier formulaire avec Contact Form 7.

 

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 :

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 :

  1. Prénom et nom
  2. Adresse email
  3. Téléphone
  4. Nombre d’adultes et nombre d’enfants
  5. Date d’arrivée et de départ
  6. Un menu déroulant avec la langue de communication préférée (Parce que vous pouvez les accueillir en Français, Anglais et Espagnol par exemple).
  7. 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 de réservation dans Contact Form 7.

 

Ajouter un champ Texte à son formulaire Contact Form 7

Les premiers champ, nom et prénom sont des champs de texte.

En haut du formulaire, on dispose de bouton à utiliser en fonction du type de champ que l’on souhaite ajouter à notre formulaire.

Donc pour nos deux champs nom et prénom, on clique sur le bouton Texte, pour insérer un nouveau champ.

 

champ texte formulaire wordpress

 

Ensuite un fenêtre s’ouvre dans laquelle on va pouvoir paramétrer notre champ :

  1. On indique si le champ est obligatoire
  2. On ne touche pas au Nom (on verra juste après à quoi il sert)
  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 (on parle aussi de Placeholder)
  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éé (à droite le rendu une fois publié).

 

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 :

Cliquer sur le bouton Texte > Paramétrer dans la fenêtre > Insérer la balise > Ajouter un titre.

 

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> et </label> entre le titre si on souhaite en ajouter un (sinon on ne change rien).

 

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> et </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 donc un champ Nombre.

 

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

On clique donc sur le bouton nombre.

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 en cliquant sur le bouton correspondant.

 

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

On clique sur le bouton menu déroulant.

 

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

On utilise ici le bouton Zone de texte.

 

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

 

Enfin, on va mettre en place une case à cocher obligatoire pour accepter les conditions générales par exemple ou l’acceptation du traitement des données personnelles pour répondre à la demande.

 

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

Pour cela on utilise le bouton Confirmation proposé par Contact Form 7.

 

ajouter case cocher confirmation contact formulaire wordpress

 

On va maintenant paramétrer notre bouton pour nos conditions générales, par exemple.

Dans Condition on renseigne simplement le texte et on laisse vide la case Rendre cette case à cocher facultative.

 

ajouter case cocher confirmation contact formulaire wordpress

 

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

 

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

 

Ce qui une fois en ligne, nous donnerai ceci :

 

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 :

 

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

  1. Je place mon curseur juste avant le mot condition.
  2. J’ajoute simplement le code suivant : <a href= » //www.liendelapage.com/ « >
  3. 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 sur la version en ligne de notre formulaire, on obtiendra bien notre lien sur les conditions générales. 

 

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

 

C’était donc le dernier champ, il ne reste qu’à ajouter le bouton Envoyer.

 

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

Exactement comme avec les autres champs, on va chercher dans la liste le bouton envoyer.

 

bouton envoyer formulaire de contact wordpress

 

On ajoute le libellé du bouton :

 

bouton envoyer formulaire de contact wordpress

 

Et on clique sur Insérer la balise.

On a maintenant tous nos champs qui sont paramétrés, notre formulaire Contact Form 7 est prêt à être publié.

 

bouton envoyer formulaire de contact wordpress

 

Donc création du formulaire : OK.

Maintenant, 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 veut également peut être qu’il reçoive un message de confirmation.

On va donc maintenant paramétrer les emails automatiques pour recevoir tous les champs de notre formulaire.

 

 

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

 

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

Maintenant, on va donc mettre en places ces emails automatiques de contact.

Cette partie va être très rapide.

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

 

On vient donc 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 email de réception du formulaire 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

 

On veut savoir de qui provient l’email, donc qu’elle est l’adresse de la personne ayant remplie le formulaire et l’ajouter à notre champ De, pour pouvoir lui répondre.

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

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

 

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

 

Contact Form 7 va aller chercher l’adresse renseignée et la coller ici.

Il n’est pas nécessaire de retourner dans l’onglet Formulaire pour trouver les codes d’identification de chaque champs.

Dans l’onglet E-mail, Contact Form 7 nous a listé les codes de tous les champs que l’on retrouve 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.

Donc 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 puis l’adresse email qui vont apparaitre.

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

Et on peut enlever la mention WordPress pour alléger le rendu dans notre boîte de réception :

 

email de destination contact form 7 wordpress

 

Passons maintenant à l’objet de notre mail.

 

Définir l’objet dans E-Mail avec Contact form 7

 

Si on a demandé au visiteur de remplir un objet à sa demande, alors 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 X, le nombre de personnes tel que renseigné dans le formulaire.

On prend le code objet correspondant au champ nombre de personnes et on le colle dans l’objet.

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.

 

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 du code du champ email de la personne.

 

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: (sans espace entre le bcc et les deux points).

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

 

adresse email copie cachée contact form 7 bcc

 

Définir le corps du message dans l’email de 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 tous les codes des champs qui composent le formulaire, tels 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 par vous ou votre destinataire.

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

 

On peut également ajouter un champs pièce jointe à notre formulaire, laissant la possibilité aux visiteurs de mettre des pièces jointes, (généralement très 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.

On renseigne sur la même mécanique que pour le premier email :

  • 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 Contact Form 7

 

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 !

 

 

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 l’addon 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 ultra personnalisée avec Elementor.

 

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 l’installer et revenez lire la suite.

 

Donc une fois installé on va utiliser le Widget Contact form 7 que l’on ajoute sur notre page ou un modèle Elementor.

 

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

 

A partir de là, votre formulaire est entièrement fonctionnel.

Vous pouvez donc faire un test pour vérifier que vous recevez bien l’email avec l’ensemble des informations renseignées dans le formulaire.

 

Maintenant on va aller plus loin.

Pour les formulaires de souscription à la newsletter par exemple, on va les relier à notre liste Mailchimp, pour qu’ils soient ajoutés automatiquement.

 

 

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 adresse email
  • Un bouton S’inscrire

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. (Le guide se trouve ici)

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 :

Actuellement, lors de la complétion du formulaire, le visiteur va simplement recevoir un message de confirmation de Contact Form 7.

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

On va donc faire cette dernière étape tout de suite.

 

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

 

À 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 grâce à 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 :

 

Redirection Contact Form 7

 

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.

 

 

Créer des formulaires avec Contact Form 7 et Elementor : 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.

 

Thomas 

Laisser un commentaire

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