Menús desplegables de selecció múltiple: trieu diverses opcions

Els desplegables estàndard obliguen els usuaris a triar només una opció. Però què passa si han de seleccionar-ne diverses? Serveis que els interessen, dies que estan disponibles, funcions que volen: moltes preguntes tenen diverses respostes vàlides. Els desplegables de selecció múltiple permeten als usuaris triar diverses opcions d'un únic camp que utilitza menys espai.

En aquesta guia, aprendràs a crear desplegables de selecció múltiple que permetin als usuaris triar diverses opcions als formularis de WordPress.

Què és un menú desplegable de selecció múltiple?

Menú desplegable estàndard

• Feu clic per obrir les opcions
• Selecciona UNA opció
• Tancament desplegable
• Un valor emmagatzemat

Menú desplegable de selecció múltiple

• Feu clic per obrir les opcions
• Seleccioneu MÚLTIPLES opcions
• Es manté obert per a més seleccions
• Múltiples valors emmagatzemats

Diferència visual

Estàndard:

Serveis: [Disseny web ▼] (Només una selecció)

Selecció múltiple:

Serveis: [Disseny web, SEO, Màrqueting ▼] (Es mostren diverses seleccions)

Quan s'han d'utilitzar els menús desplegables de selecció múltiple

Perfecte per

• Serveis interessats en: "Selecciona tots els serveis que necessitis"
• Dies disponibles: "Quins dies et van bé?"
• Característiques desitjades: "Seleccioneu les funcions que us interessin"
• categories: "Seleccioneu totes les opcions que corresponguin"
• Habilitats/expertesa: "Quines són les teves habilitats?"
• Preferències: "Selecciona les teves preferències"

Quan s'han d'utilitzar les caselles de selecció

Guia de decisions

• 2-6 opcions: Utilitza caselles de selecció
• 7-15 opcions: Menú desplegable de selecció múltiple
• Més de 15 opcions: Selecció múltiple amb cerca

Creació de menús desplegables de selecció múltiple

Pas 1: Afegir un camp desplegable

1. Obre el formulari a FIG
2. Arrossegar Dropdown camp al vostre formulari
3. Feu clic per configurar els paràmetres

Pas 2: Activa la selecció múltiple

1. Cerqueu l'opció "Permetre seleccions múltiples"
2. Activa o desactiva
3. El menú desplegable ara accepta múltiples opcions

Pas 3: Afegir opcions

Introduïu cada opció en una nova línia:

Disseny web SEO Màrqueting de continguts Xarxes socials Màrqueting per correu electrònic PPC Publicitat Branding Analítica

Pas 4: Configura la configuració

• Label: "Serveis interessats en"
• Reservat: "Seleccioneu totes les opcions que corresponguin"
• requerit: Activa/desactiva segons la necessitat
• Text d'ajuda: "Mantingueu premuda la tecla Ctrl/Cmd per seleccionar-ne diverses" (si cal)

Pas 5: Establir límits de selecció (opcional)

• Seleccions mínimes: Com a mínim X opcions
• Seleccions màximes: No més de X opcions

Exemples de configuració de selecció múltiple

Selecció de serveis

Label: "En quins serveis estàs interessat?"

Reservat: "Seleccioneu totes les opcions que corresponguin"

requerit: Sí

Seleccions mínimes: 1

Opcions:

• Disseny de pàgines web
• Desenvolupament de llocs web
• E-commerce
• SEO
• Redacció de contingut
• Gestió de mitjans socials
• Email Màrqueting
• Publicitat de pagament
• Branding
• Consultoria

Dies disponibles

Label: "Quins dies estàs disponible?"

Reservat: "Selecciona els dies disponibles"

requerit: Sí

Seleccions mínimes: 1

Opcions:

• Dilluns
• Dimarts
• Dimecres
• Dijous
• Divendres
• Dissabte
• Diumenge

Habilitats personals i professionals

Label: "Selecciona les teves àrees d'especialització"

Reservat: "Seleccioneu totes les opcions que corresponguin"

requerit: Sí

Seleccions mínimes: 1

Seleccions màximes: 5

Opcions:

• JavaScript
• Pitó
• PHP
• Reaccionar
• Vue.js
• NODE.JS
• WordPress
• Database Management
• DevOps
• Disseny UI / UX

Restriccions dietètiques

Label: "Alguna restricció dietètica?"

Reservat: "Seleccioneu si escau"

requerit: no

Opcions:

• Vegetarià
• Vegetarià
• Sense gluten
• Dairy-Gratis
• Al·lèrgia als fruits secs
• kosher
• halal
• Sense restriccions

Preferències de comunicació

Label: "Com vol que ens posem en contacte amb vostè?"

Reservat: "Seleccioneu els mètodes preferits"

requerit: Sí

Seleccions mínimes: 1

Opcions:

