Comment créer un formulaire en plusieurs étapes dans WordPress en 10 minutes 

Vous voulez créer un formulaire en plusieurs étapes dans WordPress qui soit facile à remplir et qui convertisse mieux ?

J'ai constaté que diviser les longs formulaires en étapes plus petites peut vraiment améliorer l'expérience utilisateur. Au lieu de tout montrer d'un coup, vous guidez les gens à travers des champs de petite taille qui semblent moins intimidants.

Dans ce guide, je vais vous montrer exactement comment créer un formulaire en plusieurs étapes en utilisant WPForms, l'un des meilleurs constructeurs de formulaires par glisser-déposer du marché.

Réponse rapide : Pour créer un formulaire en plusieurs étapes dans WordPress, installez WPForms Pro, créez un nouveau formulaire, faites glisser le champ "Page Break" entre les sections pour le diviser en étapes, activez la barre de progression dans les paramètres du formulaire et intégrez le formulaire sur n'importe quelle page. L'ensemble du processus prend environ 10 minutes et ne nécessite aucun codage.

Quand utiliser des formulaires en plusieurs étapes

Tous les formulaires n'ont pas besoin d'être divisés en plusieurs étapes, mais certains types de formulaires voient une nette augmentation des complétions lorsque vous ajoutez des sauts de page. Voici les scénarios où cela fait la plus grande différence :

• Formulaires d'inscription avec de nombreux champs – Les inscriptions à des événements ou les formulaires d'adhésion qui demandent le nom, l'adresse, les préférences et les détails de paiement en même temps bénéficient d'être divisés en groupes logiques.
• Formulaires de génération de prospects de type quiz – Les formulaires qui qualifient les prospects en fonction des réponses (budget, calendrier, type de projet) donnent l'impression d'une conversation lorsque vous affichez une question à la fois.
• Flux de paiement en plusieurs étapes – Les formulaires de commande qui collectent les informations de contact, les détails d'expédition et le paiement en étapes distinctes réduisent la charge cognitive à chaque étape.
• Formulaires de candidature – Les candidatures avec des informations personnelles, un historique professionnel et des questions sur la disponibilité s'adaptent naturellement à une structure en trois étapes.
• Sondages – Les sondages plus longs avec plusieurs domaines thématiques sont plus faciles à compléter lorsqu'ils sont regroupés en sections thématiques plutôt que présentés comme une seule longue page.

Conseils pour une meilleure conception de formulaires en plusieurs étapes

Avant de commencer la création, quelques décisions de conception rendront votre formulaire beaucoup plus facile à remplir. J'ai vu que cela faisait une réelle différence sur les formulaires que j'ai configurés avec WPForms.

• Limitez chaque étape à 3-5 champs maximum. Plus de cinq champs par page recommencent à ressembler à un long formulaire.
• Intitulez la barre de progression avec les noms des étapes, pas seulement des numéros. « Étape 2 : Vos coordonnées » est plus rassurant que « Étape 2 sur 4 ».
• Utilisez des libellés de bouton clairs. « Étape suivante » ou « Continuer vers l'expédition » indiquent aux utilisateurs exactement ce qui se passera lorsqu'ils cliqueront.
• Activez le bouton Précédent. Les utilisateurs ont besoin d'un moyen de revenir en arrière et de corriger les réponses précédentes sans perdre ce qu'ils ont déjà rempli.
• Enregistrez les entrées partielles lorsque c'est possible. WPForms Pro prend en charge l'enregistrement des entrées partielles, vous pouvez donc faire un suivi auprès des utilisateurs qui ont commencé mais n'ont pas terminé.

La meilleure façon de créer un formulaire en plusieurs étapes dans WordPress

Dans ce tutoriel, nous utiliserons WPForms pour créer des formulaires en plusieurs parties dans WordPress. WPForms est le meilleur plugin de création de formulaires WordPress par glisser-déposer. Et avec plus de 3 millions d'installations actives, c'est l'outil le plus convivial pour les débutants disponible.

Encore mieux, il existe une version gratuite et une version payante, mais aujourd'hui, nous utiliserons la version Pro de WPForms pour créer un formulaire en plusieurs pages dans WordPress.

Pourquoi ne pas consulter cette revue approfondie de WPForms pour tous les détails ?

Alors commençons par la première étape, qui consiste à créer un nouveau formulaire.

