Résumé IA
Vous souhaitez afficher ou masquer des champs de formulaire en fonction de l'âge d'un utilisateur ? En combinant le champ Sélecteur de date de WPForms avec une logique conditionnelle personnalisée, vous pouvez créer des formulaires dynamiques qui s'adaptent aux saisies de l'utilisateur.
Ce guide vous montrera comment afficher un champ déroulant uniquement lorsque l'utilisateur indique qu'il a 21 ans ou plus – parfait pour le contenu soumis à une restriction d'âge, les inscriptions à des événements ou des scénarios similaires.
Configuration de votre formulaire
Tout d'abord, créez un formulaire avec ces champs :
- Champ de nom
- Champ d'e-mail
- Champ de date (pour la date de naissance)
- Champ déroulant (celui-ci sera masqué initialement)
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.
Ajout de la classe CSS
Comme nous voulons que le champ Déroulant soit masqué lorsque le formulaire se charge pour la première fois, nous devons lui ajouter un nom de classe CSS.
Pour ce faire, sélectionnez le champ Déroulant dans votre éditeur de formulaire et cliquez sur Avancé. Ensuite, faites défiler jusqu'à Classes CSS et entrez age-restriction. Assurez-vous de cliquer sur Enregistrer sur le formulaire pour conserver vos modifications.
Utilisation de la logique conditionnelle pour un champ de date
Il est maintenant temps d'ajouter l'extrait de code à votre site. Ce code masquera d'abord le champ Déroulant lors du chargement du formulaire. Ensuite, chaque fois que le champ Date de naissance change, il calculera si l'utilisateur a 21 ans ou plus et affichera ou masquera le champ Déroulant en conséquence.
N'oubliez pas de mettre à jour ces valeurs dans le code :
- L'ID du formulaire (2575 dans l'exemple) doit être remplacé par votre propre ID de formulaire
- L'ID du champ Sélecteur de date (22 dans l'exemple) doit être remplacé par votre ID de champ
Et c'est tout ce dont vous avez besoin pour utiliser la logique conditionnelle avec un champ sélecteur de date. Ensuite, souhaitez-vous modifier la position de la fenêtre contextuelle du sélecteur de date ? Consultez notre tutoriel sur Comment modifier la position de la fenêtre contextuelle du sélecteur de date.