Résumé IA
Vous voulez montrer aux utilisateurs des aperçus de leurs entrées avant ou après qu'ils aient soumis votre formulaire ? Notre champ Aperçu d'entrée vous permet d'ajouter facilement une page d'aperçu à n'importe quel formulaire sur votre site. De plus, nos paramètres de confirmation de formulaire vous permettent également d'afficher des aperçus d'entrées dans vos confirmations.
Ce guide vous montrera comment utiliser le champ Aperçu d'entrée et le paramètre de confirmation dans WPForms.
Dans cet article
Avant de plonger dans le tutoriel ci-dessous, assurez-vous que WPForms est installé et activé sur votre site WordPress. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour ouvrir le constructeur de formulaires et accéder au champ Aperçu d'entrée.
Ajouter un champ Aperçu d'entrée à votre formulaire
Tout d'abord, vous devrez ajouter un champ Aperçu d'entrée à votre formulaire. Ce champ n'est disponible qu'avec une licence payante, vous le trouverez donc sous Champs fantaisistes dans le constructeur de formulaires.
Cliquez sur Aperçu d'entrée ou faites-le glisser dans la zone d'aperçu pour l'ajouter à votre formulaire.
L'ajout d'un champ Aperçu d'entrée à votre formulaire ajoutera également automatiquement un champ de saut de page et divisera votre formulaire en plusieurs pages.
Remarque : Pour plus de détails sur les options disponibles pour les sauts de page dans WPForms, veuillez consulter notre tutoriel sur les formulaires multipages.
Le champ Aperçu d'entrée nécessite un formulaire multipage pour fonctionner, et vous ne pouvez pas supprimer le champ de saut de page qu'il ajoute à votre formulaire à moins de supprimer d'abord le champ Aperçu d'entrée.
Dans la plupart des cas, nous recommandons de placer l'aperçu d'entrée à la fin de votre formulaire afin que les utilisateurs ne voient l'aperçu qu'après avoir rempli tous les champs.
Remarque : Bien que vous puissiez ajouter d'autres champs à votre formulaire après le champ Aperçu d'entrée, il n'affichera que les données des pages de formulaire précédentes.
Par exemple, si vous placez un champ Aperçu d'entrée sur la deuxième page d'un formulaire de 3 pages, il n'affichera que les entrées et sélections de l'utilisateur à partir des champs de la première page du formulaire.
Personnaliser votre champ Aperçu d'entrée
Ensuite, cliquez sur le champ Aperçu d'entrée dans la zone d'aperçu du constructeur de formulaires pour ouvrir ses options de champ.
Ici, vous pouvez utiliser le bouton Afficher l'avis d'aperçu pour afficher ou masquer un message supplémentaire avant l'aperçu d'entrée.
Vous pouvez également personnaliser l'avis qui apparaîtra au-dessus de l'aperçu d'entrée lorsque ce formulaire sera publié sur votre site.
Ce champ accepte du texte ainsi que des balises HTML.
Choisir un style d'aperçu d'entrée
Dans l'onglet des options de champ Avancé, vous pouvez choisir parmi 4 styles différents pour l'aperçu d'entrée de votre formulaire : Basique, Compact, Tableau, ou Tableau, Compact.
Toutes ces options affichent les mêmes informations, juste dans des mises en page différentes.
Le style d'aperçu d'entrée basique
Le style Aperçu de saisie de base est une liste simple d'étiquettes de champ suivie des entrées ou sélections de l'utilisateur. Voici un exemple de la façon dont ce style apparaît sur le frontend.
Le style Aperçu de saisie compact
Le style Compact utilise du texte, tout comme le style de base, mais place les étiquettes de champ et les entrées de l'utilisateur dans des colonnes séparées afin qu'elles occupent moins d'espace sur la page.
Note : Vous souhaitez en savoir plus sur les moyens de condenser vos formulaires ? Consultez notre tutoriel sur les dispositions multicolonnes.
Le style Aperçu de saisie en tableau
Le style Tableau affiche les saisies dans un tableau avec des lignes ombrées pour distinguer les étiquettes de champ des entrées de l'utilisateur.
Le style Aperçu de saisie compact en tableau
Enfin, le style Compact en tableau place les saisies dans un tableau avec des colonnes séparées pour les étiquettes de champ et les entrées de l'utilisateur.
Ajouter du CSS personnalisé à un champ Aperçu d'entrée
Vous pouvez également ajouter des classes CSS personnalisées dans le champ Classes CSS des options avancées du champ.
Note : Vous souhaitez en savoir plus sur l'utilisation des classes CSS personnalisées dans WPForms ? Consultez notre guide pour ajouter du CSS personnalisé à vos formulaires pour plus de détails.
Configurer les confirmations d'aperçu d'entrée
Vous pouvez utiliser des confirmations d'aperçu de saisie à la place ou en plus du champ Aperçu de saisie.
Le champ Aperçu de saisie permet aux utilisateurs de revenir en arrière et de modifier leurs entrées ou sélections. Cela peut être utile si vous souhaitez permettre aux visiteurs de corriger les erreurs dans leurs saisies avant de soumettre votre formulaire.
Cependant, il existe des situations où vous voudrez peut-être permettre aux utilisateurs de prévisualiser leurs saisies sans leur donner la possibilité de modifier leurs entrées ou sélections. Dans ces cas, vous pouvez utiliser une confirmation d'aperçu de saisie à la place.
Pour ce faire, allez dans Paramètres » Confirmations dans le constructeur de formulaire. Pour toute confirmation que vous avez créée, vous pouvez activer l'option Afficher l'aperçu de la saisie après le message de confirmation.
Note : Besoin d'aide pour configurer les confirmations de votre formulaire ? Nos tutoriels sur les paramètres de confirmation WPForms et la création de confirmations de formulaire conditionnelles contiennent tous les détails.
Une fois ce paramètre activé, une liste déroulante apparaîtra où vous pourrez sélectionner le style d'aperçu de saisie que vous souhaitez utiliser pour cette confirmation.
Assurez-vous de sauvegarder vos modifications avant de quitter le constructeur de formulaire. Sur le frontend, votre confirmation d'aperçu de saisie pourrait ressembler à ceci.
C'est tout ! Vous pouvez maintenant laisser les utilisateurs prévisualiser leurs saisies avant ou après la soumission de vos formulaires.
Ensuite, souhaitez-vous apprendre à gérer les saisies des utilisateurs ? Consultez notre guide complet des saisies dans WPForms pour tous les détails.