Avant de commencer : Le champ de saut de page qui alimente les formulaires en plusieurs étapes n'est disponible que dans WPForms Pro ou une version supérieure. La version gratuite de WPForms n'inclut pas cette fonctionnalité. Si vous avez la version gratuite installée, vous devrez passer à la version supérieure avant de suivre les étapes ci-dessous.

Étape 1 : Créer un nouveau formulaire dans WordPress

La première chose à faire est d'installer et d'activer le plugin WPForms. Si vous n'êtes pas sûr de la façon de faire, vous pouvez suivre ce guide étape par étape pour installer les plugins WordPress pour les débutants.

Avec WPForms, vous pouvez diviser n'importe quel type de formulaire en plusieurs parties, alors allons-y et créons un simple formulaire de contact.

Accédez à WPForms » Ajouter nouveau pour créer un nouveau formulaire et afficher les modèles disponibles.

Ensuite, sur cet écran, donnez un nom à votre formulaire et choisissez le modèle Simple formulaire de contact.

WPForms ouvrira maintenant le modèle dans l'éditeur de formulaire par glisser-déposer pour que vous puissiez le modifier.

Le simple formulaire de contact est livré avec les champs suivants déjà ajoutés à votre formulaire :

• Nom
• E-mail
• Commentaire ou Message

Vous pouvez également déplacer les champs du formulaire et ajouter des champs supplémentaires en les faisant glisser de la colonne de gauche vers la colonne de droite. Cliquez simplement sur n'importe quel champ du formulaire pour modifier son contenu et faites-le glisser pour réorganiser sa position.

Si vous souhaitez ajouter plus qu'un formulaire de contact à votre site WordPress, vous pouvez également créer les types de formulaires suivants avec WPForms :

• Formulaire d'enquête
• Formulaire de commande en ligne
• Formulaire de style Typeform
• Formulaire de téléchargement de fichiers

La plupart de ces types de formulaires sont plus longs que les formulaires de contact standard, donc les diviser en plusieurs étapes peut améliorer les conversions.

Étape 2 : Diviser votre formulaire en plusieurs parties

Une fois que vous avez personnalisé votre formulaire et ajouté les champs dont vous avez besoin, ajoutez le champ Saut de page pour diviser votre formulaire en différentes pages.

Vous pouvez le faire en regardant sous l'en-tête Champs fantaisie et en faisant glisser le champ de formulaire Saut de page vers le panneau de droite.

Ensuite, déposez le champ sur votre formulaire à l'endroit où vous souhaitez qu'il se divise.

Répétez cette opération pour chaque section où vous souhaitez diviser votre formulaire en une autre page. À partir de là, continuez à personnaliser votre formulaire en ajoutant les champs dont vous avez besoin pour le compléter.

Bien que WPForms vous permette d'ajouter autant de formulaires que vous le souhaitez, il est crucial d'éviter de submerger les utilisateurs avec trop d'informations. Faire cela peut les amener à abandonner votre formulaire, ce qui est le contraire de ce que vous souhaitez accomplir.

Étape 3 : Personnaliser la barre de progression de votre formulaire

Pour améliorer le flux de votre formulaire, vous pouvez inclure une barre de progression. Une barre de progression informe les utilisateurs sur les différentes sections de votre formulaire et constitue un excellent indicateur visuel de ce qu'il reste à compléter.

WPForms est livré avec 3 barres d'indicateur de progression différentes pour les formulaires en plusieurs étapes, qui sont les suivantes :

1. Connecteurs – Barres de connexion et titres de page pour chaque étape de votre formulaire.
2. Cercles – Cercles numérotés et titres de page pour chaque étape du formulaire.
3. Barre de progression – Indicateur de la progression de l'utilisateur au fur et à mesure qu'il complète les étapes du formulaire.

Chaque option offre aux utilisateurs une expérience visuelle différente. La Barre de progression affiche un remplissage basé sur un pourcentage qui progresse à mesure que les utilisateurs terminent chaque étape. Les options Cercles et Connecteurs affichent des comptes d'étapes (« Étape 2 sur 4 ») avec des étiquettes nommées, qui fonctionnent bien lorsque chaque étape a un thème clair comme « Vos informations » ou « Paiement ».

