Com crear menús desplegables en formularis de WordPress

Els menús desplegables són eines fonamentals per a formularis. Selecció de país, elecció de categoria, classificació de preferències: sempre que els usuaris necessiten triar d'una llista predefinida, els menús desplegables ofereixen la solució. Estalvien espai, estandarditzen les dades i guien els usuaris cap a opcions vàlides. A continuació s'explica com crear menús desplegables eficaços als formularis de WordPress.

Per què utilitzar menús desplegables?

Avantatges respecte als camps de text

• Dades estandarditzades: Sense errors tipogràfics ni variacions
• Selecció guiada: Els usuaris veuen les opcions disponibles
• Eficient en l'espai: Reduït fins que es fa clic
• Apte per a mòbils: Selector natiu als telèfons
• Finalització més ràpida: Clic vs. escriptura

Avantatges respecte als botons de ràdio

• Millor per a llistes llargues: Més de 6 opcions caben en un espai reduït
• Aspecte més net: Menys desordre visual
• Desplaçable: Gestiona desenes d'opcions

Quan s'han d'utilitzar els menús desplegables

• 6+ opcions (menys = considera botons de ràdio)
• Opcions predefinides i conegudes
• Cal una sola selecció
• L'espai és limitat
• L'estandardització de dades és important

Creació d'un menú desplegable bàsic

Pas 1: Afegir un camp desplegable

1. Obre el formulari a FIG
2. Cercar Dropdown en tipus de camp
3. Arrossega al teu formulari

Pas 2: Configura l'etiqueta

Etiqueta: "Com has sentit a parlar de nosaltres?" Reservat: "Selecciona una opció..." Obligatori: Sí/No

Pas 3: Afegir opcions

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

Cerca de Google Xarxes socials Amic o company Publicitat Bloc o article Altres

Pas 4: Vista prèvia i prova

1. Desa el formulari
2. Vista prèvia a la interfície
3. Feu clic al menú desplegable per verificar les opcions
4. Envia una entrada de prova

Opcions de configuració desplegables

Configuració bàsica

• Label: Pregunta o suggeriment
• Reservat: Text predeterminat (per exemple, "Selecciona...")
• requerit: Cal seleccionar per enviar
• Text d'ajuda: Instruccions addicionals

Opcions Configuració

• Llista d'opcions: Opcions disponibles
• Seleccionat per defecte: Opció preseleccionada
• Conegut com: Escriu per filtrar
• Selecció múltiple: Trieu-ne diversos

Afegir opcions desplegables

Llista simple

Opció 1 Opció 2 Opció 3 Opció 4

Amb valors diferents de les etiquetes

Mostrar una cosa, guardar-ne una altra:

Pantalla: "Estats Units" Valor: "US" Pantalla: "Regne Unit" Valor: "RU"

Opcions agrupades (Optgroups)

--- Amèrica del Nord --- Estats Units Canadà Mèxic --- Europa --- Regne Unit Alemanya França

Moltes opcions

Per a llistes llargues, tingueu en compte:

• ordre alfabètic
• Opcions més comunes primer
• Cercable activat
• Agrupacions lògiques

Text de marcador de posició

Què és un marcador de posició?

El text que es mostra abans que l'usuari seleccioni una opció:

[Seleccioneu una opció... ▼] ← Reservat

Bons exemples de marcadors de posició

"Seleccioneu el vostre país..." "Trieu una categoria..." "Trieu una franja horària..." "-- Si us plau, seleccioneu --" "Seleccioneu-ne una"

Pràctiques recomanades per a marcadors de posició

• Deixeu-ho curt
• Deixa clar que és una indicació
• No utilitzar com a opció vàlida
• Considereu el format "– Selecciona –"

Menús desplegables amb possibilitat de cerca

Què és cercable?

Els usuaris poden escriure per filtrar les opcions:

[Escriu per cercar... ▼] Tipus d'usuari: "ger" Programes: Alemanya, Algèria, Níger

Quan s'ha d'habilitar la funció de cerca

• Més de 20 opcions
• Llistes de països/estats
• Catàlegs de productes
• Qualsevol llista llarga

Habilitació de la funció de cerca

1. Selecciona el camp desplegable
2. Cerca l'opció "Es pot cercar"
3. Activa o desactiva

UX amb capacitat de cerca

1. L'usuari fa clic al menú desplegable 2. Apareix l'entrada de text 3. L'usuari escriu una coincidència parcial 4. Filtre d'opcions en temps real 5. L'usuari selecciona de la llista filtrada

