Llistes de caselles de selecció múltiple: permet que els usuaris triïn diverses opcions

«Seleccioneu totes les opcions que corresponguin». És una de les instruccions més habituals als formularis, i les caselles de selecció són la manera de fer-ho possible. Les llistes de caselles de selecció múltiple permeten als usuaris triar diverses opcions d'una llista predefinida, perfectes per a interessos, preferències, serveis i qualsevol escenari en què una resposta no sigui suficient.

En aquesta guia, aprendràs a crear llistes de caselles de selecció múltiple efectives per als teus formularis de WordPress.

Quan s'han d'utilitzar les caselles de selecció múltiple

Perfecte per

• Selecció d'interessos: "Quins temes t'interessen?"
• Consulta de servei: "En quins serveis estàs interessat?"
• Preferències de funcions: "Quines característiques necessiteu?"
• Mètodes de contacte: "Com vols que ens posem en contacte amb tu?"
• Requisits dietètics: "Alguna restricció dietètica?"
• Habilitats/expertesa: "Selecciona les teves àrees d'especialització"
• Preguntes de l'enquesta: "Quin d'aquests has provat?"

Característiques clau

• Seleccions múltiples permeses (a diferència dels botons de ràdio)
• Cap selecció possible (tret que sigui obligatori)
• Totes les opcions visibles alhora
• Eleccions independents (seleccionar-ne una no afecta les altres)

Caselles de selecció múltiple vs. alternatives

Creació de caselles de selecció múltiple

Pas 1: Afegir un camp de casella de selecció

1. Obre el formulari a FIG
2. Arrossegar Checkbox camp al vostre formulari
3. Feu clic per configurar

Pas 2: Escriu la teva pregunta

Exemples d'etiquetes:

• "Quins serveis t'interessen?"
• "Selecciona les teves preferències"
• "Quines característiques necessiteu?"
• "Com vas saber de nosaltres?"

Text d'ajuda:

• "Seleccioneu totes les opcions que corresponguin"
• "Tria'n tants com vulguis"
• "Marqueu totes les opcions rellevants"

Pas 3: Afegiu les vostres opcions

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

Disseny web Serveis SEO Màrqueting de continguts Gestió de xarxes socials Màrqueting per correu electrònic Publicitat de pagament

Pas 4: Trieu el disseny

Disseny vertical

☐ Opció u ☐ Opció dos ☐ Opció tres ☐ Opció quatre ☐ Opció cinc

Millor per a:

• Etiquetes d'opció més llargues
• Pantalla adaptada a mòbils
• Escaneig fàcil
• Més de 5 opcions

Disseny horitzontal

☐ Opció A ☐ Opció B ☐ Opció C ☐ Opció D

Millor per a:

• Etiquetes curtes
• 3-4 opcions
• Pantalla compacta

Disseny de quadrícula

☐ Opció u ☐ Opció dos ☐ Opció tres ☐ Opció quatre ☐ Opció cinc ☐ Opció sis

Millor per a:

• Moltes opcions (6-12)
• Etiquetes de longitud similar
• Ús eficient de l'espai

Pas 5: Configurar les regles de selecció

Camp necessari

• Habilita si l'usuari ha de seleccionar com a mínim un
• Error si no s'ha seleccionat cap en enviar

Seleccions mínimes

• Estableix el nombre mínim d'opcions
• "Seleccioneu almenys 2 opcions"

Seleccions màximes

• Limita quants es poden seleccionar
• "Selecciona fins a 3 opcions"
• Priorització de forces

Funcions especials de la casella de selecció

Opció Selecciona-ho tot

Afegiu una casella de selecció "Selecciona-ho tot":

Com funciona:

• Un clic selecciona totes les opcions
• Si torneu a fer clic, desseleccionareu-ho tot
• Convenient per a llistes llargues

Bo per:

• Llistes on és habitual seleccionar-ho tot
• «Sí, m'interessa tot»
• Subscripcions a butlletins temàtics

Activa a la configuració: Activa l'opció "Selecciona-ho tot"

Opció «Altres» amb quadre de text

Permet entrades personalitzades:

☐ Opció A ☐ Opció B ☐ Opció C ☐ Altres: [________________]

Com funciona:

• «Altres» apareix com a última opció
• Quan està marcat, apareixerà un camp de text
• L'usuari escriu la seva resposta personalitzada

Bo per:

• No es poden predir totes les respostes possibles
• Enquestes i investigació
• Descobrint noves opcions

Activa a la configuració: Activa "Altres opcions"

Opció "Cap de les anteriors"

Exclusió explícita:

☐ Opció A ☐ Opció B ☐ Opció C ☐ Cap de les anteriors