Les noms d'étapes valent la peine d'être configurés. Une étiquette comme « Étape 2 : Adresse de livraison » indique aux utilisateurs exactement où ils se trouvent dans le processus, ce qui réduit les abandons plus qu'une barre sans étiquette. Du point de vue de l'utilisateur, les étapes étiquetées ont l'air professionnelles et sont moins intimidantes qu'un indicateur de progression générique.

Pour modifier la barre de progression et le titre de la page de la première page de votre formulaire en plusieurs étapes, cliquez sur le champ Première page.

Vous verrez alors un nouveau panneau où vous pourrez choisir le type de progression pour votre formulaire. Dans cette zone, vous pouvez également modifier la couleur utilisée pour mettre en surbrillance l'indicateur de progression si vous le souhaitez.

Si vous sélectionnez les options cercles ou connecteurs, vous pouvez également modifier le titre de la page. Cela aide les utilisateurs à savoir sur quelle partie du formulaire ils se trouvent, afin qu'ils ne se perdent pas. Mais si vous préférez ne pas le faire, une barre de progression standard sera affichée aux utilisateurs pour les guider dans le remplissage de votre formulaire.

Ensuite, vous pouvez modifier le bouton et le texte Page suivante, qui emmène les utilisateurs à la page suivante de votre formulaire.

Pour ce faire, cliquez sur la section Saut de page que vous avez ajoutée lors de la création de votre formulaire.

De plus, vous pouvez ajouter un bouton Page précédente en cliquant sur le bouton bascule en position Activé. Ainsi, les utilisateurs peuvent revenir en arrière s'ils ont oublié d'ajouter des informations.

Une fois que vous avez terminé la personnalisation de votre barre de progression, cliquez sur Enregistrer et passez à l'étape suivante.

Étape 4 : Modifier les paramètres de votre formulaire

Passons maintenant à la modification des paramètres de votre formulaire. Pour ce faire, allez dans Paramètres » Général.

Dans cette section, vous pouvez définir les options suivantes :

• Nom du formulaire – Donnez un nouveau nom à votre formulaire si vous le souhaitez.
• Description du formulaire – Ajoutez une description à votre formulaire pour référence.
• Texte du bouton de soumission – Modifiez le texte de votre bouton de soumission.
• Paramètres anti-spam – Activez l'option honeypot anti-spam pour empêcher les spammeurs d'envoyer des soumissions indésirables.
• Fonctionnalités RGPD – Désactivez le stockage des informations saisies dans vos formulaires, telles que les adresses IP et autres données sensibles, pour vous conformer au RGPD.

Une fois vos paramètres configurés, cliquez sur Enregistrer.

Étape 5 : Configurer les notifications de votre formulaire

Les paramètres de notification dans WPForms envoient un e-mail lorsqu'un formulaire est soumis sur votre site WordPress.

Vous pouvez trouver les paramètres de notification en cliquant sur Paramètres » Notifications.

Pourtant, si vous ne désactivez pas les notifications de formulaire, vous recevrez un e-mail pour chaque formulaire soumis sur votre site.

D'autre part, vous pouvez utiliser des balises intelligentes pour envoyer un e-mail aux personnes qui remplissent votre formulaire. Les balises intelligentes sont un excellent moyen de leur faire savoir que leur formulaire a été traité correctement et que vous l'avez reçu.

Il est encore mieux d'utiliser cette fonctionnalité sur les longs formulaires en plusieurs étapes car ils peuvent prendre plus de temps à remplir. De plus, cela évite aux utilisateurs de se demander si tout s'est bien passé. Pour plus d'aide, vous pouvez consulter la documentation sur la configuration des notifications de formulaire ici.

Une fois que vous avez terminé la configuration de vos notifications, passez à la configuration de votre message de confirmation de formulaire.

Étape 6 : Définir le message de confirmation de votre formulaire

Les messages de confirmation de formulaire sont de brefs messages affichés aux utilisateurs lorsqu'ils ont soumis un formulaire sur votre site. C'est un excellent moyen de dire aux gens que leur formulaire est en cours de traitement et quelles sont les prochaines étapes.

Il existe 3 types de messages de confirmation dans WPForms, qui comprennent :

1. Message – Un simple message indiquant aux utilisateurs que leur formulaire a été soumis.
2. Afficher la page – Envoyez les utilisateurs vers une autre page, telle qu'une page de remerciement après la soumission de leur formulaire.
3. Accéder à l'URL (Redirection) – Envoyez les visiteurs du site vers un autre site Web après la soumission du formulaire.

