Comment créer un formulaire WordPress avec une barre de progression

Vous recherchez un plugin de barre de progression WordPress ?

Les indicateurs de progression, comme on les appelle aussi, suivront et indiqueront la progression globale de l'utilisateur au fur et à mesure qu'il remplit le formulaire.

Dans cet article, nous vous montrerons comment ajouter facilement une barre de progression à votre formulaire à l'aide de WPForms.

Créez votre formulaire WordPress maintenant

Comment ajouter une barre de progression WordPress ?

Les barres de progression sont des fonctionnalités visuelles qui ajoutent de la fonctionnalité et améliorent l'expérience utilisateur. Elles indiquent aux utilisateurs combien de pages composent votre formulaire et sur quelle page ils se trouvent actuellement.

Avoir une barre de progression sur votre formulaire aide à réduire l'abandon de formulaire en informant votre visiteur de sa progression.

La façon la plus simple de les ajouter à vos formulaires est d'utiliser un plugin. La bonne nouvelle, surtout pour les débutants, est que vous n'avez pas besoin d'un plugin WordPress spécifique pour les barres de progression. WPForms est très convivial et simplifie le processus en rendant la création de formulaires multipages avec barres de progression un jeu d'enfant.

Comment créer un formulaire WordPress avec une barre de progression

Voici les étapes que nous allons suivre :

Commençons par installer WPForms comme notre plugin constructeur de formulaires et de barres de progression.

1. Installez le plugin WPForms

Tout d'abord, pour avoir une barre de progression sur votre formulaire, vous devrez acheter une licence WPForms Pro et ensuite vous connecter à votre compte WPForms. Une fois connecté, cliquez sur l'onglet Téléchargements.

Cela vous affichera une page avec toutes vos licences disponibles. Pour télécharger le plugin, cliquez sur le bouton Télécharger WPForms à côté de l’une de vos licences. Cela enregistrera un fichier zippé du plugin WPForms sur votre ordinateur.

Important : Vous aurez besoin de WPForms Pro car il inclut le champ Saut de page. Vous avez besoin du champ Saut de page si vous avez plusieurs étapes dans votre formulaire et pour afficher la barre de progression.

Installation de WPForms sur votre site WordPress

Une fois que vous avez téléchargé votre fichier zip, rendez-vous sur votre site Web WordPress où vous souhaitez installer WPForms. Ensuite, dans le tableau de bord d'administration, allez dans Extensions » Ajouter et cliquez sur le bouton Téléverser une extension.

À partir d'ici, cliquez sur le bouton Choisir un fichier et sélectionnez le fichier zip WPForms que vous venez de télécharger.

Une fois votre fichier téléchargé, cliquez sur le bouton Installer maintenant.

Cela commencera le processus d'installation pour vous. Une fois le plugin installé, cliquez sur le bouton Activer l'extension pour activer WPForms sur votre site.

Après avoir activé le plugin, vérifiez votre clé de licence WPForms pour recevoir les mises à jour automatiques et le support du plugin. L'ajout de votre clé de licence vous permettra également d' installer et d'activer facilement les extensions WPForms depuis votre tableau de bord WordPress.

C'est tout ! Nous pouvons maintenant passer à la création d'un nouveau formulaire.

2. Créer un nouveau formulaire

Pour commencer, vous devez être connecté à votre espace d'administration WordPress. Une fois sur place, cliquez sur WPForms dans la barre latérale d'administration pour accéder à la page d'aperçu des formulaires.

Ensuite, pour créer un nouveau formulaire, cliquez sur le bouton Ajouter un nouveau pour lancer le constructeur de formulaires WPForms.

Sur la page de configuration du constructeur de formulaires, vous pouvez nommer votre formulaire dans le champ de saisie Nom du formulaire.

Si aucun nom n'est choisi, le nom du formulaire sera par défaut le nom de votre modèle.

Sous le champ Nom du formulaire, vous trouverez des centaines de modèles de formulaires dans la section Sélectionner un modèle. Ce sont des modèles pré-conçus de formulaires couramment utilisés tels que des formulaires de contact, des formulaires d'inscription, et bien d'autres pour vous aider à démarrer rapidement.

Remarque : Si vous souhaitez créer votre formulaire à partir de zéro, utilisez le modèle Formulaire vierge.

Pour sélectionner un modèle, vous pouvez utiliser les catégories du menu de gauche. Vous pouvez également utiliser la barre de recherche dans le coin supérieur gauche de la bibliothèque de modèles pour rechercher parmi les options disponibles.

Une fois que vous avez trouvé le modèle souhaité, survolez-le et cliquez sur le bouton Utiliser le modèle.

À partir de là, vous entrerez dans le constructeur de formulaires, et vous pourrez y glisser-déposer des éléments supplémentaires si vous le souhaitez. Vous pouvez également modifier la disposition du formulaire, passant des champs en ligne à plusieurs colonnes.

Si vous rencontrez des difficultés pour créer votre formulaire, lisez nos instructions détaillées sur comment créer et personnaliser entièrement votre formulaire.

