Comment créer une liste déroulante avec des sélections multiples ?

Les listes déroulantes multisélectionnées facilitent l'utilisation des grandes listes dans les formulaires. Ce n'est pas la seule façon d'ajouter une longue liste avec plusieurs options sélectionnables dans un formulaire, mais c'est l'approche la plus concise.

Et lorsqu'il s'agit de concevoir des formulaires que les gens veulent réellement remplir, vous avez besoin d'un outil qui n'allonge pas votre formulaire au-delà du strict nécessaire.

Pourtant, je vois des sites web qui utilisent de grandes listes de contrôle dans des situations où ils auraient pu créer un design plus propre s'ils avaient opté pour un menu déroulant multi-sélection.

D'après ce que j'ai vu, cela est dû soit au fait que le constructeur de formulaires ne prend pas en charge les listes déroulantes multi-sélection, soit au fait que le créateur n'y a pas prêté attention.

Je me suis donc dit qu'il fallait que je fasse un petit guide pour montrer à quel point il est facile d'ajouter des menus déroulants à vos formulaires dans WordPress avec des options multi-sélection.

Comment configurer un champ déroulant multi-sélection dans WordPress

Commençons par installer le plugin que nous allons utiliser.

Étape 1 : Installer le plugin WPForms

Tout d'abord, vous avez besoin d'un constructeur de formulaire qui supporte les listes déroulantes multi-sélectionnées. Je recommande WPForms parce que je pense sincèrement qu'aucun autre plugin de formulaire WordPress n'offre la flexibilité et le gain de temps au même niveau.

Par exemple, avec les dropdowns de WPForms, vous pouvez :

• Ajouter des options de sélection multiple dans les listes déroulantes dans les versions gratuites et payantes
• Générer et ajouter automatiquement de longues listes d'options grâce à l'IA

Bien que vous puissiez utiliser WPForms Lite ou WPForms Pro pour créer des dropdowns avec multi-sélection, j'utiliserai WPForms Pro dans ce guide (voir WPForms Lite vs Pro pour en savoir plus sur les principales différences entre les deux versions).

Vous installez un plugin pour la première fois ? C'est très simple. Vous pouvez suivre les étapes d'installation décrites dans notre doc guide.

Une fois installé, vous pouvez commencer à créer vos formulaires immédiatement.

Étape 2 : Créer un nouveau formulaire

Ouvrez votre menu d'administration WordPress. Passez votre curseur sur WPForms dans la barre latérale et cliquez sur Ajouter un nouveau.

Cette action permet de charger l'écran de configuration du formulaire. Dans cet exemple, je souhaite créer un formulaire de demande de livre. Je vais donc donner un nom approprié au formulaire pour ma référence interne et choisir un modèle.

Pour des raisons de simplicité, je vais utiliser le formulaire de contact simple et le personnaliser un peu plus tard en ajoutant une liste déroulante.

N'oubliez pas que vous avez le choix entre plus de 2 000 modèles de formulaires. Vous pouvez même générer l'intégralité du formulaire à l'aide de l'IA.

Mais afin de mieux démontrer les fonctionnalités et les personnalisations, j'utiliserai la voie manuelle pour cette fois.

Après avoir sélectionné votre modèle, le générateur de formulaires se chargera en quelques secondes.

Chaque modèle de WPForms est 100% personnalisable. Vous pouvez donc facilement insérer de nouveaux champs, supprimer des champs existants, ou modifier d'autres paramètres.

Dans l'étape suivante, j'ajouterai un champ déroulant avec une liste assez large de choix sélectionnables.

Étape 3 : Ajouter un champ déroulant

Tout d'abord, faisons glisser une liste déroulante sur le formulaire.

Cliquez ensuite sur le champ pour que les paramètres s'ouvrent à gauche.

Dans le volet de gauche, vous verrez différentes options. Vous pouvez notamment modifier l'intitulé du champ et saisir les choix de votre liste déroulante.

Commençons par donner un nom plus pertinent et plus descriptif au champ en changeant l'étiquette. Puisque je veux ajouter une liste de livres que les gens peuvent demander dans ce champ, je l'intitule "Livres à demander".

Il est maintenant temps d'ajouter les choix pour votre liste déroulante. Il est assez facile d'ajouter des choix manuellement lorsque vous n'en avez que quelques-uns.

Mais si vous avez une longue liste, vous pouvez gagner beaucoup de temps en laissant l'IA générer et ajouter les choix pour vous.