Pour configurer votre message de confirmation, cliquez sur Paramètres » Confirmation.

Choisissez ensuite le type de message que vous souhaitez afficher à vos visiteurs après avoir rempli votre formulaire. Pour ce tutoriel, nous sélectionnerons Message.

Personnalisez maintenant le texte du message selon vos besoins et cliquez sur Enregistrer lorsque vous êtes satisfait.

Vous êtes maintenant prêt à ajouter votre formulaire à WordPress.

Étape 7 : Ajouter votre formulaire à WordPress

Une fois que vous avez créé votre formulaire en plusieurs étapes, il est temps de l'ajouter à votre site WordPress. Avec WPForms, vous pouvez ajouter votre formulaire à de nombreux endroits de votre site Web. Cela inclut votre page ou article de site, votre barre latérale et toute autre zone prête pour les widgets.

Voyons comment ajouter votre formulaire en plusieurs étapes à une page WordPress.

Le formulaire s’affichera exactement comme configuré dans WPForms, y compris la barre de progression et la mise en page en plusieurs étapes. Si vous n’avez pas encore créé de page de destination, l’éditeur glisser-déposer de SeedProd permet de créer facilement une page à partir d’un modèle sans toucher à aucun code.

Ensuite, cliquez sur l’icône plus dans l’éditeur WordPress pour ajouter un nouveau bloc de contenu. Dans le champ de recherche, tapez WPForms pour le trouver facilement.

Maintenant, cliquez sur le bloc WPForms pour l’ajouter à votre page.

Lorsque WPForms apparaît dans votre bloc, cliquez sur la flèche déroulante pour sélectionner votre formulaire en plusieurs étapes dans la liste et l’insérer dans votre page.

Ensuite, cliquez sur Publier pour publier la page dans WordPress. Votre formulaire en plusieurs étapes apparaîtra maintenant sur votre site Web.

Ajouter votre formulaire en plusieurs étapes à une page de destination SeedProd

Vous avez créé le formulaire. La vraie question est maintenant de savoir où le placer. L’ajout de votre formulaire en plusieurs étapes à une page WordPress standard fonctionne, mais son intégration dans une page de destination créée avec SeedProd vous donne un contrôle total sur la conception autour du formulaire, ce qui signifie moins de distractions et plus de conversions.

SeedProd dispose d’un bloc WPForms intégré qui se connecte directement à n’importe quel formulaire que vous avez créé.

Voici comment le configurer :

1. Ouvrez votre page de destination dans le constructeur de pages SeedProd en accédant à SeedProd » Pages de destination et en cliquant sur Modifier la page.
2. Dans le panneau de gauche, recherchez WPForms et faites glisser le bloc WPForms sur votre page à l’endroit où vous souhaitez que le formulaire apparaisse.
3. Cliquez sur le bloc pour ouvrir ses paramètres, puis utilisez le menu déroulant pour sélectionner votre formulaire en plusieurs étapes dans la liste des formulaires existants.
4. Ajustez la mise en page de la section environnante, le titre et les styles des boutons pour correspondre à votre campagne, puis cliquez sur Enregistrer et Publier la page.

Le formulaire s'affichera exactement tel que configuré dans WPForms, y compris la barre de progression et la mise en page en plusieurs étapes. Si vous n'avez pas encore créé de page de destination, l'éditeur glisser-déposer de SeedProd permet de le faire facilement à partir d'un modèle sans toucher à aucun code.

FAQ sur les formulaires en plusieurs étapes dans WordPress

Et voilà ! Vous avez appris à créer un formulaire en plusieurs étapes dans WordPress afin de pouvoir commencer à améliorer l’engagement des utilisateurs et les taux de conversion des formulaires en un rien de temps.

Si vous avez aimé cet article, consultez notre vitrine des meilleurs plugins WordPress à utiliser également sur votre site.

Et pour plus de tutoriels sur les formulaires, consultez ces articles :

• Comment créer un formulaire WordPress avec téléversement de fichiers
• Comment créer un formulaire de style Typeform
• Comment créer un formulaire de contact dans WordPress
• Comment créer un formulaire de commande en ligne dans WordPress
• Comment créer un formulaire d’inscription d’événements WordPress

Et si vous le souhaitez, suivez-nous sur Facebook et Twitter pour plus d’astuces et de tutoriels utiles.