Résumé IA
Vous voulez diviser votre formulaire en plusieurs pages ? Un formulaire multipage vous permet de décomposer les formulaires longs en différentes sections, les rendant moins intimidants et améliorant l'expérience utilisateur.
Ce tutoriel vous montrera comment créer facilement des formulaires multipages avec WPForms.
Tout d'abord, assurez-vous que WPForms est installé et activé sur votre site. Ensuite, vous devrez créer un nouveau formulaire ou modifier un formulaire existant.
Création d'un formulaire multipage
Une fois le constructeur de formulaire ouvert, 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 là 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 ajouter autant de pages que nécessaire. Pour déplacer un Saut de page vers une autre partie de votre formulaire, cliquez simplement dessus dans la zone d'aperçu et faites-le glisser où vous le souhaitez.
Personnalisation des paramètres de page du formulaire
WPForms offre plusieurs façons de personnaliser vos formulaires multipages, notamment en ajoutant des titres de page, en choisissant un style de barre de progression, et plus encore.
Titres de page, texte des boutons et boutons Précédent
Si vous cliquez sur un champ Saut de page dans la zone d'aperçu du constructeur de formulaire, son panneau Options de champ s'ouvrira. À partir de là, vous pouvez modifier le Titre de la page.
Vous pouvez également personnaliser le texte du bouton sur lequel les utilisateurs cliqueront pour passer à la page suivante dans le champ Libellé Suivant.
Si vous souhaitez également activer le bouton Précédent, activez l'option Afficher Précédent. Ce bouton de navigation est masqué par défaut pour aider à optimiser les conversions, mais vous pouvez l'afficher aux utilisateurs page par page.
Remarque : Le curseur Afficher Précédent n'apparaît que si vous avez plus d'un champ Saut de page dans votre formulaire. Il ne s'affichera pas sur le premier champ Saut de page de votre formulaire.
Lorsque le bouton Précédent est activé, l'option Libellé Précédent apparaîtra afin que vous puissiez personnaliser le texte du bouton.
Ajout d'un bouton Précédent à la dernière page de votre formulaire
Pour afficher un bouton Précédent sur la dernière page de votre formulaire, cliquez sur le séparateur sous le dernier champ dans la zone d'aperçu du constructeur de formulaire.
Cela affichera le curseur Afficher Précédent dans le panneau Options de champ.
Activez-le pour personnaliser le texte de votre bouton comme décrit ci-dessus.
Paramètres de la première page et styles de barre de progression
Une fois que vous avez ajouté un Saut de page, vous remarquerez qu'une zone Première page est apparue tout en haut de votre formulaire dans la zone d'aperçu. Cliquez sur Première page / Indicateur de progression pour accéder à plus d'options pour votre formulaire multipage.
D'abord, personnalisez votre Indicateur de progression. Cette fonctionnalité indique aux utilisateurs le nombre de pages de votre formulaire et la page sur laquelle ils se trouvent actuellement. Dans le menu déroulant Indicateur de progression, vous pouvez masquer cette fonctionnalité en sélectionnant Aucun.
Ou, vous pouvez choisir parmi les trois styles d'Indicateur de progression : Barre de progression, Cercles ou Connecteur.
Barre de progression :
Voici un aperçu en direct avec le format Barre de progression.
Cercles :
Connecteur :
Remarque : L'indicateur de progression Connecteur peut ne pas s'afficher correctement sur les appareils mobiles. Pour de meilleurs résultats sur tous les appareils, y compris les mobiles, nous vous recommandons d'utiliser les options Barre de progression ou Cercles.
Pour sélectionner une couleur pour votre Indicateur de progression, utilisez le sélecteur de couleur ou entrez le code HEX de la couleur que vous souhaitez utiliser.
Enfin, entrez un nom pour la première page de votre formulaire dans le champ Titre de la page.
Permettre aux visiteurs de naviguer entre les pages
Si vous souhaitez que les visiteurs se déplacent entre les pages en cliquant sur l'indicateur de progression, sélectionnez Cercles ou Connecteur dans le menu déroulant Indicateur de progression.
Ensuite, activez l'option Autoriser la navigation par page.
Lorsque ce paramètre est activé, les visiteurs peuvent cliquer sur un numéro de page ou une étape du connecteur dans l'indicateur de progression pour passer à une autre page de votre formulaire.
Toutes les informations qu'un visiteur a déjà saisies dans le formulaire resteront en place pendant qu'il navigue entre les pages avant de soumettre le formulaire.
Options avancées de saut de page
Dans les options du champ Première page, vous pouvez personnaliser davantage les paramètres de saut de page en cliquant sur l'onglet Avancé.
Ici, vous trouverez les paramètres suivants :
- Alignement de la navigation par page : Choisissez où placer les boutons de navigation de votre formulaire (Gauche, Droite, Centre ou Divisé).
- Désactiver l'animation de défilement : Empêchez le défilement automatique vers le haut de la page lorsque les utilisateurs cliquent sur le bouton Suivant.
Vous pouvez également ajouter des classes CSS ici. Ce code personnalisé ne s'appliquera qu'au premier champ de saut de page de votre formulaire. Pour ajouter des classes CSS à d'autres champs de saut de page, cliquez sur le champ concerné dans la zone d'aperçu et sélectionnez l'onglet Avancé dans le panneau Options de champ.
Questions fréquemment posées
Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes concernant les formulaires multipage.
Puis-je ignorer les pages vides dans mon formulaire multipage ?
Oui, vous pouvez ignorer les pages vides dans les formulaires multipage. Pour savoir comment, consultez notre guide sur l'omission des sauts de page lors de l'utilisation de la logique conditionnelle.
Puis-je configurer mon formulaire multipage pour passer automatiquement à la page suivante en fonction d'une sélection ?
Oui, vous pouvez configurer votre formulaire multipage pour passer automatiquement à la page suivante lorsqu'un utilisateur fait une sélection. Pour des instructions détaillées sur la configuration, veuillez vous référer à notre documentation développeur.
Puis-je supprimer un champ de saut de page après l'avoir ajouté à mon formulaire ?
Oui, vous pouvez supprimer un champ de saut de page, bien que son icône de suppression apparaisse à un endroit différent des autres champs. Alors que la plupart des champs de formulaire affichent leur icône de corbeille sur le bord droit lorsque vous passez la souris dessus, l'icône de suppression du champ de saut de page apparaît à côté du bouton Suivant.
Pour supprimer un champ de saut de page, survolez-le simplement dans la zone d'aperçu et cliquez sur l'icône corbeille à côté du bouton Suivant. Cela supprimera le saut de page et fusionnera les pages.
Et voilà ! Vous pouvez maintenant créer des formulaires multipage avec WPForms.
Ensuite, souhaitez-vous apprendre à ajouter du texte ou des instructions supplémentaires à votre formulaire ? Assurez-vous de consulter notre tutoriel sur l'ajout de texte non-input pour plus de détails.