Comment créer un formulaire avec une barre de progression

Publié: 2022-04-22

Vous souhaitez savoir comment ajouter une barre de progression à un formulaire ?

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

Nous allons vous montrer comment en ajouter un à votre formulaire ci-dessous.

Qu'est-ce que la barre de progression sur les formulaires ?

Les barres de progression sont des fonctionnalités visuelles qui indiquent aux utilisateurs le nombre de pages de votre formulaire et la page sur laquelle ils se trouvent actuellement.

Les indicateurs de progression, comme on les appelle également, suivront et indiqueront la progression globale de l'utilisateur lorsqu'il remplira le formulaire.

Comment créer un formulaire avec une barre de progression

Voici les étapes que nous allons suivre :

WPForms est le meilleur plugin WordPress Form Builder. Achetez le gratuitement!
    1. Installez le plug-in WPForms
    2. Créer un nouveau formulaire
    3. Ajouter des sauts de page à votre formulaire
    4. Enregistrez et publiez votre formulaire
    5. Vérifiez la barre de progression de votre formulaire

Commençons par installer le plugin de formulaire dont nous aurons besoin pour la barre 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, puis vous connecter à votre compte WPForms. Une fois connecté, cliquez sur l'onglet Téléchargements .

Onglet Télécharger dans WPForms

Cela vous montrera 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 compressé du plugin WPForms sur votre ordinateur.

Télécharger le bouton WPForms

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 sur votre formulaire et pour afficher la barre de progression.

Installer WPForms sur votre site

Une fois que vous avez téléchargé votre fichier zip, rendez-vous sur votre site WordPress où vous souhaitez installer WPForms. Ensuite, dans le tableau de bord d'administration, accédez à Plugins » Ajouter un nouveau et cliquez sur le bouton Télécharger le plugin .

Bouton de téléchargement du plugin sur WordPress

De là, cliquez sur le bouton Choisir un fichier et sélectionnez le fichier zip WPForms que vous venez de télécharger.

Flèche rouge pointant vers le bouton Choisir un fichier

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

Bouton Installer maintenant sur WordPress

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

Flèche rouge pointant vers le bouton Activer le plugin

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

C'est ça! Nous pouvons maintenant créer un nouveau formulaire.

2. Créer un nouveau formulaire

Pour commencer, vous devez être connecté à votre zone d'administration WordPress. Une fois là-bas, cliquez sur WPForms dans la barre latérale d'administration pour accéder à la page de présentation des formulaires.

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

Ajouter un nouveau formulaire WPForms

Sur la page Configuration du générateur de formulaires, vous pouvez nommer votre formulaire dans le champ de saisie Nom du formulaire .

Mettre en surbrillance le champ où vous pouvez nommer votre formulaire

Si aucun nom n'est choisi, le nom du formulaire sera par défaut le nom du modèle que vous choisissez.

Sous le champ Nom du formulaire, vous trouverez des centaines de modèles de formulaire dans la section Sélectionner un modèle . Ce sont des modèles prédéfinis de formulaires couramment utilisés pour vous aider à démarrer rapidement.

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

Sélectionnez une section de modèle dans WPForms

Pour sélectionner un modèle, vous pouvez utiliser les catégories dans le 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.

Mise en surbrillance de la fonctionnalité de barre de recherche de modèles

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

Flèche pointant vers le gros bouton orange Utiliser le modèle

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

3. Ajoutez 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 générateur de formulaires, continuez et ajoutez tous les champs que vous souhaitez inclure dans votre formulaire. Faites ensuite glisser un champ Saut de page dans la zone d'aperçu et déposez-le à l'endroit où vous souhaitez créer une nouvelle page de formulaire.

Une image animée du glissement du champ de saut de page vers le générateur de formulaire

Chaque champ de saut de page que vous ajoutez divisera le formulaire en pages supplémentaires et vous pourrez ajouter autant de pages que nécessaire. Pour déplacer le saut de page vers une autre section de votre formulaire, cliquez simplement 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 zone Première page est apparue en haut de votre formulaire. Cliquez sur Première page / Indicateur de progression pour accéder aux options de votre formulaire multi-pages.

Flèche pointant vers la première page/indicateur de progression

Vous pouvez personnaliser votre barre de progression dans la liste déroulante Indicateur de progression.

Une flèche pointant vers les options de personnalisation de la barre de progression

Vous pouvez ensuite choisir parmi les trois styles d'indicateur de progression : Barre de progression , Cercles ou Connecteur .

Barre de progression:

Une image de la barre d'indicateur de progression sur WPForms

Cercles :

Style de cercle de la barre de progression de WPForms

Connecteur :

Style de connecteur pour la barre de progression de WPForms

Pour changer la couleur de votre indicateur de progression, utilisez le sélecteur de couleur ou entrez le code HEX.

Le sélecteur de couleur pour la fonction de barre de progression sur WPForms

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

Une flèche pointant vers le champ titre du formulaire pour renommer votre formulaire

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

Flèche pointant vers le bouton de style indicateur de progression

Vous voulez en savoir plus ? Lisez comment créer des instructions de formulaire de plusieurs pages et des détails de personnalisation pour tirer pleinement parti de cette fonctionnalité de formulaire.

4. Enregistrez et publiez votre formulaire

Une fois que vous avez fini de personnaliser votre formulaire, vous pouvez maintenant le publier. Tout d'abord, cliquez sur le gros bouton orange Enregistrer dans le coin supérieur droit de votre générateur de formulaires.

Le gros bouton orange Enregistrer pour enregistrer votre formulaire

Vous pouvez ensuite utiliser l'assistant d'intégration pour intégrer votre formulaire sur votre site Web en cliquant sur le bouton Intégrer .

Bouton Intégrer le formulaire

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

Options d'intégration sur WPForms

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 Allons-y pour intégrer votre formulaire et publier votre page.

Nommez la nouvelle page pour l'intégration du formulaire

Si vous choisissez l'option Sélectionner une page existante , il vous sera demandé de choisir la page sur laquelle intégrer votre formulaire dans la liste déroulante.

Sélectionnez l'option de page existante avec un gros bouton Allons-y

Cliquez ensuite sur le bouton Allons-y pour intégrer votre formulaire.

Vous pouvez maintenant afficher votre formulaire sur la page sélectionnée. Accédez à la page sur laquelle vous l'avez intégré ou accédez à WPForms » All Forms . Survolez le titre du formulaire pour afficher un menu d'options supplémentaire. Une fois les options affichées, cliquez sur Aperçu .

Option de formulaire de prévisualisation sur WPForms

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

Vous aurez maintenant un formulaire qui aura un indicateur de progression semblable à celui-ci :

Un exemple de l'apparence de la barre de progression sur un WPForm

Nous vous recommandons de tester votre formulaire en remplissant les champs et en le soumettant, pour vous assurer que tout semble bon 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 augmenter vos connaissances en construction WPForm? Assurez-vous de consulter notre guide complet sur les champs de formulaire et comment personnaliser les champs de vos formulaires.

Êtes-vous prêt à créer votre formulaire maintenant ? N'oubliez pas de vous inscrire à WPForms Pro car il comprend le champ Saut de page et la barre de progression, des centaines de modèles gratuits, et nous offrons également une garantie de remboursement de 14 jours.

Créez votre formulaire WordPress maintenant

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