Com funciona:

• Si seleccioneu "Cap", normalment es desseleccionen els altres.
• L'usuari indica explícitament que "no s'aplica cap".
• Diferent de deixar en blanc

Bo per:

• Enquestes que requereixen una resposta definitiva
• Distingir "cap" d'"omès"
• Preguntes obligatòries on no n'hi podria haver cap d'aplicable

Exemples de caselles de selecció múltiple

Formulari d'interès de servei

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

Text d'ajuda: "Seleccioneu totes les opcions que corresponguin"

Opcions:

• ☐ Disseny web
• ☐ Desenvolupament web
• ☐ Optimització SEO
• ☐ Redacció de continguts
• ☐ Màrqueting a les xarxes socials
• ☐ Màrqueting per correu electrònic
• ☐ Publicitat de pagament (PPC)
• ☐ Disseny de marca i logotip

Ajustaments: Obligatori, disseny vertical

Preferències de contacte

Label: "Com preferiu que us contactem?"

Opcions:

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

Ajustaments: Obligatori (almenys un), Disseny horitzontal

Requisits dietètics (esdeveniment)

Label: "Tens alguna necessitat dietètica?"

Opcions:

• ☐ Vegetarià
• ☐ Vegà
• ☐ Sense gluten
• ☐ Sense lactis
• ☐ Al·lèrgia als fruits secs
• ☐ Halal
• ☐ Kosher
• ☐ Altres: [________]
• ☐ Cap

Ajustaments: Opcional, "Altres" activat, Disseny vertical

Avaluació de competències (sol·licitud de feina)

Label: "Selecciona les teves habilitats tècniques"

Text d'ajuda: "Marqueu totes les opcions que corresponguin"

Opcions:

• ☐ HTML/CSS
• ☐ JavaScript
• ☐ Reacciona
• ☐ PHP
• ☐ WordPress
• ☐ Python
• ☐ SQL/Bases de dades
• ☐ Git/Control de versions

Ajustaments: Disseny de quadrícula (2 columnes), mínim 3 requerides

Temes del butlletí

Label: "Sobre quins temes voldries rebre actualitzacions?"

Opcions:

• ☐ Notícies del sector
• ☐ Actualitzacions de productes
• ☐ Consells i tutorials
• ☐ Casos pràctics
• ☐ Esdeveniments i seminaris web
• ☐ Ofertes especials

Ajustaments: Opció "Selecciona-ho tot" activada, opcional

Enquesta: Com vas saber de nosaltres?

Label: "Com vas saber de nosaltres?"

Text d'ajuda: "Seleccioneu totes les opcions que corresponguin"

Opcions:

• ☐ Cerca de Google
• ☐ Xarxes socials (Facebook, Instagram, etc.)
• ☐ Amic o company/a
• ☐ Publicitat en línia
• ☐ Bloc o article
• ☐ Correu electrònic
• ☐ Fira/Esdeveniment comercial
• ☐ Altres: [________]

Ajustaments: Obligatori, "Altres" habilitat

Priorització de funcions

Label: "Quines són les teves 3 prioritats principals?"

Text d'ajuda: "Seleccioneu exactament 3 opcions"

Opcions:

• ☐ Velocitat/Rendiment
• ☐ Seguretat
• ☐ Facilitat d'ús
• ☐ Personalització
• ☐ Atenció al client
• ☐ Preu
• ☐ Opcions d'integració
• ☐ Compatibilitat amb mòbils

Ajustaments: Mínim 3, Màxim 3

Dissenyar llistes d'opcions efectives

Escriure bones opcions

Sigues específic

Vague: "Serveis de màrqueting"

específica: "Màrqueting a les xarxes socials", "Màrqueting per correu electrònic", "SEO"

Mantingueu les etiquetes concises

Massa llarg: "Serveis d'optimització de motors de cerca per al vostre lloc web"

Millor: "Serveis de SEO"

Utilitza l'estructura paral·lela

Inconsistent:

• Disseny web
• Necessito ajuda de SEO
• Estoig

Coherent:

• disseny web
• Serveis de SEO
• Redacció de contingut

Ordena lògicament

• Alfabètic (per a llistes llargues)
• Per popularitat (del més comú primer)
• Per agrupació de categories
• Per ordre de flux de treball

Quantes opcions?

Missatges de validació

Camp necessari

"Seleccioneu com a mínim una opció"

Mínim no assolit

"Seleccioneu com a mínim [X] opcions"

Màxim superat

"Pots seleccionar un màxim de [X] opcions"

Missatges personalitzats

Adapta't a la teva pregunta:

