Comment créer un formulaire à plusieurs étapes dans WordPress : 2 méthodes faciles

Vous cherchez un moyen de faire en sorte que les visiteurs de votre site web qui vous contactent à l'aide d'un formulaire à plusieurs étapes vivent une expérience plus positive ?

En divisant votre formulaire en différentes sections, vous pouvez lutter contre la fatigue des formulaires et augmenter l'engagement des utilisateurs et la génération de leads sur votre site web.

Dans ce guide, nous allons vous expliquer les bases de la mise en place d'un formulaire multi-étapes dans WordPress avec WPForms via 2 méthodes différentes.

Comment créer un formulaire à plusieurs étapes dans WordPress

Créer un formulaire à plusieurs étapes dans WordPress en utilisant WPForms est incroyablement facile. Il suffit de suivre les étapes ci-dessous :

Étape 1 : Installer un plugin de construction de formulaires en plusieurs étapes

Si vous êtes à la recherche d'un plugin de construction de formulaire qui vous permet de créer des formulaires à plusieurs étapes, des calculatrices et d'autres types de formulaires, ne cherchez pas plus loin que WPForms. Il offre de nombreuses fonctionnalités qui rendent la création d'un formulaire personnalisé incroyablement facile.

Pour ce tutoriel, nous recommandons de s'inscrire à WPForms Pro, car il a beaucoup de fonctionnalités comme les sauts de page, l'addon Lead Forms, la logique conditionnelle, et des modèles personnalisables qui rendent très facile la création d'un formulaire à plusieurs étapes.

Une fois que vous avez acquis la licence WPForms Pro, tout ce que vous avez à faire est d'activer et d'installer le plugin sur votre site web. Pour obtenir des instructions pas à pas sur la manière de procéder, consultez ce guide sur l'installation d'un plugin WordPress.

Étape 2 : Créez votre formulaire et ajoutez des champs pertinents

Maintenant, créons notre formulaire en plusieurs étapes dans WordPress. Depuis votre tableau de bord, naviguez simplement vers WPForms et cliquez sur le bouton Ajouter un nouveau.

Sur la page suivante, donnez un nom à votre formulaire. Pour les besoins de ce tutoriel, nous appellerons le nôtre le "Formulaire WordPress en plusieurs étapes".

Ensuite, vous pouvez choisir de commencer à construire votre formulaire à partir de zéro en cliquant sur le bouton Créer un formulaire vierge, ou vous pouvez ajouter des champs à un modèle existant.

Pour gagner du temps et procéder à l'ajout des champs pertinents dans notre formulaire, nous allons sélectionner le formulaire de contact simple, puis cliquer sur le bouton Utiliser le modèle.

Après avoir cliqué sur le bouton Utiliser le modèle, vous serez redirigé vers le créateur de formulaire. Sur le côté gauche, vous pouvez voir tous les champs disponibles.

Dans le même temps, à droite de l'écran, vous pouvez voir un aperçu modifiable de votre formulaire, où vous pouvez faire glisser et déposer d'autres champs à votre convenance.

Avec le modèle de formulaire SimpleContact, vous disposez déjà des champs de formulaire Nom, Courriel et Commentaire ou Message.

Cliquez sur l'un des champs du formulaire pour le modifier ou en ajouter de nouveaux afin de le personnaliser. Par exemple, nous avons ajouté des champs pour que les utilisateurs puissent fournir des informations concernant :

• Nom de l'entreprise - En utilisant le champ Texte à ligne unique.
• Titre de l'emploi - Là encore, utilisez le champ Texte à ligne unique.
• Site web - En utilisant le champ Site web / URL de la section Champs fantaisie.
• Industrie - Utilisation d'un champ à cocher et ajout de choix tels que Technologies de l'information, Industrie manufacturière, Commerce de détail et Santé.
• Pays/Région - Utilisation d'un champ déroulant et ajout de choix tels que États-Unis, Canada, Australie, Royaume-Uni et Nouvelle-Zélande.
• Comment avez-vous entendu parler de nous ? - Une fois de plus, utilisez le champ déroulant et ajoutez des choix tels que Google, Facebook, LinkedIn, etc.

