Résumé IA
Souhaitez-vous permettre à vos utilisateurs de sélectionner plusieurs options dans un champ Liste déroulante ? L'ajout d'une liste déroulante à sélection multiple à vos formulaires WordPress permet à vos utilisateurs de sélectionner de nombreuses options sans avoir à utiliser un champ Cases à cocher.
Sélectionnez ensuite l'option intitulée Sélection de plusieurs options pour l'activer.
Premiers pas
Avant de commencer, vous devrez créer un nouveau formulaire ou modifier un formulaire existant.
Pour notre exemple, nous allons configurer un formulaire de demande d'adhésion à un club sportif. Pour ce faire, nous commencerons par ouvrir le constructeur de formulaires.
Ensuite, naviguez vers la section Champs standard pour trouver le champ Liste déroulante. Cliquez simplement sur le champ pour l'ajouter au formulaire, ou faites-le glisser dans la zone de prévisualisation de votre formulaire.
Une fois le champ ajouté, cliquez dessus pour ouvrir son panneau Options de champ.
Ensuite, nous allons changer le Libellé de ce champ pour qu'il indique Sélectionnez le(s) club(s) dont vous souhaitez en savoir plus. Nous ajouterons également 4 options sous Choix : Natation, Tir à l'arc, Cricket et Danse.
Dans les Options de champ, naviguez vers la section Avancé et cliquez dessus pour ouvrir des paramètres supplémentaires.
Ensuite, sélectionnez l’option intitulée Sélection de plusieurs options pour l’activer.
Options de personnalisation
Deux configurations de style différentes sont disponibles pour le champ Liste déroulante : Classique ou Moderne. Celles-ci formateront le style de la liste déroulante de manière légèrement différente. Vous pouvez changer le style de votre champ Liste déroulante sous Avancé » Style.
Style Classique
Le style Classique listera toutes vos options dans une boîte. Lorsque plus de 4 options sont ajoutées à la liste déroulante, la boîte inclura une barre de défilement verticale.
Remarque : Le style Classique affichera toujours au moins quatre lignes, même s'il n'y a pas de données dans ces lignes.
Pour sélectionner plusieurs options, maintenez la touche Control (ou Commande sur Mac) enfoncée tout en cliquant. Cela ajoutera un effet de surbrillance aux choix que vous avez sélectionnés.
Style Moderne
Le style Moderne affichera une liste déroulante standard. Cette liste déroulante vous permet soit de faire défiler une liste d'options et de sélectionner vos choix, soit de taper des termes de recherche pour trouver les choix que vous souhaitez.
Lorsque plusieurs options sont sélectionnées, chaque option sera ajoutée à la barre déroulante.
Configuration de la logique conditionnelle
La configuration de la logique conditionnelle avec une liste déroulante à sélection multiple vous permettra d'afficher ou de masquer des champs si un utilisateur sélectionne plus d'un choix dans la liste déroulante.
Par exemple, dans notre formulaire de demande d'adhésion à un club sportif, nous afficherons un message aux utilisateurs s'ils sélectionnent à la fois Natation et Danse dans la liste déroulante. Dans notre message, nous leur ferons savoir que ces clubs se réunissent à des horaires conflictuels.
Pour configurer cela, nous allons d'abord ajouter un champ HTML à notre formulaire.
Ensuite, dans la section Code, nous pouvons ajouter notre message : « Attention ! Les clubs que vous avez choisis se réunissent à des horaires conflictuels. »
Ensuite, nous devrons configurer notre logique conditionnelle afin que le champ n'apparaisse que lorsque les utilisateurs sélectionnent Natation et Danse. Pour ce faire, nous cliquerons sur la section Logique intelligente pour l'ouvrir, puis sélectionnerons l'option Activer la logique conditionnelle.
Ensuite, nous réglerons la logique pour qu'elle se lise : Afficher ce champ si Sélectionnez le(s) club(s) dont vous souhaitez en savoir plus est Natation ET Sélectionnez le(s) club(s) dont vous souhaitez en savoir plus est Danse.
Ce champ restera désormais masqué à moins qu'un utilisateur ne sélectionne à la fois Natation et Danse dans notre champ Liste déroulante.
Remarque : Pour plus de détails sur l'utilisation de l'opérateur ET, consultez notre guide sur la logique conditionnelle intelligente.
Et voilà ! Vous pouvez maintenant configurer un champ Liste déroulante à sélection multiple dans votre WPForms.
Ensuite, souhaitez-vous ajouter facilement un grand nombre d'options pour un champ Liste déroulante, Choix multiples ou Cases à cocher ? Consultez notre tutoriel sur la façon de ajouter des choix en masse pour plus de détails !