• "Si us plau, digueu-nos quins serveis us interessen"
• "Selecciona les teves 3 prioritats principals"
• "Trieu com a mínim un mètode de contacte"

Millors Pràctiques

1. Afegiu sempre "Seleccioneu totes les opcions que corresponguin"

A l'etiqueta o al text d'ajuda, indiqueu clarament que es permeten diverses seleccions.

2. Considereu "Altres" per a preguntes obertes

Si no podeu enumerar totes les possibilitats, afegiu una opció "Altres" amb entrada de text.

3. Feu servir "Cap" quan sigui apropiat

Per a preguntes en què cap de les quals s'apliqui no sigui una resposta vàlida, feu-ho explícit.

4. Adapta el disseny al contingut

• Opcions curtes → Horitzontal o Graella
• Opcions llargues → Vertical
• Moltes opcions → Graella

5. No comproveu prèviament les opcions

Permeteu que els usuaris facin les seves pròpies seleccions. La comprovació prèvia pot:

• Resultats esbiaixats
• Sentir-se manipulador/a
• Violar el RGPD per al consentiment de màrqueting

6. Establir límits quan calgui

Si voleu priorització, limiteu les seleccions:

• "Tria els 3 millors" amb un màxim de 3
• Obliga a prendre decisions reflexives

7. Opcions relacionades amb el grup

Per a llistes llargues, considereu diversos camps de casella de selecció per categoria en lloc d'una llista gegant.

Consideracions sobre mòbils

Disseny tàctil

• Objectius de toc prou grans
• Espai adequat entre opcions
• En fer clic a l'etiqueta, es marca la casella

Disseny vertical preferit

A les pantalles dels mòbils:

• Els dissenys horitzontals s'emboliquen de manera incòmoda
• La lectura vertical és més fàcil
• Prova en dispositius reals

Solució de problemes

Opcions que no es desen

• Assegureu-vos que les opcions s'hagin afegit correctament
• Comprova si hi ha línies buides
• Desa el formulari i actualitza

Selecciona-ho tot No funciona

• La funció de verificació està activada
• Comprova si hi ha conflictes de JavaScript
• esborrar memòria cau

El disseny no es mostra correctament

• Comprova la configuració del disseny
• El CSS del tema pot anul·lar-lo
• Prova amb el tema per defecte

Preguntes freqüents

Quantes opcions són massa?

Més de 12 opcions esdevenen aclaparadores. Penseu en agrupar-les en categories, utilitzar diversos camps de casella de selecció o canviar a un menú desplegable de selecció múltiple.

Hauria de fer servir caselles de selecció o un menú desplegable de selecció múltiple?

Caselles de selecció quan hi ha poques opcions (3-10) i les voleu totes visibles. Menú desplegable de selecció múltiple quan hi ha moltes opcions i l'espai és limitat.

Puc establir tant el mínim com el màxim?

Sí. Exemple: «Seleccioneu entre 2 i 5 opcions» amb mín.=2 i màx.=5.

Com puc fer que en siguin exactament 3 necessaris?

Estableix tant el mínim com el màxim a 3. Els usuaris han de seleccionar exactament 3 opcions.

Què passa si els usuaris necessiten una opció que no apareix a la llista?

Activeu l'opció "Altres", que proporciona un camp de text per a entrades personalitzades.

resum

Creació de llistes de caselles de selecció múltiple:

1. Afegeix un camp de casella de selecció – Arrossegar per formar
2. Escriure una pregunta clara – Inclou “selecciona totes les opcions que corresponguin”
3. Afegeix opcions ben escrites – Concís, paral·lel, ordenat
4. Trieu el disseny adequat – Vertical, horitzontal o de quadrícula
5. Configura les regles de selecció – Obligatori, mínim/màxim si cal
6. Habilita les opcions especials – Selecciona-ho tot, Altres, Cap
7. Prova al mòbil – Garantir la usabilitat

Conclusió

Les llistes de caselles de selecció múltiple són essencials per recopilar múltiples preferències, interessos i opcions. Amb un disseny d'opcions adequat, dissenys adequats i funcions intel·ligents com ara "Selecciona-ho tot" i "Altres", crearàs camps de selecció fàcils d'utilitzar que recopilaran les dades que necessites.

Creador de formularis automàtic Ofereix camps de selecció de opcions complets amb dissenys vertical, horitzontal i de quadrícula, l'opció Selecciona-ho tot, "Altres" amb quadre de text, "Cap de les anteriors" i límits de selecció mínims/màxims. Tot el que necessiteu per a preguntes professionals de selecció múltiple.

A punt per crear formularis de selecció múltiple? Descarrega el creador de formularis automàtic i permetre que els usuaris triïn totes les que corresponguin.