Nous avons ajouté ces champs pour améliorer le modèle de formulaire et l'adapter à notre cas d'utilisation. Voyons maintenant comment diviser votre formulaire en plusieurs parties.

Étape 3 : Diviser le formulaire en plusieurs parties

Vous serez heureux d'apprendre que diviser votre formulaire en plusieurs parties est très facile avec WPForms, et vous n'avez pas qu'une seule méthode pour le faire !

Selon vos besoins, vous pouvez soit utiliser le champ Page Break pour diviser votre formulaire, soit utiliser l'addon Lead Forms. Nous allons vous montrer les étapes pour les deux !

Méthode 1 : Ajouter le champ de saut de page pour diviser le formulaire

Pour commencer à diviser votre formulaire en plusieurs parties, faites glisser le champ Saut de page du panneau de gauche vers le panneau de droite.

N'oubliez pas que vous devez insérer le champ Saut de page à l'endroit précis où vous souhaitez que le formulaire soit scindé.

Si vous souhaitez diviser le formulaire à nouveau, répétez les mêmes étapes. WPForms vous permettra de créer autant de pages de formulaire que nécessaire.

Vous pouvez créer des formulaires en deux étapes ou aller aussi loin que vous le souhaitez, mais n'oubliez pas de garder les choses simples car vous ne voulez pas submerger vos utilisateurs.

Une fois que vous avez terminé, vous pouvez personnaliser la barre de progression multipage afin d'améliorer la convivialité du formulaire.

Personnaliser la barre de progression du formulaire multi-pages

En utilisant une barre de progression, vous pouvez informer les utilisateurs des différentes sections de votre formulaire, afin qu'ils sachent ce qu'il leur reste à remplir avant de cliquer sur Envoyer.

WPForms rend les choses très faciles pour vous en introduisant trois différentes barres d'indicateurs de type fil d'Ariane pour les formulaires à plusieurs étapes :

• Barre de progression : Cette option permet à l'utilisateur de voir la progression du formulaire au fur et à mesure qu'il le remplit afin de le tenir informé.
• Cercles : Cette option permet à votre formulaire en plusieurs étapes d'afficher un cercle et le titre de la page sur chaque page.
• Connecteur : Cette option affiche les titres des pages et une barre de connexion pour chaque section de votre formulaire en plusieurs étapes.

Cliquez sur la section Première page pour personnaliser la barre de progression et le titre de la première page de votre formulaire à plusieurs étapes. À partir de cet emplacement, vous pouvez

• Sélectionnez le type d'indicateur de progrès souhaité.
• Modifiez la couleur de l'indicateur de page à votre convenance.
• Personnalisez le titre de la page pour aider les utilisateurs à comprendre dans quelle section du formulaire ils se trouvent (si vous avez sélectionné Cercles ou Connecteurs).

Personnaliser le titre de la page suivante et le texte du bouton

Vous avez modifié le titre de la page pour la première section du formulaire, mais qu'en est-il des autres sections de votre formulaire ?

Comme pour la première page, vous pouvez modifier le titre de la section suivante en cliquant sur le champ correspondant au saut de page, et même personnaliser son étiquette suivante.

Vous pouvez également activer l'option Afficher la page précédente pour afficher un bouton Page précédente aux visiteurs du site et même personnaliser le libellé de la page précédente à votre convenance.

Ainsi, si nécessaire, les clients peuvent revenir à la page précédente de votre formulaire, ce qui augmente encore la convivialité de votre formulaire.

Méthode 2 : Utiliser le module complémentaire Lead Forms pour diviser le formulaire

Le champ Page Break fonctionne parfaitement pour diviser le formulaire en plusieurs sections, mais si vous cherchez une alternative, vous pouvez utiliser l'addon Lead Forms.

