Comment créer une liste déroulante avec plusieurs sélections

Les listes déroulantes à sélection multiple facilitent la gestion 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 quand il s'agit de concevoir des formulaires que les gens veulent vraiment remplir, vous avez besoin de quelque chose qui n'allonge pas votre formulaire plus que nécessaire.

Pourtant, je vois des sites web utiliser de grandes listes de contrôle dans des situations où ils auraient pu créer un design plus épuré s'ils avaient opté pour une liste déroulante à sélection multiple.

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 à sélection multiple, soit à l'inattention du créateur.

J'ai donc pensé qu'il serait utile de créer un guide rapide pour montrer à quel point il est facile d'ajouter des listes déroulantes à vos formulaires dans WordPress avec des options de sélection multiple.

Comment configurer un champ de liste déroulante à sélection multiple 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 formulaires qui prend en charge les listes déroulantes à sélection multiple. Je recommande WPForms car je pense sincèrement qu'aucun autre plugin de formulaire WordPress n'offre un niveau de flexibilité et de fonctionnalités de gain de temps comparable.

Par exemple, avec les listes déroulantes 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 de longues listes d'options automatiquement avec l'IA

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

Première installation d'un plugin ? C'est incroyablement facile. Vous pouvez suivre les étapes d'installation décrites dans notre guide de documentation.

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. Survolez WPForms dans la barre latérale, puis cliquez sur Nouveau.

Cette action chargera l'écran de configuration du formulaire. Dans cet exemple, je veux créer un formulaire de demande de livre. Je donnerai donc un nom approprié au formulaire pour ma référence interne et je choisirai un modèle.

Pour simplifier, je vais utiliser le Formulaire de contact simple et le personnaliser un peu en ajoutant une liste déroulante plus tard.

N'oubliez pas qu'il existe plus de 2 100+ modèles de formulaires parmi lesquels choisir. Vous pouvez même générer l'intégralité du formulaire avec l'IA.

Mais afin de mieux démontrer la fonctionnalité et les personnalisations, j'utilise la méthode manuelle pour celui-ci.

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

Chaque modèle dans WPForms est personnalisable à 100 %. 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 de liste déroulante avec une liste assez longue de choix sélectionnables.

Étape 3 : Ajouter un champ de liste déroulante

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

Ensuite, cliquez sur le champ pour que les paramètres s'ouvrent à gauche.

Dans le volet de gauche, vous verrez diverses options. Telles que la modification de l'étiquette du champ et la saisie des choix pour votre liste déroulante.

Donnons d'abord un nom plus pertinent et descriptif au champ en modifiant l'étiquette. Comme je veux ajouter une liste de livres que les gens peuvent demander dans ce champ, j'appelle ce champ « 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 à la place.

Pour utiliser l'IA pour les choix, cliquez sur le bouton violet Générer les 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 n'importe quelle bibliothèque décente), 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 de manière significative, 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 dans le 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 vais vous le montrer à l'étape suivante.

Étape 4 : Modifier les paramètres du champ de liste déroulante 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, allez d'abord dans l'onglet Avancé du champ de liste déroulante.

Après cela, cliquez sur Sélectionner plusieurs options pour l'activer.

Génial ! Nous avons presque terminé ici. Mais je ne suis personnellement pas fan du style de liste déroulante classique (qui est le mode par défaut).

Cela fait apparaître la liste déroulante comme une boîte rectangulaire avec défilement vertical, et vous devez appuyer sur Ctrl (Commande sur Mac) pour sélectionner plusieurs options.

Vous pouvez rendre le champ de liste déroulante plus intuitif en changeant le Style de Classique à Moderne.

Il y a 3 raisons pour lesquelles le style Moderne fonctionne mieux pour une liste déroulante multi-sélection :

• 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 d'espace d'écran.
• Le champ de style Moderne vous permet de cliquer sur plusieurs entrées sans maintenir aucune touche du clavier enfoncée. Avec le champ Classique, votre visiteur devra maintenir la touche Contrôle ou Commande de son clavier enfoncée pour sélectionner plus d'une entrée à la fois.
• La liste déroulante multi-sélection de style Moderne a une boîte de recherche, ce qui permet de trouver rapidement l'élément souhaité.

Enregistrons nos progrès jusqu'à présent en cliquant sur le bouton Enregistrer en haut du constructeur de formulaires.

Maintenant, nous pouvons publier le formulaire. C'est la dernière étape, et cela 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 à :

• Articles
• Pages
• Barres latérales
• Le pied de page WordPress.

Dans cet exemple, créons une nouvelle page pour le formulaire.

Pour commencer, cliquez sur Intégrer en haut du constructeur de formulaire.

Maintenant, cliquons sur Créer une nouvelle page.

Tapez un nom pour votre page, puis cliquez sur C'est parti.

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

Maintenant, votre formulaire avec la liste déroulante à sélection multiple est en ligne et prêt à l'emploi.

Et voilà ! Vous avez appris à créer facilement une liste déroulante à sélection multiple 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, envisagez de le diviser en plusieurs pages. Cela peut rendre les longs formulaires beaucoup plus faciles à parcourir.

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

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.