3. Ajouter des sauts de page à votre formulaire

Vous êtes maintenant prêt à ajouter vos sauts de page et une barre de progression. En ajoutant un saut de page, le formulaire inclura automatiquement la barre de progression.

Une fois que vous avez ouvert le constructeur de formulaires, ajoutez les champs que vous souhaitez inclure dans votre formulaire. Ensuite, faites glisser un champ Saut de page dans la zone d'aperçu et déposez-le où vous souhaitez créer une nouvelle page de formulaire.

Chaque champ Saut de page que vous ajoutez divisera le formulaire en pages supplémentaires, et vous pouvez en ajouter autant que nécessaire. Pour déplacer le Saut de page vers une autre section de votre formulaire, cliquez dessus dans la zone d'aperçu et faites-le glisser où vous le souhaitez.

Personnalisation de votre barre de progression

Une fois que vous avez ajouté un Saut de page, vous remarquerez peut-être que dans la zone d'aperçu, une section Première page est apparue en haut de votre formulaire. C'est le marqueur pour la barre de progression horizontale. Cliquez sur Première page / Indicateur de progression pour accéder aux options de votre formulaire multipage.

Vous pouvez personnaliser votre barre de progression dans le menu déroulant Indicateur de progression, et plusieurs options de personnalisation s'offrent à vous.

Tout d'abord, choisissez vos styles d'indicateur de progression. WPForms propose des Barres de progression, des Barres de progression circulaires et des Barres de progression avec connecteurs.

Barre de progression :

Cercles :

Connecteur :

Vous avez quelques options de style en ce qui concerne ces formulaires multipages. Pour changer la couleur de votre Indicateur de progression, utilisez le sélecteur de couleur ou entrez le code hexadécimal.

Enfin, entrez un nom pour votre formulaire dans le champ Titre de la page.

Cependant, si vous êtes satisfait de l'apparence de votre formulaire tel quel, vous pouvez masquer la barre de progression en sélectionnant Aucun.

Vous souhaitez en savoir plus ? Lisez les instructions complètes sur comment créer des formulaires multipages pour tirer pleinement parti de cette fonctionnalité de formulaire.

Vous voudrez peut-être aussi permettre à vos utilisateurs de sauvegarder leur progression et de remplir le reste de votre formulaire plus tard. C'est un excellent moyen de réduire l'abandon de formulaire et d'augmenter les taux de complétion.

4. Enregistrez et publiez votre formulaire

Une fois que vous avez terminé la personnalisation de votre formulaire, vous pouvez le publier. Tout d'abord, cliquez sur le bouton Enregistrer en haut à droite de votre générateur de formulaires.

Vous pouvez ajouter votre formulaire à votre site Web en cliquant sur le bouton Intégrer.

À partir de là, vous aurez la possibilité de créer une nouvelle page ou de sélectionner une page existante pour ajouter votre formulaire.

Notez qu'il existe également une option de shortcode, si vous souhaitez intégrer le formulaire directement sur votre page plus tard. Ceci est également utile si vous prévoyez de placer des formulaires dans des widgets à la place.

Si vous sélectionnez l'option Créer une nouvelle page, vous serez invité à entrer un nom pour la page. Cliquez ensuite sur le bouton C'est parti pour intégrer votre formulaire et publier votre page.

Si vous choisissez l’option Sélectionner une page existante, vous serez invité à choisir la page sur laquelle intégrer votre formulaire dans la liste déroulante.

Cliquez ensuite sur le bouton C'est parti pour intégrer votre formulaire.

Vous pouvez maintenant voir votre formulaire sur la page sélectionnée. Allez sur la page où vous l'avez intégré ou allez dans WPForms » Tous les formulaires. Survolez le titre du formulaire pour afficher un menu d'options supplémentaire. Une fois les options apparues, cliquez sur Aperçu.

5. Vérifier la barre de progression de votre formulaire

Vous aurez maintenant un formulaire qui affichera un indicateur de progression similaire à celui-ci :

Nous vous recommandons de tester votre formulaire en remplissant les champs et en le soumettant pour vous assurer que tout est correct et qu'il fonctionne comme vous le souhaitez.

Remarque : Les champs de saut de page peuvent être déplacés vers le haut ou vers le bas sur le formulaire si vous souhaitez ajuster la mise en page.

Ensuite, devenez un expert en création de formulaires

Souhaitez-vous approfondir vos connaissances sur la création de formulaires avec WPForms ? Consultez notre guide complet des champs de formulaire et comment personnaliser les champs de vos formulaires.

Si vous êtes prêt à faire passer vos formulaires au niveau supérieur, notre article sur la personnalisation de vos formulaires pour correspondre à votre thème WordPress vaut la peine d'être lu. Vous apprendrez à personnaliser l'apparence de votre formulaire, les boutons, la couleur d'arrière-plan, et plus encore, directement depuis l'éditeur de blocs WordPress. Le meilleur ? Si vous ne connaissez pas le CSS, ce n'est pas grave. Vous n'avez pas besoin de CSS personnalisé pour ces personnalisations !

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.