Souhaitez-vous sauter les sauts de page dans votre formulaire lorsque la logique conditionnelle n'est pas respectée ? Lorsque vous utilisez la logique conditionnelle avec des sauts de page, la page suivante est affichée même si les conditions ne sont pas remplies, laissant les utilisateurs avec une page vide. Avec un simple extrait de JavaScript, vous pouvez facilement sauter ces pages inutiles.
Dans ce tutoriel, nous allons vous montrer comment sauter des pages vides avec un simple extrait de JavaScript.
Création du formulaire
Tout d'abord, vous devez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires. Nous avons créé un formulaire de devis qui comporte plusieurs sauts de page.
Sur la première page, nous recueillons des informations de base sur les utilisateurs. Nous avons également ajouté un champ à choix multiple pour leur demander s'ils souhaitent obtenir un devis gratuit en personne à ce moment-là.
S'il choisit Oui, nous afficherons la deuxième page et lui demanderons quelques informations personnelles. En revanche, s'il choisit Non, nous voulons sauter la deuxième page et passer directement à la dernière page du formulaire.
Mise en place de la logique conditionnelle
Dans notre exemple, nous ne voulons afficher les champs Date/Heure et Adresse sur la deuxième page que si les visiteurs ont sélectionné sur la première page qu'ils sont intéressés par un devis gratuit en personne. Cela permettra à nos visiteurs de gagner du temps s'ils ne sont pas intéressés, et nous pourrons sauter cette page s'ils ne souhaitent pas la visiter.
Les deux champs de la deuxième page auront tous la même logique. Pour configurer la logique, sélectionnez chaque champ et cliquez sur Logique intelligente. Ensuite, activez la logique conditionnelle.
Dans le menu déroulant, sélectionnez la question sur laquelle vous avez basé vos champs. Pour ce tutoriel, notre question était un champ à choix multiple qui demandait : " Souhaitez-vous prendre rendez-vous pour un devis gratuit en personne ?
Notre condition est que si la réponse au champ à choix multiple est Oui, le champ doit être affiché. Si la réponse est Non, le champ est masqué.
Chaque rubrique de la deuxième page aura la même logique, vous devrez donc répéter cette étape pour chacune d'entre elles. Vous pouvez également utiliser la rubrique Disposition pour regrouper des rubriques similaires, puis activer la logique conditionnelle pour la rubrique Disposition.
Ajout de l'extrait
Vous devez maintenant ajouter l'extrait ci-dessous à votre site. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, veuillez consulter ce tutoriel.
Ce snippet parcourt en boucle chaque page de votre formulaire pour déterminer si l'une d'entre elles est vide. S'il y a une page vide, le script sautera complètement cette page et passera à la suivante. Cela améliorera l'expérience globale de votre formulaire.
Questions fréquemment posées
Nous répondons ci-dessous à quelques-unes des questions les plus fréquentes sur l'utilisation de la logique conditionnelle dans les formulaires multipages.
Q : Ce snippet fonctionnera-t-il dans une fenêtre modale comme une popup Elementor ?
R : Pas pour l'instant.
Voilà, c'est fait ! Vous avez maintenant appris à sauter des pages si elles sont cachées dans votre formulaire grâce à une logique conditionnelle.
Vous souhaitez afficher ou masquer le bouton Submit d'un formulaire en fonction de l'un de ses champs ? Consultez notre tutoriel sur l'affichage conditionnel du bouton Soumettre.