Menús desplegables de selecció múltiple

Selecció única vs. selecció múltiple

Selecció única: l'usuari tria UNA opció Selecció múltiple: l'usuari tria MÚLTIPLES opcions

Quan s'ha d'utilitzar la selecció múltiple

• "Seleccioneu totes les opcions que corresponguin"
• Múltiples interessos/preferències
• Seleccionar diverses categories
• Quan les caselles de selecció ocupen massa espai

Habilitació de la selecció múltiple

1. Selecciona el camp desplegable
2. Cerca "Permetre seleccions múltiples"
3. Activa o desactiva

Aparença de selecció múltiple

[Disseny web, SEO, Màrqueting ▼] Els elements seleccionats es mostren com a etiquetes/xips

Selecció múltiple amb límits

Combina amb la selecció mínima/màxima:

"Seleccioneu 2-4 temes" Mín: 2 Màx: 4

Exemples de configuració

Exemple 1: Selecció de país

Etiqueta: "País" Reservat: "Seleccioneu el vostre país..." Es pot cercar: Sí Obligatori: Sí Opcions: [més de 195 països per ordre alfabètic]

Exemple 2: Tipus de consulta

Etiqueta: "De què tracta la vostra consulta?" Reservat: "Seleccioneu una categoria..." Obligatori: Sí Opcions: - Vendes - Assistència - Facturació - Associació - Premsa/Mitjans de comunicació - Altres

Exemple 3: Rang de pressupost

Etiqueta: "Quin és el vostre pressupost?" Reservat: "Seleccioneu un interval..." Obligatori: No Opcions: - Menys de 1,000 $ - 1,000 $ - 5,000 $ - 5,000 $ - 10,000 $ - 10,000 $ - 25,000 $ - 25,000 $+ - Encara no ho esteu segur

Exemple 4: Franja horària

Etiqueta: "Hora de cita preferida" Reservat: "Trieu una hora..." Obligatori: Sí Opcions: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Exemple 5: Selecció múltiple d'interessos

Etiqueta: "Temes d'interès" Reservat: "Selecciona temes..." Selecció múltiple: Sí Es pot cercar: Sí Opcions: - Tecnologia - Negocis - Màrqueting - Disseny - Desenvolupament - Analítica - Seguretat - IA/ML

Exemple 6: Serveis agrupats

Etiqueta: "Quin servei necessiteu?" Opcions: --- Serveis web --- - Disseny web - Desenvolupament web - Comerç electrònic --- Màrqueting --- - SEO - PPC - Xarxes socials --- Assistència --- - Manteniment - Allotjament - Consultoria

Selecció predeterminada

Sense valor per defecte (recomanat)

[Seleccioneu una opció... ▼]

L'usuari ha de triar activament. Millor per a camps obligatoris.

Predeterminat preseleccionat

[Estats Units ▼] ← Preseleccionat

Utilitzar quan:

• Una opció és aclaparadorament comuna
• Accelera l'emplenament de formularis
• Existeix un valor lògic per defecte

Configuració per defecte

1. A la llista d'opcions, marqueu l'opció per defecte
2. O bé estableix el "Valor per defecte" a la configuració

Botons desplegables vs. botons de ràdio

Utilitza el menú desplegable quan

• Més de 6 opcions
• Llista llarga (països, estats)
• L'espai és limitat
• Les opcions són de naturalesa similar

Utilitzeu botons d'opció quan

• 2-5 opcions
• Totes les opcions haurien de ser visibles
• Les opcions tenen descripcions
• La comparació visual és important

Comparació de costat a costat

MENÚ DESPLEGABLE (6+ opcions, ocultes fins que es fa clic): [Seleccioneu un pla... ▼] BOTONS DE RADIO (2-5 opcions, totes visibles): ○ Gratuït ○ Bàsic (9 $/mes) ○ Pro (29 $/mes) ○ Empresa (Contacteu-nos)

Estils desplegables

Aparença predeterminada

Els menús desplegables hereten l'estil del formulari:

• Color/radi de la vora
• Color de fons
• Família/mida de la lletra
• encoixinat

Opcions d'estil personalitzades

• Icona de fletxa desplegable
• Aspecte de l'element seleccionat
• Estats de les opcions que apareixen al cursor
• Estil d'etiquetes de selecció múltiple

Estilisme mòbil

Menús desplegables natius per a mòbils:

• iOS: Selector de rodes
• Android: Selector de materials
• Coherent amb el sistema operatiu

