Comment créer des menus déroulants dans les formulaires WordPress

Les listes déroulantes sont des éléments essentiels des formulaires. Sélection du pays, choix de catégorie, classement des préférences : dès que les utilisateurs doivent choisir dans une liste prédéfinie, les listes déroulantes sont la solution idéale. Elles permettent de gagner de la place, d’uniformiser les données et de guider les utilisateurs vers les options valides. Voici comment créer des menus déroulants efficaces dans vos formulaires WordPress.

Pourquoi utiliser des menus déroulants ?

Avantages par rapport aux champs de texte

• Données standardisées : Aucune faute de frappe ni variation
• Sélection guidée : Les utilisateurs voient les options disponibles
• Gain de place : Réduit jusqu'à ce qu'on clique
• Adapté aux mobiles: Sélecteur natif sur les téléphones
• Achèvement plus rapide : Cliquer vs taper

Avantages par rapport aux boutons radio

• Idéal pour les longues listes : Plus de 6 options tiennent dans un petit espace
• Aspect plus propre : Moins d'encombrement visuel
• Défilable : Gérer des dizaines d'options

Quand utiliser les menus déroulants

• 6 options ou plus (moins d'options = envisager des boutons radio)
• Options prédéfinies et connues
• Une seule sélection requise
• L'espace est limité
• La normalisation des données est importante

Création d'un menu déroulant de base

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

1. Ouvrez votre formulaire dans AFB
2. Trouvez Déroulante dans les types de champs
3. Faites glisser vers votre formulaire

Étape 2 : Configurer l’étiquette

Libellé : « Comment avez-vous entendu parler de nous ? » Espace réservé : « Choisissez une option… » Obligatoire : Oui/Non

Étape 3 : Ajouter des options

Saisissez chaque option sur une nouvelle ligne :

Recherche Google Réseaux sociaux Ami ou collègue Publicité Blog ou article Autre

Étape 4 : prévisualiser et tester

1. Enregistrer le formulaire
2. Aperçu sur le frontend
3. Cliquez sur le menu déroulant pour vérifier les options
4. Soumettre l'entrée de test

Options de configuration du menu déroulant

Réglages de base

• Étiquette: Question ou suggestion
• Espace réservé: Texte par défaut (par exemple, « Sélectionnez… »)
• Obligatoire: Vous devez sélectionner pour soumettre
• Texte d'aide : Instructions additionnelles

Options et paramètres

• Liste des options : Choix disponibles
• Sélection par défaut : Option présélectionnée
• consultable: Saisissez votre filtre
• Sélection multiple : Choisissez plusieurs

Ajout d'options de menu déroulant

Liste simple

Option 1 Option 2 Option 3 Option 4

Avec des valeurs différentes des étiquettes

Exposer une chose, en ranger une autre :

Affichage : « États-Unis » Valeur : « É.-U. » Affichage : « Royaume-Uni » Valeur : « RU »

Options groupées (Optgroups)

--- Amérique du Nord --- États-Unis Canada Mexique --- Europe --- Royaume-Uni Allemagne France

De nombreuses options

Pour les listes longues, considérez :

• Par ordre alphabétique
• Les options les plus courantes en premier
• Fonction de recherche activée
• Groupements logiques

Texte d'espace réservé

Qu'est-ce qu'un espace réservé ?

Le texte affiché avant que l'utilisateur ne sélectionne une option :

[Sélectionnez une option... ▼] ← Espace réservé

Bons exemples de placeholder

« Sélectionnez votre pays… » « Choisissez une catégorie… » « Choisissez un créneau horaire… » « -- Veuillez sélectionner -- » « Sélectionnez-en un »

Meilleures pratiques provisoires

• Soyez bref
• Précisez bien qu'il s'agit d'une invite
• Ne pas utiliser comme option valable
• Considérez le format « – Sélectionner – ».

Menus déroulants de recherche

Qu'est-ce qui est consultable ?

Les utilisateurs peuvent saisir du texte pour filtrer les options :

[Saisissez votre recherche... ▼] L'utilisateur saisit : « ger » Résultats : Allemagne, Algérie, Niger

Quand activer la recherche

• Plus de 20 options
• Listes de pays/états
• Catalogues de produits
• Toute longue liste

Activation de la recherche

1. Sélectionnez le champ déroulant
2. Trouver l'option « Recherchable »
3. Activer

UX consultable

1. L'utilisateur clique sur la liste déroulante. 2. Un champ de saisie de texte apparaît. 3. L'utilisateur saisit une correspondance partielle. 4. Les options sont filtrées en temps réel. 5. L'utilisateur sélectionne une option dans la liste filtrée.

Listes déroulantes à sélection multiple

Sélection unique ou multiple

Sélection unique : l’utilisateur choisit UNE SEULE option. Sélection multiple : l’utilisateur choisit PLUSIEURS options.

Quand utiliser la sélection multiple

• « Sélectionnez toutes les réponses qui s’appliquent »
• Intérêts/préférences multiples
• Sélection de plusieurs catégories
• Lorsque les cases à cocher prenaient trop d'espace

Activation de la sélection multiple

1. Sélectionnez le champ déroulant
2. Trouvez « Autoriser les sélections multiples »
3. Activer

Apparence à sélection multiple

[Conception web, référencement, marketing ▼] Éléments sélectionnés affichés sous forme d'étiquettes/puces

Sélection multiple avec limites

Combiner avec la sélection min/max :

« Sélectionnez 2 à 4 sujets » Min : 2 Max : 4

Exemples de configuration

Exemple 1 : Sélection du pays

Libellé : « Pays » Espace réservé : « Sélectionnez votre pays… » Recherche possible : Oui Obligatoire : Oui Options : [Plus de 195 pays par ordre alphabétique]

Exemple 2 : Type de requête

Libellé : « Quel est l’objet de votre demande ? » Espace réservé : « Sélectionnez une catégorie… » Obligatoire : Oui Options : - Ventes - Assistance - Facturation - Partenariat - Presse/Médias - Autre

Exemple 3 : Plage budgétaire

Libellé : « Quel est votre budget ? » Texte d'espace réservé : « Sélectionnez une fourchette… » Obligatoire : Non Options : - Moins de 1 000 $ - 1 000 $ - 5 000 $ - 5 000 $ - 10 000 $ - 10 000 $ - 25 000 $ - Plus de 25 000 $ - Je ne sais pas encore

Exemple 4 : Créneau horaire

Libellé : « Heure de rendez-vous souhaitée » Espace réservé : « Choisissez une heure… » Obligatoire : Oui Options : - 9h00 - 10h00 - 11h00 - 1h00 - 2h00 - 3h00 - 4h00

Exemple 5 : Intérêts à sélection multiple

Libellé : « Sujets d’intérêt » Espace réservé : « Sélectionnez des sujets… » Sélection multiple : Oui Recherche : Oui Options : - Technologie - Commerce - Marketing - Conception - Développement - Analyse - Sécurité - IA/ML

Exemple 6 : Services groupés

Étiquette : « De quel service avez-vous besoin ? » Options : --- Services Web --- - Conception de sites Web - Développement de sites Web - Commerce électronique --- Marketing --- - Référencement (SEO) - Publicité au clic (PPC) - Réseaux sociaux --- Assistance --- - Maintenance - Hébergement - Conseil

Sélection par défaut

Aucun défaut (recommandé)

[Sélectionnez une option... ▼]

L'utilisateur doit choisir activement. Idéal pour les champs obligatoires.

Valeur par défaut présélectionnée

[États-Unis ▼] ← Présélectionné

À utiliser lorsque :

• Une option est extrêmement courante.
• Accélère le remplissage des formulaires
• Il existe une valeur par défaut logique

Définition par défaut

1. Dans la liste des options, cochez l'option par défaut.
2. Ou définissez la « valeur par défaut » dans les paramètres

Liste déroulante ou boutons radio

Utiliser le menu déroulant lorsque

• Plus de 6 options
• Liste longue (pays, états)
• L'espace est limité
• Les options sont similaires par nature

Utilisez les boutons radio lorsque

• 2-5 options
• Toutes les options devraient être visibles.
• Les options ont des descriptions
• La comparaison visuelle est importante

Comparaison côte à côte

MENU DÉROULANT (6 options ou plus, masquées jusqu'à ce qu'on clique dessus) : [Choisissez un forfait… ▼] BOUTONS RADIO (2 à 5 options, toutes visibles) : ○ Gratuit ○ Basique (9 $/mois) ○ Pro (29 $/mois) ○ Entreprise (Nous contacter)

Menus déroulants de style

Apparence par défaut

Les listes déroulantes héritent du style du formulaire :

• couleur/rayon de la bordure
• Couleur de fond
• Police de caractères/taille
• Rembourrage

Options de style personnalisées

• icône de flèche déroulante
• Apparence de l'élément sélectionné
• états de survol des options
• Style des balises à sélection multiple

Style mobile

Menus déroulants natifs pour mobiles :

• iOS : Sélecteur de roue
• Android : Sélecteur de matériaux
• Conformément au système d'exploitation

Pratiques d'excellence

1. Classer les options de manière logique

• Alphabétique: Pays, noms
• Numérique: Quantités, gammes
• Fréquence : Le plus courant en premier
• Chronologique: Créneaux horaires, dates

2. Limitez la taille des options.

Correct : « États-Unis » À éviter : « États-Unis d’Amérique (USA) » Correct : « 1 000 $ - 5 000 $ » À éviter : « Entre mille et cinq mille dollars »

3. Inclure « Autre » le cas échéant

Options : - Google - Facebook - LinkedIn - Parrainage d'un ami - Autre ← Gère les cas particuliers

4. Utilisez un espace réservé, pas la première option.

Correct : Texte d’espace réservé : « Sélectionnez… » Options : Option 1, Option 2, Option 3 À éviter : Options : « Sélectionnez… », Option 1, Option 2 (La première option ne doit pas être une invite)

5. Activer la recherche dans les listes longues

Toute liste déroulante comportant plus de 15 à 20 options devrait être consultable.

6. Tenez compte des performances de chargement

Les listes extrêmement longues (plus de 1000 éléments) peuvent nécessiter :

• Chargement paresseux
• Recherche côté serveur
• Décomposition en sous-catégories

Cas d'utilisation courants des menus déroulants

Formulaires de contact

- Service (Ventes, Assistance, Facturation) - Type de demande (Question, Commentaires, Réclamation) - Comment avez-vous entendu parler de nous ?

Formulaires d'inscription

- Pays - État/Province - Secteur d'activité - Taille de l'entreprise - Intitulé/fonction du poste

Formulaires de commande

- Sélection du produit - Quantité - Variantes de taille/couleur - Mode de livraison

Formulaires d'enquête

- Échelles d'évaluation (1-10) - Fréquence (Jamais à Toujours) - Accord (Fortement en désaccord à Fortement d'accord)

