Comment créer un formulaire avec une barre de progression
Publié: 2022-04-22Vous 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 :
- Installez le plug-in WPForms
- Créer un nouveau formulaire
- Ajouter des sauts de page à votre formulaire
- Enregistrez et publiez votre formulaire
- 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 .
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.
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 .
De là, 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 le plugin 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 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.
Sur la page Configuration du générateur 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 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.
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.
Une fois que vous avez trouvé le modèle souhaité, survolez-le et cliquez sur le bouton 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.
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.
Vous pouvez personnaliser votre barre de progression dans la liste déroulante Indicateur de progression.
Vous pouvez ensuite choisir parmi les trois styles d'indicateur de progression : Barre de progression , Cercles ou Connecteur .
Barre de progression:
Cercles :
Connecteur :
Pour changer la couleur de votre indicateur de progression, utilisez le sélecteur de couleur ou entrez le code HEX.
Enfin, entrez un nom pour la première page de votre formulaire dans le champ Titre de la page .
Toutefois, si vous êtes satisfait de l'apparence de votre formulaire, vous pouvez masquer la barre de progression en sélectionnant Aucun .
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.
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 .
À 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.
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.
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.
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 .
5. Vérifiez la barre de progression de votre formulaire
Vous aurez maintenant un formulaire qui aura un indicateur de progression semblable à celui-ci :
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.