Listes à cases à cocher à sélection multiple : permettre aux utilisateurs de choisir plusieurs options
« Sélectionnez toutes les réponses qui s'appliquent. » C'est l'une des instructions les plus courantes dans les formulaires, et les cases à cocher permettent de la mettre en œuvre. Les listes à choix multiples avec cases à cocher permettent aux utilisateurs de sélectionner plusieurs options parmi une liste prédéfinie ; elles sont idéales pour les centres d'intérêt, les préférences, les services et toute situation où une seule réponse ne suffit pas.
Dans ce guide, vous apprendrez à créer des listes de cases à cocher à sélection multiple efficaces pour vos formulaires WordPress.
Quand utiliser les cases à cocher à sélection multiple
Parfait pour
- Sélection des centres d'intérêt : « Quels sujets vous intéressent ? »
- Demande de service : « Quels services vous intéressent ? »
- Préférences relatives aux fonctionnalités : « De quelles fonctionnalités avez-vous besoin ? »
- méthodes de contact: « Comment souhaitez-vous que nous vous contactions ? »
- Besoins alimentaires: « Des restrictions alimentaires ? »
- Compétences/expertise : « Sélectionnez vos domaines d’expertise »
- Questions du sondage : «Lesquels avez-vous essayés ?»
Principales caractéristiques
- Plusieurs sélections sont autorisées (contrairement aux boutons radio).
- Aucune sélection possible (sauf si nécessaire)
- Toutes les options sont visibles simultanément.
- Choix indépendants (en choisir un n'affecte pas les autres)
Cases à cocher à sélection multiple vs. alternatives
| Les cases à cocher | Boutons radio | Liste déroulante à sélection multiple |
|---|---|---|
| Sélections multiples | Sélection unique uniquement | Sélections multiples |
| Toutes les options visibles | Toutes les options visibles | Options masquées jusqu'à ce qu'on clique dessus |
| Idéal pour 3 à 10 options | Idéal pour 2 à 5 options | Bon pour de nombreuses options |
| Facile à numériser | Facile à numériser | Compact mais nécessite une interaction |
Création de cases à cocher à sélection multiple
Étape 1 : Ajouter un champ de case à cocher
- Ouvrez votre formulaire dans AFB
- Faites glisser Case à cocher champ à ajouter à votre formulaire
- Cliquez pour configurer
Étape 2 : Rédigez votre question
Exemples d'étiquettes :
- « Quels services vous intéressent ? »
- « Sélectionnez vos préférences »
- « De quelles fonctionnalités avez-vous besoin ? »
- « Comment avez-vous entendu parler de nous ? »
Texte d'aide :
- « Sélectionnez toutes les réponses qui s’appliquent »
- « Choisissez-en autant que vous le souhaitez »
- « Cochez toutes les options pertinentes »
Étape 3 : Ajoutez vos options
Saisissez chaque option sur une nouvelle ligne :
Conception web, référencement (SEO), marketing de contenu, gestion des réseaux sociaux, marketing par e-mail, publicité payante
Étape 4 : Choisir la mise en page
Disposition verticale
☐ Option 1 ☐ Option 2 ☐ Option 3 ☐ Option 4 ☐ Option 5
Idéal pour:
- Étiquettes d'options plus longues
- Affichage adapté aux mobiles
- Numérisation facile
- Plus de 5 options
Disposition horizontale
☐ Option A ☐ Option B ☐ Option C ☐ Option D
Idéal pour:
- Étiquettes courtes
- 3-4 options
- Écran compact
Disposition de la grille
☐ Option 1 ☐ Option 2 ☐ Option 3 ☐ Option 4 ☐ Option 5 ☐ Option 6
Idéal pour:
- Plusieurs options (6-12)
- Étiquettes de longueur similaire
- Utilisation efficace de l'espace
Étape 5 : Configurer les règles de sélection
Champs requis
- Activer si l'utilisateur doit sélectionner au moins un élément.
- Erreur si aucune option n'est sélectionnée lors de la soumission
Sélections minimales
- Définir un nombre minimum de choix
- «Veuillez sélectionner au moins 2 options»
Sélections maximales
- Limiter le nombre de sélections possibles
- « Sélectionnez jusqu’à 3 options »
- Priorisation des forces
Fonctionnalités spéciales des cases à cocher
Sélectionnez toutes les options
Ajouter une case à cocher « Tout sélectionner » :
Fonctionnement :
- Un seul clic permet de sélectionner toutes les options
- Cliquer à nouveau désélectionne tout
- Pratique pour les longues listes
Bon pour:
- Listes où la sélection de tout est courante
- « Oui, tout m'intéresse. »
- Abonnements aux newsletters par thème
Activer dans les paramètres : Activer/désactiver l'option « Tout sélectionner » sur
Option « Autre » avec zone de texte
Autoriser les entrées personnalisées :
☐ Option A ☐ Option B ☐ Option C ☐ Autre : [________________]
Fonctionnement :
- « Autre » apparaît comme dernière option
- Une fois coché, le champ de texte apparaît
- L'utilisateur saisit sa réponse personnalisée
Bon pour:
- Impossible de prédire toutes les réponses possibles
- Enquêtes et recherches
- Découvrir de nouvelles options
Activer dans les paramètres : Activer/désactiver « Autre option » sur
Option « Aucune des réponses ci-dessus »
Désinscription explicite :
☐ Option A ☐ Option B ☐ Option C ☐ Aucune des réponses ci-dessus
Fonctionnement :
- Sélectionner « Aucun » désélectionne généralement les autres options.
- L'utilisateur indique explicitement « aucun ne s'applique ».
- Différent de laisser le vide
Bon pour:
- Enquêtes exigeant une réponse définitive
- Distinguer « aucun » de « sauté »
- Questions obligatoires (alors qu'aucune ne s'applique)
Exemples de cases à cocher à sélection multiple
Formulaire d'intérêt pour le service
Étiquette: « Quels services vous intéressent ? »
Texte d'aide : « Sélectionnez toutes les réponses qui s’appliquent »
Options :
- ☐ Conception de sites web
- ☐ Développement de sites web
- ☐ Optimisation SEO
- ☐ Rédaction de contenu
- ☐ Marketing des médias sociaux
- ☐ Marketing par e-mail
- ☐ Publicité payante (PPC)
- ☐ Création de marque et de logo
Réglages: Disposition verticale requise
Préférences de contact
Étiquette: « Comment préférez-vous que nous vous contactions ? »
Options :
- ☐ Courriel
- ☐ Appel téléphonique
- ☐ Message texte
Réglages: Obligatoire (au moins un), disposition horizontale
Besoins alimentaires (événement)
Étiquette: « Avez-vous des exigences alimentaires particulières ? »
Options :
- ☐ Végétarien
- ☐ Végan
- ☐ Sans gluten
- ☐ Sans produits laitiers
- ☐ Allergie aux noix
- ☐ Halal
- ☐ Casher
- ☐ Autre : [________]
- ☐ Aucun
Réglages: Optionnel, option « Autre » activée, disposition verticale
Évaluation des compétences (Candidature à un emploi)
Étiquette: « Sélectionnez vos compétences techniques »
Texte d'aide : « Cochez toutes les réponses qui s’appliquent »
Options :
- ☐ HTML/CSS
- ☐ JavaScript
- ☐ Réagir
- ☐ PHP
- ☐ WordPress
- ☐ Python
- ☐ SQL/Bases de données
- ☐ Git/Gestion de versions
Réglages: Mise en page en grille (2 colonnes), minimum 3 requis
Sujets de la newsletter
Étiquette: « Sur quels sujets souhaitez-vous être informé(e) ? »
Options :
- ☐ Actualités du secteur
- ☐ Mises à jour du produit
- ☐ Conseils et tutoriels
- ☐ Études de cas
- ☐ Événements et webinaires
- ☐ Offres spéciales
Réglages: Option « Tout sélectionner » activée, facultative
Sondage : Comment avez-vous entendu parler de nous ?
Étiquette: « Comment avez-vous entendu parler de nous ? »
Texte d'aide : « Sélectionnez toutes les réponses qui s’appliquent »
Options :
- ☐ Recherche Google
- ☐ Réseaux sociaux (Facebook, Instagram, etc.)
- ☐ Ami ou collègue
- ☐ Publicité en ligne
- ☐ Blog ou article
- ☐ Courriel
- ☐ Salon professionnel/Événement
- ☐ Autre : [________]
Réglages: Obligatoire, « Autre » activé
Hiérarchisation des fonctionnalités
Étiquette: « Quelles sont vos 3 principales priorités ? »
Texte d'aide : « Sélectionnez exactement 3 options »
Options :
- ☐ Vitesse/Performance
- ☐ Sécurité
- ☐ Facilité d'utilisation
- ☐ Personnalisation
- ☐ Service client
- ☐ Prix
- ☐ Options d'intégration
- ☐ Compatibilité mobile
Réglages: Minimum 3, Maximum 3
Concevoir des listes d'options efficaces
Écrire de bonnes options
Soyez précis
Vague: « Services de marketing »
Spécifique: « Marketing sur les réseaux sociaux », « Marketing par e-mail », « Référencement »
Des étiquettes concises
Trop long: « Services d’optimisation pour les moteurs de recherche de votre site web »
Mieux: « Services de référencement »
Utiliser une structure parallèle
Inconsistant:
- Web design
- J'ai besoin d'aide pour le référencement (SEO).
- Menu
Cohérent:
- Création de Site Web
- SEO Services
- Rédaction de Contenu
Ordonner de manière logique
- Alphabétique (pour les longues listes)
- Par ordre de popularité (du plus courant au plus ancien)
- Par regroupement par catégorie
- Par ordre de flux de travail
Combien d'options ?
| que vous avez | Recommandation |
|---|---|
| 2-3 | Réfléchissez à la nécessité d'ajouter des cases à cocher. |
| 4-7 | Idéal pour les cases à cocher |
| 8-12 | Utilisez une mise en page en grille, envisagez le regroupement. |
| 12 | Envisagez une liste déroulante à sélection multiple ou des catégories |
Messages de validation
Champs requis
«Veuillez sélectionner au moins une option»
Minimum non atteint
« Veuillez sélectionner au moins [X] options »
Maximum dépassé
« Vous pouvez sélectionner un maximum de [X] options »
Messages personnalisés
Adaptez votre réponse à votre question :
- « Veuillez nous indiquer les services qui vous intéressent. »
- « Sélectionnez vos 3 principales priorités »
- « Choisissez au moins un mode de contact »
Pratiques d'excellence
1. Ajoutez toujours « Sélectionnez toutes les réponses qui s’appliquent ».
Dans l'étiquette ou le texte d'aide, indiquez clairement que plusieurs sélections sont autorisées.
2. Envisager l’option « Autre » pour les questions ouvertes
Si vous ne pouvez pas lister toutes les possibilités, ajoutez une option « Autre » avec une zone de texte.
3. Utilisez « Aucun » lorsque cela est approprié.
Pour les questions où « aucune ne s'applique » n'est une réponse valable, veuillez l'indiquer explicitement.
4. Adapter la mise en page au contenu
- Options courtes → Horizontal ou Grille
- Options longues → Verticales
- Plusieurs options → Grille
5. Ne pré-vérifiez pas les options
Laissez les utilisateurs faire leurs propres choix. La pré-coche peut :
- Résultats biaisés
- Je me sens manipulatrice
- Violation du RGPD en matière de consentement marketing
6. Fixez des limites lorsque cela est nécessaire
Si vous souhaitez une priorisation, limitez les sélections :
- « Choisissez vos 3 préférés » avec un maximum de 3
- Des choix réfléchis des forces
7. Options liées au groupe
Pour les listes longues, envisagez plusieurs champs de cases à cocher par catégorie plutôt qu'une seule liste gigantesque.
Considérations relatives aux appareils mobiles
Conception tactile conviviale
- Cibles tactiles suffisamment grandes
- Espacement adéquat entre les options
- Cliquer sur l'étiquette coche la case
Disposition verticale préférée
Sur les écrans mobiles :
- Les mises en page horizontales s'enroulent de façon abrupte.
- L'affichage vertical est plus facile à lire.
- Test sur des appareils réels
Dépannage
Options non enregistrées
- Assurez-vous que les options sont correctement ajoutées.
- Vérifiez les lignes vides
- Enregistrer le formulaire et actualiser
Sélectionner tout ne fonctionne pas
- La fonction de vérification est activée.
- Vérifier les conflits JavaScript
- Vider le cache
La mise en page ne s'affiche pas correctement.
- Vérifier les paramètres de mise en page
- Le CSS du thème peut remplacer
- Test avec le thème par défaut
Questions fréquemment posées
Combien d'options est-ce trop ?
Plus de 12 options peuvent vite devenir difficiles à gérer. Pensez à les regrouper par catégories, à utiliser plusieurs champs à cases à cocher ou à opter pour une liste déroulante à sélection multiple.
Dois-je utiliser des cases à cocher ou une liste déroulante à sélection multiple ?
Utilisez des cases à cocher lorsque le nombre d'options est limité (3 à 10) et que vous souhaitez les afficher toutes. Optez pour une liste déroulante à sélection multiple lorsque le nombre d'options est important et que l'espace est restreint.
Puis-je définir à la fois une valeur minimale et une valeur maximale ?
Oui. Exemple : « Sélectionnez entre 2 et 5 options » avec min=2 et max=5.
Comment obtenir exactement les 3 requis ?
Définissez les valeurs minimale et maximale à 3. Les utilisateurs doivent sélectionner exactement 3 options.
Que se passe-t-il si les utilisateurs ont besoin d'une option qui n'est pas répertoriée ?
Activez l’option « Autre » qui propose un champ de texte pour les entrées personnalisées.
Résumé
Création de listes à cases à cocher à sélection multiple :
- Ajouter un champ de case à cocher – Glisser pour former
- Formulez une question claire – Inclure « sélectionnez toutes les réponses qui s’appliquent »
- Ajoutez des options bien rédigées – Concis, parallèle, ordonné
- Choisissez une mise en page appropriée. Choisissez une disposition appropriée. – Vertical, horizontal ou en grille
- Configurer les règles de sélection – Obligatoire, min/max si nécessaire
- Activer les options spéciales – Sélectionner tout, Autre, Aucun
- Tester sur mobile – Garantir l’utilisabilité
Conclusion
Les listes à cases à cocher à sélection multiple sont essentielles pour recueillir de multiples préférences, intérêts et choix. Grâce à une conception d'options appropriée, des mises en page pertinentes et des fonctionnalités intelligentes comme « Tout sélectionner » et « Autre », vous créerez des champs de sélection conviviaux qui collecteront les données dont vous avez besoin.
Générateur de formulaires automatiques Ce module propose des champs de cases à cocher complets avec des dispositions verticales, horizontales et en grille, l'option « Tout sélectionner », une option « Autre » avec zone de texte, l'option « Aucune des réponses ci-dessus » et des limites de sélection minimales et maximales. Tout ce dont vous avez besoin pour créer des questionnaires à choix multiples professionnels.
Prêt à créer des formulaires à sélection multiple ? Télécharger Auto Form Builder et laisser les utilisateurs choisir toutes les réponses qui s'appliquent.
