Afficher ou masquer des champs de formulaire avec la logique conditionnelle

Utilisez la logique conditionnelle pour afficher ou masquer un champ de formulaire en fonction de la réponse d’un visiteur à un autre champ. Ce guide explique comment configurer les conditions, quels opérateurs sont compatibles avec chaque type de champ et ce qui arrive aux champs masqués lorsqu’un visiteur envoie le formulaire.

La logique conditionnelle est disponible sur tous les formulaires Jetpack.

Fonctionnement de la logique conditionnelleMD

La logique conditionnelle (également appelée champs conditionnels ou règles d’affichage/masquage) permet à la réponse d’un champ de déterminer si un autre champ apparaît dans votre formulaire. Par exemple, un formulaire de réservation pour une séance photo peut demander une date de mariage uniquement lorsque le visiteur sélectionne « Mariage » comme type de séance.

Chaque règle appartient au champ qu’elle contrôle :

• Un champ configuré pour Afficher ce champ est masqué jusqu’à ce que ses conditions soient remplies.
• Un champ configuré pour Masquer ce champ est visible jusqu’à ce que ses conditions soient remplies.
• Un champ sans conditions est toujours visible.

Les champs apparaissent ou disparaissent dès que le visiteur modifie une réponse. La page ne se recharge pas.

Ajouter une logique conditionnelle à un champMD

Pour afficher ou masquer un champ en fonction de la réponse à un autre champ :

1. Ouvrez l’article ou la page contenant votre formulaire, ou ouvrez le formulaire depuis Jetpack → Formulaires.
2. Sélectionnez le champ que vous souhaitez afficher ou masquer.
3. Cliquez sur Ajouter une logique conditionnelle dans la barre d’outils du bloc. Vous pouvez également ouvrir le panneau Logique conditionnelle dans la colonne latérale des réglages du bloc, puis cliquer sur Ajouter des conditions.
4. Sous Action, choisissez Afficher ce champ ou Masquer ce champ.
5. Sous Quand, choisissez si l’une des conditions est vraie pour agir lorsqu’au moins une condition est vraie, ou si toutes les conditions sont vraies pour agir uniquement lorsque toutes les conditions sont vraies.
6. Choisissez un Champ à vérifier, un Opérateur, ainsi qu’une Valeur. Pour les champs Liste déroulante, Choix unique, Choix multiple et Évaluation, sélectionnez la valeur parmi les options de ce champ au lieu de la saisir.
7. Pour ajouter une autre condition, cliquez sur Ajouter une condition et répétez l’étape 6.
8. Cliquez sur Terminé.
9. Cliquez sur Enregistrer ou sur Publier pour conserver vos modifications.

Après avoir cliqué sur Terminé, le panneau Logique conditionnelle décrit la règle en termes simples. Par exemple : Ce champ est affiché si l’une des conditions suivantes est vraie : Quel type de séance ? est « Mariage ». Pour modifier la règle, cliquez sur Modifier les conditions.

Champs compatibles avec la logique conditionnelleMD

Tous les champs de formulaire sont compatibles avec la logique conditionnelle, à l’exception du champ Sélection d’image et du champ HTML personnalisé HTML. Un champ compatible peut être affiché ou masqué par ses propres conditions, et les conditions d’autres champs peuvent vérifier sa réponse. Un champ ne peut pas vérifier sa propre réponse.

Chaque champ vérifié par une condition doit avoir un nom/ID unique. Si deux champs partagent le même nom/ID, la boîte de dialogue des conditions les répertorie comme indisponibles. Cliquez sur Rendez-le unique, ou attribuez à chaque champ son propre nom/ID sous Avancé → Nom/ID dans les paramètres de bloc du champ.

Opérateurs disponibles pour chaque type de champMD

Les opérateurs proposés dépendent du type de champ que vous vérifiez :

• Saisie de texte, Nom, E-mail, Site web, Numéro de téléphone et Texte multiligne : est, n’est pas, contient, ne contient pas, est vide, n’est pas vide.
• Liste déroulante et Choix unique (bouton radio) : est, n’est pas, est vide, n’est pas vide.
• Choix multiple (case à cocher) : contient, ne contient pas, est vide, n’est pas vide.
• Saisie numérique et Curseur : est égal à, n’est pas égal à, est supérieur à, est inférieur à, est au moins égal à, est au plus égal à, est vide, n’est pas vide.
• Évaluation : est égal à, n’est pas égal à, est supérieur à, est inférieur à, est au moins égal à, est au plus égal à, est vide, n’est pas vide. La liste de valeurs va de 1 à la note maximale du champ.
• Sélecteur de date et Saisie de l’heure : est, n’est pas, est antérieur à, est postérieur à.
• Case à cocher et Consentement aux conditions : est cochée, n’est pas cochée.
• Champ masqué : est, n’est pas, contient.
• Importation de fichier : est vide, n’est pas vide.

Effets des champs masqués sur l’envoi des formulairesMD

Lorsqu’un visiteur envoie le formulaire, Jetpack vérifie à nouveau chaque condition sur le serveur. Un champ masqué à ce moment-là est traité comme si le visiteur n’avait jamais été invité à le remplir :

• Il n’est pas validé ; un champ obligatoire masqué n’empêche donc pas l’envoi.
• Sa réponse n’est pas enregistrée. Elle n’apparaît pas dans la réponse, sous Jetpack → Formulaires → Réponses, ni dans l’e-mail de notification ou les données envoyées aux intégrations.
• Il est considéré comme vide pour les conditions des autres champs. Si un visiteur remplit un champ, puis modifie une réponse qui le masque, les conditions qui vérifient le champ masqué le considèrent comme sans réponse.

Logique conditionnelle dans les formulaires à plusieurs étapesMD

Les conditions peuvent vérifier les champs de n’importe quelle étape d’un formulaire à plusieurs étapes. La liste des champs regroupe les champs par étape. Vérifiez les champs de la même étape ou d’une étape précédente. Une condition qui vérifie un champ d’une étape ultérieure le compare à une valeur vide, car le visiteur n’a pas encore répondu à ce champ.

Lorsque les conditions ne sont pas appliquéesMD

• Si vous supprimez un champ vérifié par une condition, cette condition est ignorée. Si toutes les conditions d’un champ sont ignorées, le champ est toujours visible. La boîte de dialogue des conditions affiche « Le champ référencé n’existe plus » afin que vous puissiez sélectionner un autre champ ou supprimer la condition.