• Correu electrònic
• Trucada telefònica
• Missatge de text
• WhatsApp
• Videotrucada

Interessos de l'esdeveniment

Label: "Quines sessions t'interessen?"

Reservat: "Seleccioneu les sessions a les quals assistir"

requerit: Sí

Seleccions mínimes: 1

Opcions:

• Discurs principal
• Taller A: Màrqueting
• Taller B: Vendes
• Taller C: Tecnologia
• Panell de discussió
• Dinar de networking
• Cerimònia de cloenda

Límits de selecció

Seleccions mínimes

Per què utilitzar-lo:

• Assegureu-vos de triar com a mínim una opció
• Requereix diverses respostes
• Validació d'entrades significatives

Configuració comuna:

• Min 1: "Seleccioneu-ne almenys un"
• Min 2: «Seleccioneu almenys dues opcions»
• Min 3: “Tria els teus 3 millors”

Seleccions màximes

Per què utilitzar-lo:

• Limitar les opcions per al focus
• "Tria els teus 3 millors"
• Limitacions de recursos
• Evitar el comportament de "seleccionar-ho tot"

Configuració comuna:

• Màxim 3: “Tria'n fins a 3”
• Màxim 5: "Seleccioneu no més de 5"
• Màxim de coincidències amb les ranures disponibles

Missatges de validació

• "Seleccioneu com a mínim 1 opció"
• "Seleccioneu almenys 3 opcions"
• "Pots seleccionar fins a 5 opcions com a màxim"
• "Seleccioneu entre 2 i 5 opcions"

Consideracions sobre l'experiència d'usuari

Instruccions clares

A l'etiqueta:

• "Seleccioneu totes les opcions que corresponguin"
• "Tria diverses opcions"
• "Tria els teus 3 millors"

En el marcador de posició:

• "Feu clic per seleccionar diversos..."
• "Seleccioneu les opcions..."

En el text d'ajuda:

• "Pots seleccionar diverses opcions"
• "Seleccioneu entre 1 i 5 opcions"
• "Mantingueu premuda la tecla Ctrl (Cmd en Mac) per seleccionar-ne diverses"

Mostra el recompte seleccionat

Mostra quants elements hi ha seleccionats:

• "3 elements seleccionats"
• “Disseny web, SEO, +2 més”
• Visualització clara de les seleccions actuals

Desselecció fàcil

• Feu clic a l'element seleccionat per desseleccionar-lo
• Botó "X" a cada element seleccionat
• Opció "Esborra-ho tot"

Cerca de llistes llargues

Per a més de 10 opcions, afegeix la cerca:

• Escriu per filtrar les opcions
• Troba elements ràpidament
• Essencial per a més de 20 opcions

Selecció múltiple vs. altres tipus de camp

Menú desplegable de selecció múltiple vs. caselles de selecció

Trieu la selecció múltiple quan:

• Més de 7 opcions
• Espai de formulari limitat
• No totes les opcions han de ser visibles
• Es busca un aspecte visual més net.

Seleccioneu les caselles de selecció quan:

• 6 o menys opcions
• Els usuaris haurien de veure totes les opcions
• Escaneig ràpid important
• Interacció més senzilla preferible

Selecció múltiple vs. múltiples menús desplegables individuals

Mal plantejament:

Primera opció: [Desplegable] Segona opció: [Desplegable] Tercera opció: [Desplegable]

Millor enfocament:

Seleccioneu les vostres opcions: [Menú desplegable de selecció múltiple] (Màxim 3 seleccions)

Botons de selecció múltiple vs. botons d'opció

Botons d'opció = només una selecció. No s'han d'utilitzar mai per a opcions múltiples.

Consideracions sobre mòbils

Selecció tàctil

• Objectius de toc grans
• Fàcil de seleccionar/desseleccionar
• Retroalimentació visual clara

Natiu vs. personalitzat

• La selecció múltiple nativa pot ser incòmoda als dispositius mòbils
• Els desplegables personalitzats sovint milloren l'experiència d'usuari
• Considera una llista de caselles de selecció al mòbil

Visualització d'elements seleccionats

• Mostra les seleccions clarament
• No desbordeu el contenidor
• «3 seleccionats» en comptes de llistar tots els noms

Tractament de dades

Com s'emmagatzemen les dades

Normalment, les seleccions múltiples s'emmagatzemen com a:

• Separats per comes: "Disseny web, SEO, màrqueting"
• Matriu: [“Disseny web”, “SEO”, “Màrqueting”]
• Entrades individuals per selecció

Notificacions per correu electrònic

En els correus electrònics de notificació:

Serveis en què m'interessa: - Disseny web - SEO - Màrqueting de continguts

Exportació CSV

Exportat com a:

• Columna única: “Disseny web, SEO, màrqueting”
• O diverses columnes per opció

Filtratge d'enviaments