Pour utiliser l'IA pour les choix, cliquez sur le bouton violet Générer des choix .

Maintenant, décrivez les choix en termes simples et WPForms AI générera votre liste pour vous presque instantanément. Je veux ajouter une liste de livres populaires (qui seront probablement disponibles dans toute bibliothèque digne de ce nom), et c'est ce que je vais demander dans l'invite.

En quelques secondes, j'ai eu une liste fantastique avec laquelle je pouvais travailler. Mais si vous voulez changer la liste massivement, vous pouvez essayer de modifier votre invite et demander à WPForms AI de mettre à jour la liste.

Une fois que vous êtes satisfait des suggestions, cliquez sur Insérer les choix.

Les choix générés apparaîtront dans la liste des choix du volet de gauche. Vous pouvez également modifier manuellement ces choix.

Par défaut, un visiteur ne peut sélectionner qu'un seul choix à la fois dans la liste déroulante. Mais il est facile de modifier ces paramètres, comme je le montrerai à l'étape suivante.

Étape 4 : Modifier les paramètres du champ déroulant pour activer la sélection multiple

Par défaut, un visiteur ne peut sélectionner qu'un seul choix à la fois dans la liste déroulante. Pour changer cela, il faut d'abord aller dans l'onglet Avancé du champ de la liste déroulante.

Ensuite, cliquez sur la sélection d'options multiples pour l'activer.

C'est génial ! Nous avons presque terminé. Mais personnellement, je ne suis pas fan du style Dropdown classique (qui est le style par défaut).

La liste déroulante se présente alors sous la forme d'une boîte rectangulaire à défilement vertical, et vous devez appuyer sur Ctrl(Commande sur Mac) pour sélectionner plusieurs options.

Vous pouvez rendre le champ déroulant plus intuitif en changeant le style de classique à moderne.

Il y a trois raisons pour lesquelles le style moderne fonctionne mieux pour un menu déroulant à sélection multiple :

• Le champ de style moderne affiche une ligne avec une flèche pour développer la liste. Il est plus compact que le style classique, qui affiche toujours 4 lignes et prend plus de place à l'écran.
• Le champ de style moderne vous permet de cliquer sur plusieurs entrées sans maintenir aucune touche du clavier. Avec le champ classique, votre visiteur devra maintenir la touche Contrôle ou Commande de son clavier pour sélectionner plus d'une entrée à la fois.
• La liste déroulante multi-sélection de Modern syle est dotée d'un champ de recherche, ce qui permet de trouver rapidement l'article souhaité.

Sauvegardons les progrès réalisés jusqu'à présent en cliquant sur le bouton Enregistrer en haut du générateur de formulaires.

Nous pouvons maintenant publier le formulaire. C'est la dernière étape, et elle ne prend que quelques minutes.

Étape 5 : Publier votre formulaire

Maintenant que nous avons rempli le formulaire, il est temps de le publier sur votre site WordPress.

WPForms vous permet de publier vos formulaires où vous le souhaitez. Vous pouvez les ajouter à :

• Postes
• Pages
• Encadrés
• Le pied de page de WordPress.

Dans cet exemple, nous allons créer une nouvelle page pour le formulaire.

Pour commencer, cliquez sur Embed en haut du générateur de formulaires.

Maintenant, allons-y et cliquons sur Créer une nouvelle page.

Tapez un nom pour votre page, puis cliquez sur Let's Go.

WordPress ouvrira la nouvelle page et affichera un aperçu de votre formulaire. Cliquez sur le bouton bleu Publier en haut à droite.

Votre formulaire avec la liste déroulante multi-sélection est maintenant en ligne et prêt à être utilisé.

Et c'est tout ! Vous avez appris à créer facilement une liste déroulante multi-sélection dans WordPress.

Créez votre formulaire WordPress maintenant

Étape suivante : Diviser votre formulaire en pages

Si vous cherchez des moyens de rendre votre formulaire plus compact, pensez à le diviser en plusieurs pages. Cela peut rendre les longs formulaires beaucoup plus faciles à lire.

• Pour savoir comment ajouter des sauts de page à un formulaire, lisez notre guide sur la création d'un formulaire à plusieurs étapes.
• Pour créer un formulaire en plusieurs étapes conçu pour augmenter les conversions et les prospects, consultez la rubrique Comment créer un formulaire de prospects.

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.