Contact form 7 Multi Step - Créons un formulaire à plusieurs étapes dans WordPress !

Auteur : Baptiste Pagès

Mis à jour le :

Contact form 7 Multi Step est une extensions WordPress gratuite qui permet de créer des formulaires à plusieurs étapes dans Contact Form 7 (ce plugin WordPress qu'on a déjà abordé souvent sur ce blog).

Aujourd'hui, je vous montre comment installer ce plugin, comment l'utiliser et comment créer un formulaire à plusieurs étapes de A à Z, le tout en images. C'est parti !

  • Pour créer un formulaire à plusieurs étapes avec Contact Form 7, on utilise le plugin "Contact Form 7 Multi Step Forms".
  • On créer ensuite un formulaire par étape, en ajoutant une balise [multistep] dans sa configuration.
  • Enfin, on assigne chaque formulaire d'étape à une page WordPress distincte.

Installer Contact Form 7 Multi Step

Nous commencerons donc par installer le plugin "Contact Form 7 Multi Step Forms". Un plugin plus récent nommé "Multi Step for Contact Form 7" existe également, mais je ne l'ai pas encore testé.

installer le plugin "Contact Form 7 Multi Step Forms"
installer le plugin "Contact Form 7 Multi Step Forms"

Comme le montre l'image ci-dessus, vous devez pour ça aller dans "Extensions" puis "Ajouter" et enfin taper "multi step" dans la barre de recherche.

Ensuite, vous pourrez installer et activer l'extension. Voici le lien vers la page WordPress de l'extensions.

Comment fonctionne Contact Form 7 Multi Step ?

Le fonctionnement du plugin peut être assez déconcertant pour un débutant.

En effet, il va assigner chaque étape du formulaire à une page (ou un article) WordPress. Chaque étape aura donc sa propre URL (c'est crucial de comprendre ça).

Exemple concret : un formulaire de contact en deux étapes

Pour commencer, nous allons devoir créer deux pages WordPress. Une page pour l'étape 1 et une autre pour l'étape 2.

Comme vous pouvez le voir ci-dessus, vous devez donc aller dans "Pages" puis "Ajouter" et publier une nouvelle page vierge. Faites de même pour la seconde page.

Définissons ensuite nos formulaires.

Premier formulaire (première étape)

Nous devons ensuite aller dans l'onglet "Contact" de Contact Form 7 puis "Ajouter" un formulaire.

Pour cet exemple, on va dire que la première étape consistera à donner les informations de contact, tandis que la seconde étape demandera le message.

On commence par renommer le formulaire (1) puis on le simplifie pour n'y demander que le mail et le nom. Ensuite, on clique sur le bouton "multistep". Ceci va nous permettre de définir où se formulaire se situe dans notre suite de formulaires.

Ce formulaire est la première étape, donc on coche la case "First Step". Et comme il doit envoyer vers un autre formulaire (l'étape suivante) on n'oublie pas de remplir le champ "Next Page URL". Pour finir, on clique sur "Insert Tag"

Définir le premier formulaire dans Contact Form 7 Multi Step

Second formulaire (seconde étape)

On procède ici de la même façon que pour le premier formulaire, mais je garde d'autres champs que le nom et le téléphone.

Et cette fois, dans les options du bouton multistep, on le configure de cette façon :

Définir le dernier formulaire dans Contact Form 7 Multi Step

Configuration du mail

On configure le mail envoyé par le dernier formulaire comme on le ferait normalement. On peut y utiliser les balises des arguments des précédentes étapes (même si Contact Form 7 ne les liste pas).

Dans cet exemple, on laisse donc l'email par défaut contenant les balises [your-name] et [your-email] même si Contact Form 7 râle.

Configurer le mail dans Contact Form 7 Multi Step

Assigner les formulaires Contact Form 7 Multi Step Forms aux pages

On y est presque !

Maintenant, copions le shortcode du formulaire de la première étape.

  • Cliquez sur "Contact" pour voir la liste des formulaires
  • Copiez le shortcode du formulaire qui vous intéresse

Il ne reste plus qu'à le coller dans la page que nous avons créée au début.

Ajouter un formulaire Contact Form 7 à une page WordPress grâce à un bloc Gutenberg

Si vous utilisez Gutenberg, alors WordPress placera automatiquement un bloc CF7 avec une liste déroulante sur le bon formulaire. Vous pouvez aussi ajouter directement ce bloc via Gutenberg sans passer par un shortcode.

Faites de même pour la seconde page et bien sûr enregistrez tout ça.

Résultat

Et voici une petite capture du résultat !

Utilisation d'un formulaire à étapes réalisé avec Contact Form 7 Multi Step Forms.

Bien sûr il reste beaucoup de travail de design, mais le formulaire multi step est bien fonctionnel !

Le mot de la fin

J'espère que ce petit tutoriel d'utilisation du plugin Contact Form 7 Multi Step Forms vous a été utile.

Si c'est le cas, n'hésitez pas à rejoindre ma newsletter ou à me suivre sur Youtube.

Et enfin, contactez-moi si vous avez besoin de mon assistance avec votre site WordPress. Je suis un expert WordPress depuis maintenant plus de 7 ans et je peux vous aider avec la plupart des sujets WordPress.

Laissez un commentaire !

1 réflexion au sujet de « Contact form 7 Multi Step - Créons un formulaire à plusieurs étapes dans WordPress ! »

Laisser un commentaire

Mon Ebook Gratuit :
Mes 77 ressources WordPress Favorites

Rejoignez ma newsletter et obtenez en cadeau les 77 ressources WordPress que j'utilise au quotidien avec les projets de mes clients. Je partage avec vous de vraies pépites dans cet ebook 😉