• Filtra per selecció específica
• Troba tots els que han seleccionat “SEO”
• Útil per a la segmentació

Patrons comuns

Patró 1: Selecció múltiple obligatòria

Serveis necessaris (seleccioneu-ne com a mínim un): [Menú desplegable de selecció múltiple] Obligatori: Sí Mín: 1

Patró 2: Selecció limitada

Trieu les vostres 3 prioritats principals: [Menú desplegable de selecció múltiple] Mín: 3 Màx: 3

Patró 3: Selecció múltiple opcional

Hi ha alguna restricció dietètica? (opcional) [Menú desplegable de selecció múltiple] Obligatori: No

Patró 4: “Selecciona-ho tot” amb límits

Quines característiques t'interessen? (màxim 5) [Menú desplegable de selecció múltiple] Màxim: 5 Text d'ajuda: "Selecciona fins a 5 característiques"

Accessibilitat

Navegació per teclat

• Tabulador per arribar al menú desplegable
• Tecles de fletxa per navegar per les opcions
• Espai/Intro per seleccionar/desseleccionar
• Escriu per saltar a l'opció

Suport de lector de pantalla

• Anuncia "selecció múltiple" o "tria múltiples opcions"
• Llegeix el recompte seleccionat
• Anunciar canvis de selecció

Esborra les etiquetes

• L'etiqueta indica que es permet la selecció múltiple
• "Seleccioneu totes les opcions que corresponguin"
• "Tria diverses opcions"

Consells estilístics

Visualització d'elements seleccionats

• Etiquetes/xips per a cada selecció
• Clara distinció visual
• Treure el botó de cadascun

Aparença desplegable

• Marques de verificació al costat dels elements seleccionats
• Fons destacat per a la selecció
• Esborra els estats del cursor

Disseny coherent

• Coincideix amb altres estils de camp de formulari
• Mateixa vora, farciment i colors
• Coherent amb els desplegables individuals

Solució de problemes

Seleccions no desades

• Verifica que la selecció múltiple estigui habilitada
• Comprovar la gestió de l'enviament de formularis
• Prova amb vista prèvia del formulari

Només es pot seleccionar un

• L'opció de selecció múltiple no està habilitada
• Comprova la configuració del camp
• Potser s'està utilitzant un tipus de camp incorrecte

La validació no funciona

• Verifica la configuració mínima/màxima
• Comprova l'interruptor necessari
• Prova diferents recomptes de selecció

Problemes de visualització al mòbil

• Prova en un dispositiu mòbil real
• Comprova l'amplada del menú desplegable
• Assegurar que les seleccions siguin visibles

Preguntes freqüents

Quantes opcions poden seleccionar els usuaris?

Per defecte, il·limitat. Estableix un màxim si vols limitar les opcions (per exemple, "Tria fins a 3").

Hauria de fer servir la selecció múltiple o les caselles de selecció?

Caselles de selecció per a 6 opcions o menys (totes visibles). Selecció múltiple per a 7 opcions o més o quan l'espai és limitat.

Puc exigir un nombre mínim de seleccions?

Sí. Estableix seleccions mínimes per garantir que els usuaris triïn com a mínim X opcions.

Com s'emmagatzemen les seleccions múltiples?

Normalment com a valors separats per comes o una matriu. Apareix en enviaments i exportacions com a llista.

Puc afegir una cerca al menú desplegable?

Molts creadors de formularis admeten desplegables amb funció de cerca. Essencial per a més de 15 opcions.

resum

Creació de menús desplegables de selecció múltiple:

1. Afegeix un camp desplegable – Menú desplegable estàndard primer
2. Activa la selecció múltiple – Permetre múltiples seleccions
3. Afegeix opcions – Totes les opcions disponibles
4. Estableix una etiqueta clara – “Seleccioneu totes les opcions que corresponguin”
5. Afegeix un marcador de posició – Guiar els usuaris a seleccionar
6. Estableix els límits de selecció – Mín/màx si cal
7. Afegeix text d'ajuda – Explicar les regles de selecció
8. Prova a fons – Diversos recomptes de selecció

Conclusió

Els desplegables de selecció múltiple resolen elegantment el problema de "triar diversos" opcions. Estalvien espai en comparació amb les llargues llistes de caselles de selecció, mantenen els formularis nets i permeten als usuaris seleccionar exactament allò que els correspon. Feu-los servir per a serveis, dies, funcions, preferències: qualsevol pregunta on hi hagi diverses respostes vàlides i la llista sigui massa llarga per a les caselles de selecció.

Creador de formularis automàtic admet desplegables de selecció múltiple amb límits de selecció i opcions de cerca. Crea formularis flexibles que capturin múltiples opcions en un únic camp fàcil d'utilitzar.

Preparat per a formularis de selecció múltiple? Descarrega el creador de formularis automàtic i permetre als usuaris triar diverses opcions amb facilitat.