Souhaitez-vous que vos visiteurs puissent prévisualiser leurs entrées de formulaire avant de les envoyer ?
Le fait de permettre aux utilisateurs de prévisualiser leurs entrées réduit considérablement les risques d'erreurs et d'imprécisions lorsqu'ils remplissent les formulaires.
WPForms dispose d'un champ "Aperçu de l'entrée" que vous pouvez facilement ajouter à vos formulaires, afin que vos utilisateurs puissent voir un résumé rapide de leurs entrées pendant et après la soumission.
Dans cet article, nous allons vous montrer comment ajouter le champ Entry Preview et le personnaliser de différentes manières dans WPForms.
Créer un formulaire avec des aperçus de saisie maintenant
Comment prévisualiser un formulaire avant de le soumettre ?
Suivez notre tutoriel étape par étape pour apprendre comment ajouter un aperçu de soumission à vos formulaires.
Dans cet article
Commençons.
1. Installer WPForms
Pour commencer, choisissez un plan WPForms approprié et enregistrez votre compte. Ensuite, connectez-vous à votre compte WPForms et cliquez sur l'onglet Téléchargements. Cela ouvrira une page où vous pourrez cliquer sur le bouton Télécharger WPForms pour télécharger le fichier zip.
Pendant que vous êtes sur cette page, assurez-vous de copier votre clé de licence. Vous en aurez besoin plus tard lorsque vous activerez WPForms Pro sur votre site WordPress.
Une fois le fichier zip téléchargé sur votre ordinateur, ouvrez votre tableau de bord d'administration WordPress et cliquez sur Plugins " Ajouter un nouveau. Ensuite, cliquez sur le bouton Upload Plugin.
Maintenant, cliquez sur le bouton Choose File et choisissez le fichier du plugin que vous venez de télécharger.
Cliquez sur Installer maintenant lorsque le fichier est téléchargé.
WPForms va maintenant s'installer sur votre site WordPress. Cela ne devrait prendre que quelques secondes. Lorsque l'installation est terminée, cliquez sur le bouton Activer le plugin.
Cliquez maintenant sur WPForms " Settings. Cela ouvrira l'onglet "General settings" par défaut. Faites défiler vers le bas pour trouver le champ License Key et entrez votre clé ici (que vous avez copiée plus tôt).
Ensuite, cliquez sur le bouton Vérifier la clé. Ceci complètera l'installation de WPForms Pro sur votre site.
2. Ajouter un nouveau formulaire
Ouvrez maintenant la zone d'administration WordPress de votre site et cliquez sur WPForms " Add New dans la barre latérale de gauche. Vous pouvez maintenant donner un nom à votre formulaire afin de le retrouver plus facilement par la suite.
Faites défiler vers le bas pour sélectionner un modèle et commencer à construire votre formulaire. Comme tous les champs de WPForms, le champ Aperçu de l'entrée est supporté par la plupart des 2,000+ modèles de formulaires disponibles.
Lorsque vous avez sélectionné un modèle, nous allons ajouter le champ Aperçu de l'entrée dans l'étape suivante.
3. Ajouter le champ de prévisualisation de l'entrée de formulaire
Dans l'exemple suivant, nous utilisons un formulaire de prise de rendez-vous personnalisé, mais vous êtes libre d'utiliser le modèle de formulaire de votre choix.
Pour ajouter une fonction de prévisualisation à votre formulaire, il vous suffit de faire glisser le champ Aperçu de l'entrée depuis le volet gauche du générateur vers le volet droit, où se trouvent les champs de votre formulaire.
Lorsque vous ajoutez le champ Aperçu de l'entrée à votre formulaire, celui-ci ajoute automatiquement une nouvelle page où l'aperçu apparaîtra.
Voici comment l'aperçu apparaît en action lorsqu'un utilisateur remplit un formulaire :
Vous pouvez également placer le champ Aperçu de l'entrée plusieurs fois dans votre formulaire. Par exemple, si vous avez un formulaire de plusieurs pages, vous pouvez placer un champ Aperçu de la saisie après chaque page. Cela signifie que vos utilisateurs peuvent prévisualiser les informations qu'ils ont saisies dans les pages précédentes tout en continuant à remplir le reste du formulaire.
L'ajout de plusieurs champs de prévisualisation des entrées dans vos formulaires longs est un excellent moyen de s'assurer que vos utilisateurs sont en mesure de prévisualiser leurs entrées et de revenir en arrière à tout moment pour apporter des modifications si nécessaire.
4. Personnaliser l'avis et le style de l'aperçu
WPForms vous permet de personnaliser la notice de prévisualisation. Il suffit de cliquer sur le champ Aperçu de l'entrée dans la vue de votre constructeur de formulaire pour ouvrir les paramètres du champ.
Vous pouvez utiliser le bouton de basculement Afficher l'avis de prévisualisation pour afficher le message au-dessus de l'aperçu de l'entrée ou le masquer complètement.
Vous avez également la possibilité de modifier l'avis de prévisualisation à votre guise ou de laisser le message par défaut tel quel.
Vous pouvez ensuite modifier le style de l'aperçu de l'entrée. Cliquez sur l'onglet Avancé dans les options du champ Aperçu d'entrée pour choisir parmi 4 styles d'aperçu différents :
- De base
- Compact
- Tableau
- Table, compacte
Le style par défaut est Basique, qui affiche un aperçu ligne par ligne de l'entrée du formulaire.
Si vous souhaitez donner à votre aperçu un aspect plus serré, vous pouvez opter pour le style compact .
Ceci complète la configuration du champ Aperçu de l'entrée dans vos formulaires. Mais il existe un autre type d'aperçu d'entrée que vous pouvez ajouter, comme nous le montrons dans l'étape suivante.
5. Ajouter la confirmation de l'aperçu de l'entrée
En plus des aperçus d'entrée qui apparaissent lorsque vous remplissez un formulaire, WPForms vous permet également d'afficher des aperçus après qu' un utilisateur ait soumis un formulaire.
Contrairement au champ Aperçu de l'entrée, vos utilisateurs n'ont pas la possibilité de modifier leurs entrées lorsqu'une confirmation d'aperçu est affichée. Au lieu de cela, elle leur montre seulement une copie de leur soumission qui ne peut plus être modifiée.
Pour configurer les confirmations de l'aperçu de l'entrée, allez dans Réglages " Confirmations dans le générateur de formulaires WPForms. Ici, vous pouvez activer le bouton Afficher l'aperçu de la saisie après le message de confirmation.
Lorsque vous avez activé cette option, vous verrez apparaître une liste déroulante qui vous permettra de choisir un style de prévisualisation, comme nous l'avons montré ci-dessus pour les champs de prévisualisation d'entrée.
Vous pouvez toujours utiliser les aperçus d'entrée (qui apparaissent lorsqu'un formulaire est en train d'être rempli) ainsi que la confirmation d'aperçu (qui n'apparaît qu'après l'envoi des entrées). Vous pouvez aussi n'utiliser que l'une ou l'autre de ces options. Tout dépend de vos préférences et de ce que vous souhaitez obtenir avec vos formulaires.
Et voilà ! Vous pouvez désormais permettre à vos utilisateurs de prévisualiser un formulaire avant de le soumettre.
Pourquoi afficher un aperçu de l'entrée ?
La possibilité de prévisualiser les entrées est très utile, surtout lorsqu'il s'agit de formulaires plus longs et plus complexes.
Il est normal de faire des fautes de frappe et des erreurs en remplissant un formulaire, mais un aperçu avant envoi vous permet de vérifier l'exactitude des informations avant d'appuyer sur le bouton d'envoi.
Donc, si vous voulez minimiser les erreurs et donner à vos utilisateurs la possibilité de corriger toute erreur avant la soumission, vous devriez inclure le champ de prévisualisation de l'entrée offert par WPForms.
Ensuite, appliquer des restrictions d'accès aux formulaires WordPress
Voulez-vous restreindre vos formulaires WordPress aux seuls utilisateurs connectés ? WPForms vous permet de sélectionner les niveaux de permission des utilisateurs en fonction de leur état de connexion. Consultez notre article sur comment restreindre les formulaires WordPress aux utilisateurs connectés pour en savoir plus.
Vous pouvez également lire notre guide sur les meilleurs plugins de barre de notification WordPress pour promouvoir vos ventes et vos offres spéciales sur votre site.
Créer un formulaire avec des aperçus de saisie maintenant
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.
L'info est sympa, mais la façon de faire une confirmation totale du formulaire n'est pas très claire. Situation : nous avons un formulaire multi-pages et nous voulons confirmer l'ensemble du formulaire à la fin. Pas chaque page séparément.
Bonjour Karina,
L'aperçu des entrées devrait fonctionner sans problème avec les pages multiples. Pour les pages multiples, nous recommandons de placer l'aperçu des entrées sur sa propre page, à la fin du formulaire, afin que les utilisateurs ne le voient qu'après avoir rempli le reste des champs. De cette façon, vous pourrez voir l'aperçu complet du formulaire.
Si cela peut vous aider, voici notre excellent article sur le sujet.
J'espère que cela vous aidera !
Est-il possible d'afficher également la description des champs dans l'aperçu ? Pour l'instant, nous pouvons les afficher, merci.
Bonjour Claudio,
Actuellement, nous ne disposons pas d'une fonctionnalité native permettant d'afficher la description du champ dans l'aperçu de l'entrée avant la soumission. J'ai ajouté votre vote pour que cette fonctionnalité soit prise en compte à l'avenir.
Merci !
J'utilise les boutons radio multi-items de Stripe. Est-ce qu'il y a un moyen d'empêcher l'aperçu de montrer le montant qui sera facturé à l'intérieur de ce bouton ?
Par exemple, j'ai le montant dans le texte du bouton radio. Il est déroutant de l'afficher deux fois.
Hey Sharon - Nous ne disposons pas actuellement de la fonctionnalité permettant de désactiver/masquer le prix dans l'aperçu du formulaire. Je suis d'accord pour dire que ce serait une fonctionnalité pratique, et je vais l'ajouter à notre outil de suivi des demandes de fonctionnalités pour qu'elle soit dans le collimateur de vos développeurs.