De plus, générer des leads est idéal pour gérer votre petite entreprise sur WordPress, ce qui est également tout à fait possible avec WPForms.

L'installation de l'addon Lead Forms est très simple. Depuis votre tableau de bord WordPress, allez dans WPForms, puis cliquez sur Addons.

Ensuite, recherchez "Lead Forms" dans la section Search Addons. Cliquez ensuite sur Install Addon, puis sur le bouton Activate.

Activer le mode Lead Form dans le générateur de formulaires

Une fois que le module complémentaire Lead Forms est installé et activé, retournez au générateur de formulaires où vous créez votre formulaire.

De là, cliquez sur l'onglet Paramètres, puis sélectionnez l'option Formulaires de prospects. Il ne vous reste plus qu'à activer l'option Enable Lead Form Mode.

Une fenêtre contextuelle s'affiche alors, vous informant que le module complémentaire Lead Forms va restructurer votre formulaire. Cliquez sur le bouton Activer les formulaires de prospects.

Vos champs seront alors automatiquement transformés en un formulaire de prospect. À moins que vous n'ayez un grand nombre de champs, cette opération ne prend normalement que quelques secondes.

Votre formulaire est maintenant automatiquement divisé en plusieurs sections. N'hésitez pas à ajouter, modifier et organiser les champs à votre guise.

Personnaliser les paramètres de style du formulaire de prospect

L'une des meilleures choses à propos de l'addon Lead Forms est qu'il vous permet de personnaliser l'apparence de votre formulaire sur le front-end.

La page des paramètres des formulaires de prospects contient toutes les options de personnalisation. Nous allons passer en revue les choix de personnalisation disponibles ci-dessous.

• Titre du formulaire : Vous pouvez donner un titre à votre formulaire en le saisissant dans le champ Titre du formulaire. Lorsque les utilisateurs rempliront votre formulaire, le titre apparaîtra sur la page d'accueil.
• Couleur d'accentuation : cette option vous permet de modifier la couleur de vos boutons, de la barre de progression et des icônes à l'aide d'un outil interactif de sélection des couleurs.
• Animation du défilement : Avec cette option activée, WPForms fera naviguer l'utilisateur vers le haut de la page, lorsqu'il cliquera sur le bouton "Suivant" du formulaire.

Votre formulaire de prospect peut être personnalisé à l'aide de paramètres supplémentaires. Vous devez activer les paramètres de style avancés pour accéder à ces options.

Il existe également une option Conteneur de formulaire, que vous pouvez activer pour entourer le formulaire de prospect d'un conteneur qui le fera ressortir du reste des éléments de la page.

Une fois que vous avez personnalisé votre formulaire en plusieurs étapes pour y inclure toutes les fonctionnalités souhaitées, n'oubliez pas d'appuyer sur le bouton Enregistrer.

Vous pouvez également utiliser un formulaire en plusieurs étapes pour capturer de nouveaux prospects et développer votre liste d'emails. Consultez ce guide sur la façon de créer une page d'aimant à prospects avec WPForms!

Étape 4 : Personnaliser les notifications et les confirmations

La configuration des notifications vous permet d'être toujours informé des nouvelles entrées de formulaire. Dans le générateur de formulaires, cliquez sur Paramètres, puis sur Notifications.

Vous pouvez modifier les paramètres de notification par défaut, tels que la ligne d'objet, ou changer les courriels des destinataires si nécessaire à partir d'ici.

Une fois cette étape franchie, il vous suffit de vous rendre dans la section Confirmations du menu Paramètres pour configurer les réponses aux soumissions de formulaires réussies.

Sélectionnez ensuite le type de confirmation (message, affichage de page ou redirection) qui convient le mieux à votre site web et configurez ses options.

N'oubliez pas d'enregistrer à nouveau votre formulaire afin de ne pas perdre les modifications apportées et de vous assurer que vos paramètres ont été mis à jour.