Millors Pràctiques

1. Ordeneu les opcions de manera lògica

• Alfabèticament: Països, noms
• Numèric: Quantitats, rangs
• Freqüència: Primer més comú
• Cronològic: Franges horàries, dates

2. Mantingueu les opcions concises

Bo: "Estats Units" Evitar: "Estats Units d'Amèrica (EUA)" Bo: "1,000 $ - 5,000 $" Evitar: "Entre mil i cinc mil dòlars"

3. Incloeu "Altres" quan sigui apropiat

Opcions: - Google - Facebook - LinkedIn - Recomanació d'amics - Altres ← Detecta casos límit

4. Utilitzeu el marcador de posició, no la primera opció

Bé: Espai reservat: "Selecciona..." Opcions: Opció 1, Opció 2, Opció 3 Evitar: Opcions: "Selecciona...", Opció 1, Opció 2 (La primera opció no hauria de ser una sol·licitud)

5. Activa la cerca de llistes llargues

Qualsevol desplegable amb 15-20+ opcions hauria de ser cercable.

6. Tingueu en compte el rendiment de la càrrega

Les llistes extremadament llargues (més de 1000) poden necessitar:

• Carrega pessigolleta
• Cerca del costat del servidor
• Dividint-se en subcategories

Casos d'ús comuns del desplegable

Formularis de contacte

- Departament (Vendes, Assistència, Facturació) - Tipus de consulta (Pregunta, Comentaris, Queixa) - Com vau saber de nosaltres

Formularis d’inscripció

- País - Estat/Província - Sector - Mida de l'empresa - Càrrec/funció

Formularis de comanda

- Selecció de productes - Quantitat - Variants de mida/color - Mètode d'enviament

Formularis d'enquesta

- Escales de valoració (1-10) - Freqüència (Mai a Sempre) - Acord (Totalment en desacord a Totalment d'acord)

Formularis de reserva

- Tipus de servei - Data preferida - Franja horària - Durada

Solució de problemes

El menú desplegable no mostra les opcions

• Verifica que les opcions s'han desat
• Comprova si hi ha una llista d'opcions buida
• Esborra la memòria cau i actualitza

La cerca no funciona

• Confirma que la funció de cerca està habilitada
• Comprovar els errors de JavaScript
• Prova en un navegador diferent

La selecció múltiple no desa totes les seleccions

• Verifica que la selecció múltiple estigui habilitada
• Comprovar la gestió de l'enviament de formularis
• Prova amb menys seleccions

El selector mòbil no apareix

• L'estil personalitzat pot anul·lar el natiu
• Prova en un dispositiu mòbil real
• Comprova si hi ha conflictes de JavaScript

Accessibilitat

Navegació per teclat

• Tabulador per enfocar el menú desplegable
• Tecles de fletxa per navegar
• Introduïu/Espai per seleccionar
• Escriu la primera lletra per saltar

Lectors de pantalla

• Etiqueta correctament associada
• Opcions anunciades
• Selecció confirmada

Millors Pràctiques

• Etiquetes clares i descriptives
• Ordre lògic d'opcions
• Eviteu el marcador de posició com a única instrucció

resum

Creació de menús desplegables:

1. Afegeix un camp desplegable – Arrossegar per formar
2. Estableix l'etiqueta – Pregunta/indicació clara
3. Afegeix un marcador de posició – Text "Selecciona..."
4. Introduïu opcions – Un per línia
5. Activa la funció de cerca – Per a llistes llargues
6. Activa la selecció múltiple – Si calen diverses opcions
7. Conjunt obligatori – Segons les necessitats del formulari
8. Prova a fons – Totes les opcions, tots els dispositius

Conclusió

Els menús desplegables gestionen de manera eficient la selecció d'opcions als formularis. Estalvien espai, estandarditzen les dades i funcionen bé entre dispositius. Per a llistes curtes, considereu els botons d'opció. Per a llistes llargues, activeu la cerca. Per a seleccions múltiples, utilitzeu el mode de selecció múltiple. La configuració correcta fa que els menús desplegables siguin camps d'entrada potents que milloren tant l'experiència de l'usuari com la qualitat de les dades.

Creador de formularis automàtic Inclou camps desplegables amb totes les funcions, mode de cerca, opció de selecció múltiple i estils personalitzats. Crea menús de selecció professionals en qüestió de minuts.

A punt per afegir desplegables? Descarrega el creador de formularis automàtic i comença a crear formularis amb menús desplegables avui mateix.