Formulaires de réservation

- Type de service - Date souhaitée - Créneau horaire - Durée

Dépannage

Options non affichées dans le menu déroulant

• Vérifiez que les options sont bien enregistrées.
• Vérifier si la liste d'options est vide
• Vider le cache et actualiser

La recherche ne fonctionne pas

• Confirmer que la fonction de recherche est activée
• Vérifier les erreurs JavaScript
• Tester dans un autre navigateur

Sélection multiple : toutes les sélections ne sont pas enregistrées.

• Vérifiez que la sélection multiple est activée.
• Gestion des soumissions de formulaires de vérification
• Test avec moins de sélections

Le sélecteur mobile n'apparaît pas

• Les styles personnalisés peuvent remplacer les styles natifs
• Test sur un appareil mobile réel
• Vérifier les conflits JavaScript

Accessibilité

Navigation au clavier

• Appuyez sur la touche Tab pour sélectionner le menu déroulant
• Utilisez les flèches directionnelles pour naviguer
• Appuyez sur Entrée/Espace pour sélectionner
• Saisissez la première lettre pour passer à l'étape suivante

Lecteurs d'écran

• Étiquette correctement associée
• Options annoncées
• Sélection confirmée

Pratiques d'excellence

• Étiquettes claires et descriptives
• Ordre logique des options
• Évitez de considérer un espace réservé comme seule instruction