Étape 5 : Publier votre formulaire WordPress en plusieurs étapes

Excellent travail ! Vous avez réussi à créer un formulaire en plusieurs étapes dans WordPress. Il est maintenant temps de le mettre en ligne et de voir les soumissions arriver !

Le processus est incroyablement simple et vous n'avez même pas besoin de quitter le générateur de formulaires. Il vous suffit de cliquer sur le bouton Embed dans le coin supérieur droit.

Vous pouvez choisir de publier le formulaire sur une page existante ou de créer une nouvelle page, après quoi vous serez redirigé vers l'éditeur de blocs de WordPress.

Le formulaire sera déjà intégré. Il ne vous reste plus qu'à cliquer sur le bouton Publier, et votre formulaire WordPress en plusieurs étapes sera en ligne !

Si vous utilisez un constructeur de pages comme Divi, vous pouvez également consulter ce guide pour savoir comment créer un formulaire de contact Divi.

Plus de questions sur les formulaires en plusieurs étapes

Les formulaires WordPress à plusieurs étapes sont un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions à ce sujet.

Qu'est-ce qu'un formulaire en plusieurs étapes ?

Un formulaire à plusieurs étapes divise un formulaire en plusieurs étapes ou pages, ce qui améliore l'expérience de l'utilisateur en divisant les formulaires plus longs en sections gérables. C'est idéal pour les formulaires complexes comme les applications, les enquêtes ou les inscriptions. WPForms simplifie la création de formulaires à plusieurs étapes avec son champ Page Break, permettant une navigation facile pour les utilisateurs.

Un formulaire à plusieurs étapes ralentira-t-il mon site Web ?

Non, un formulaire à plusieurs étapes ne ralentira pas votre site web. WPForms, en particulier avec son Addon Lead Forms, optimise ces formulaires pour la vitesse et la performance, s'assurant qu'ils se chargent rapidement sans affecter la vitesse globale de votre site web.

Quand dois-je utiliser un formulaire en plusieurs étapes ?

Utilisez un formulaire à plusieurs étapes lorsque vous avez des formulaires longs ou détaillés. Ils sont parfaits pour les inscriptions, les enquêtes, ou les applications où vous avez besoin de collecter beaucoup d'informations mais où vous voulez éviter de submerger l'utilisateur sur la page d'atterrissage. WPForms permet une création efficace de formulaires en plusieurs étapes, améliorant ainsi l'engagement des utilisateurs.

Quels sont les types de formulaires qui se convertissent le mieux à la présentation en plusieurs étapes ?

Les formulaires qui requièrent des informations détaillées, comme les demandes d'emploi, les enquêtes complexes et les longues inscriptions, se convertissent mieux avec une mise en page en plusieurs étapes. Ce format, facilement créé avec WPForms, aide à maintenir l'attention des utilisateurs et réduit le sentiment d'être submergé par un long formulaire, augmentant ainsi les taux de conversion.

Ensuite, apprenez à créer un formulaire de calculatrice dans WordPress

Voulez-vous apprendre à créer un formulaire de calculatrice dans WordPress pour augmenter l'engagement des utilisateurs sur votre site ? Vous avez de la chance ! Créer un formulaire de calculatrice personnalisé est rapide et facile, grâce à WPForms et à son addon Calculations.

Si vous vous demandez comment encourager les utilisateurs à remplir un formulaire exigeant leur adresse électronique pour télécharger un fichier, c'est également possible. Consultez ce guide sur la façon d'exiger une adresse électronique pour télécharger un fichier.

Corrigez vos emails WordPress dès maintenant

Prêt à réparer vos emails ? Commencez dès aujourd'hui avec le meilleur plugin WordPress SMTP. Si vous n'avez pas le temps de réparer vos emails, vous pouvez obtenir une assistance complète de White Glove Setup en tant qu'achat supplémentaire, et il y a une garantie de remboursement de 14 jours pour tous les plans payants.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres conseils et tutoriels WordPress.