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

avatar de baptiste pagès
Par Baptiste Pagès le 7 septembre 2022

Publié dans Tutoriel

Mis à jour le 9 septembre 2022

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 !

Avant de commencer, si vous avez un site WordPress et que vous cherchez à améliorer sa visibilité on son design, n'hésitez pas à me contacter. Je suis un webdesigner / référenceur spécialisé dans WordPress et je travaille généralement avec des petites et moyennes entreprises.

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

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
0