Résumé

Création de menus déroulants :

1. Ajouter un champ déroulant – Glisser pour former
2. Définir l'étiquette – Question/invite claire
3. Ajouter un espace réservé – Texte « Sélectionnez… »
4. Saisissez les options – Un par ligne
5. Activer la recherche – Pour les longues listes
6. Activer la sélection multiple – Si plusieurs choix sont nécessaires
7. Ensemble requis – En fonction des besoins du formulaire
8. Testez minutieusement – Toutes les options, tous les appareils

Conclusion

Les listes déroulantes permettent une sélection efficace des options dans les formulaires. Elles optimisent l'espace, uniformisent les données et fonctionnent parfaitement sur tous les appareils. Pour les listes courtes, privilégiez les boutons radio. Pour les listes longues, activez la recherche. Pour les sélections multiples, utilisez le mode de sélection multiple. Bien configurées, les listes déroulantes deviennent de puissants champs de saisie qui améliorent l'expérience utilisateur et la qualité des données.

Générateur de formulaires automatiques Inclut des listes déroulantes complètes avec mode de recherche, option de sélection multiple et style personnalisé. Créez des menus déroulants professionnels en quelques minutes.

Prêt à ajouter des menus déroulants ? Télécharger Auto Form Builder et commencez dès aujourd'hui à créer des formulaires avec des menus déroulants.