Como crear menús despregables en formularios de WordPress

Os menús despregables son ferramentas básicas. Selección de país, elección de categoría, clasificación de preferencias: sempre que os usuarios teñan que escoller dunha lista predefinida, os menús despregables serven de base. Aforran espazo, estandarizan os datos e guían aos usuarios cara a opcións válidas. Aquí tes como crear menús despregables eficaces nos teus formularios de WordPress.

Por que usar menús despregables?

Vantaxes sobre os campos de texto

• Datos estandarizados: Sen erros tipográficos nin variacións
• Selección guiada: Os usuarios ven as opcións dispoñibles
• Eficiencia de espazo: Contraído ata que se faga clic
• Compatible con móbiles: Selector nativo en teléfonos
• Finalización máis rápida: Clic vs. escribe

Vantaxes sobre os botóns de radio

• Mellor para listas longas: Máis de 6 opcións caben nun espazo pequeno
• Aspecto máis limpo: Menos desorde visual
• Desprazable: Manexa ducias de opcións

Cando usar menús despregables

• 6+ opcións (menos = considera botóns de radio)
• Opcións predefinidas e coñecidas
• Requírese unha única selección
• O espazo é limitado
• Importancia da estandarización dos datos

Creando un menú despregable básico

Paso 1: Engadir un campo despregable

1. Abre o teu formulario en A.F.B.
2. Buscar Desplegable en tipos de campo
3. Arrastrar ao formulario

Paso 2: Configurar a etiqueta

Etiqueta: "Como soubo de nós?" Reservado: "Seleccione unha opción..." Obrigatorio: Si/Non

Paso 3: Engadir opcións

Introduza cada opción nunha nova liña:

Busca de Google Redes sociais Amigo ou compañeiro Publicidade Blog ou artigo Outro

Paso 4: Vista previa e proba

1. Gardar formulario
2. Vista previa na interface
3. Fai clic no menú despregable para verificar as opcións
4. Enviar entrada de proba

Opcións de configuración despregable

Configuración básica

• Discográfica: Pregunta ou indicación
• Marcador de posición: Texto predeterminado (por exemplo, “Seleccionar…”)
• necesario: Debe seleccionar para enviar
• Texto de axuda: Instrucións adicionais

Configuración de opcións

• Lista de opcións: Opcións dispoñibles
• Seleccionado por defecto: Opción preseleccionada
• Buscable: Escribe para filtrar
• Selección múltiple: Escolle varios

Engadir opcións despregables

Lista sinxela

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

Con valores diferentes das etiquetas

Mostrar unha cousa, gardar outra:

Mostrar: "Estados Unidos" Valor: "US" Mostrar: "Reino Unido" Valor: "RU"

Opcións agrupadas (Optgroups)

--- América do Norte --- Estados Unidos Canadá México --- Europa --- Reino Unido Alemaña Francia

Moitas opcións

Para listas longas, considere:

• Orde alfabética
• As opcións máis comúns primeiro
• Buscable activada
• Agrupacións lóxicas

Texto do marcador de posición

Que é un marcador de posición?

O texto que se mostra antes de que o usuario seleccione unha opción:

[Selecciona unha opción... ▼] ← Marcador de posición

Bos exemplos de marcadores de posición

"Selecciona o teu país..." "Selecciona unha categoría..." "Selecciona unha franxa horaria..." "-- Selecciona --" "Selecciona unha"

Boas prácticas de marcadores de posición

• Faino curto
• Deixa claro que é unha indicación
• Non o use como unha opción válida
• Considere o formato “– Seleccionar –”

Menús despregables con busca

Que é buscable?

Os usuarios poden escribir para filtrar as opcións:

[Escribe para buscar... ▼] Tipos de usuario: "ger" Programas: Alemaña, Alxeria, Níxer

Cando activar a función de busca

• Máis de 20 opcións
• Listas de países/estados
• Catálogos de produtos
• Calquera lista longa

Activación da opción de busca

1. Seleccionar campo despregable
2. Atopar a opción "Buscábel"
3. Activar

UX con capacidade de busca

1. O usuario fai clic no menú despregable 2. Aparece a entrada de texto 3. O usuario escribe unha coincidencia parcial 4. Filtro de opcións en tempo real 5. O usuario selecciona unha opción da lista filtrada

Menús despregables de selección múltiple

Selección única vs. selección múltiple

Selección única: o usuario escolle UNHA opción. Selección múltiple: o usuario escolle VARIAS opcións.

Cando usar a selección múltiple

• "Seleccione todas as que correspondan"
• Múltiples intereses/preferencias
• Seleccionando varias categorías
• Cando as caixas de verificación ocupan demasiado espazo

Activación da selección múltiple

1. Seleccionar campo despregable
2. Busca "Permitir seleccións múltiples"
3. Activar

Aparencia de selección múltiple

[Deseño web, SEO, mercadotecnia ▼] Os elementos seleccionados móstranse como etiquetas/chips

Selección múltiple con límites

Combinar coa selección mín./máx.:

"Seleccionar 2-4 temas" Mín: 2 Máx: 4

Exemplos de configuración

Exemplo 1: Selección de país

Etiqueta: "País" Marcador de posición: "Selecciona o teu país..." Pódese buscar: Si Obrigatorio: Si Opcións: [máis de 195 países por orde alfabetica]

Exemplo 2: Tipo de consulta

Etiqueta: "De que trata a súa consulta?" Reservado: "Seleccione unha categoría..." Obrigatorio: Si Opcións: - Vendas - Asistencia - Facturación - Colaboración - Prensa/Medios - Outros

Exemplo 3: Rango de orzamento

Etiqueta: "Cal é o seu orzamento?" Marcador de posición: "Seleccione un rango..." Obrigatorio: Non Opcións: - Menos de 1,000 $ - 1,000 $ - 5,000 $ - 5,000 $ - 10,000 $ - 10,000 $ - 25,000 $ - Máis de 25,000 $ - Aínda non o sei

Exemplo 4: Franxa horaria

Etiqueta: "Hora da cita preferida" Marcador de posición: "Escolla unha hora..." Obrigatorio: Si Opcións: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Exemplo 5: Intereses de selección múltiple

Etiqueta: "Temas de interese" Marcador de posición: "Seleccionar temas..." Selección múltiple: Si Pódese buscar: Si Opcións: - Tecnoloxía - Negocios - Márketing - Deseño - Desenvolvemento - Análise - Seguridade - IA/ML

Exemplo 6: Servizos agrupados

Etiqueta: "Que servizo necesitas?" Opcións: --- Servizos web --- - Deseño web - Desenvolvemento web - Comercio electrónico --- Márketing --- - SEO - PPC - Redes sociais --- Soporte --- - Mantemento - Aloxamento - Consultoría

Selección predeterminada

Sen predeterminado (recomendado)

[Selecciona unha opción... ▼]

O usuario debe escoller activamente. Mellor para campos obrigatorios.

Predeterminado preseleccionado

[Estados Unidos ▼] ← Preseleccionado

Usar cando:

• Unha opción é abrumadoramente común
• Acelera a finalización de formularios
• Existe un valor lóxico predeterminado

Configuración predeterminada

1. Na lista de opcións, marque a opción predeterminada
2. Ou define "Valor predeterminado" na configuración

Menú despregable vs. botóns de radio

Usar o menú despregable cando

• Máis de 6 opcións
• Lista longa (países, estados)
• O espazo é limitado
• As opcións son de natureza similar

Usar botóns de opción cando

• 2-5 opcións
• Todas as opcións deberían ser visibles
• As opcións teñen descricións
• Importante a comparación visual

Comparación lado a lado

MENÚ PREGABLE (máis de 6 opcións, ocultas ata que se faga clic): [Seleccionar un plan... ▼] BOTÓNS DE AUDIO (2-5 opcións, todas visibles): ○ Gratis ○ Básico (9 $/mes) ○ Pro (29 $/mes) ○ Empresa (Contacta connosco)

Estilos de menús despregables

Apariencia predeterminada

Os menús despregables herdan o estilo dos formularios:

• Cor/radio do bordo
• Cor de fondo
• Familia/tamaño da fonte
• Acolchado

Opcións de estilo personalizadas

• Icona de frecha despregable
• Aspecto do elemento seleccionado
• Estados de opcións ao pasar o cursor do cursor
• Estilos de etiquetas de selección múltiple

Estilos móbiles

Menús despregables nativos para móbiles:

• iOS: Selector de rodas
• Android: Selector de materiais
• Coherente co sistema operativo

Mellores Prácticas

1. Opcións de pedido loxicamente

• Alfabético: Países, nomes
• Numérico: Cantidades, rangos
• frecuencia: Máis común primeiro
• Cronolóxico: Franxas horarias, datas

2. Manteña as opcións concisas

Bo: "Estados Unidos" Evitar: "Estados Unidos de América (EUA)" Bo: "1,000 $ - 5,000 $" Evitar: "Entre mil e cinco mil dólares"

3. Inclúa "Outro" cando sexa apropiado

Opcións: - Google - Facebook - LinkedIn - Recomendación de amigos - Outros ← Detecta casos límite

4. Usar marcador de posición, non a primeira opción

Bo: Marcador de posición: "Seleccionar..." Opcións: Opción 1, Opción 2, Opción 3 Evitar: Opcións: "Seleccionar...", Opción 1, Opción 2 (A primeira opción non debería ser unha solicitude)

5. Activar a busca de listas longas

Calquera menú despregable con entre 15 e 20 opcións debería poder buscarse.

6. Considere o rendemento da carga

As listas extremadamente longas (máis de 1000) poden precisar:

• Carga preguiceira
• Busca no lado do servidor
• Dividindo en subcategorías

Casos de uso comúns de menús despregables

Formularios de contacto

- Departamento (Vendas, Asistencia, Facturación) - Tipo de consulta (Pregunta, Comentarios, Queixa) - Como soubo de nós

Formularios de rexistro

- País - Estado/Provincia - Sector - Tamaño da empresa - Posto/función

Formularios de pedido

- Selección de produtos - Cantidade - Variantes de tamaño/cor - Método de envío

Formularios de enquisa

- Escalas de valoración (1-10) - Frecuencia (Nunca a Sempre) - De acordo (Moi en desacordo a Moi de acordo)

Formularios de reserva

- Tipo de servizo - Data preferida - Franxa horaria - Duración

Solución de problemas

Menú despregable que non mostra as opcións

• Verificar que as opcións estean gardadas
• Comprobar se hai unha lista de opcións baleira
• Limpar a caché e actualizar

A busca non funciona

• Confirmar que a opción de busca está activada
• Comprobar erros de JavaScript
• Proba en diferente navegador

A selección múltiple non garda todas as seleccións

• Verificar que a selección múltiple estea activada
• Comprobar a xestión do envío de formularios
• Proba con menos seleccións

O selector móbil non aparece

• O estilo personalizado pode anular o estilo nativo
• Proba nun dispositivo móbil real
• Comprobar se hai conflitos de JavaScript

Accesibilidade

Navegación con teclado

• Tab para enfocar o menú despregable
• Teclas de frecha para navegar
• Intro/Espazo para seleccionar
• Escribe a primeira letra para saltar

Lectores de pantalla

• Etiqueta asociada correctamente
• Opcións anunciadas
• Selección confirmada

Mellores Prácticas

• Etiquetas claras e descritivas
• Orde de opcións lóxicas
• Evitar o marcador de posición como única instrución

Resumo

Creación de menús despregables:

1. Engadir campo despregable – Arrastrar para formar
2. Definir etiqueta – Pregunta/indicación clara
3. Engadir marcador de posición – Texto “Seleccionar…”
4. Introducir opcións – Un por liña
5. Activar buscable – Para listas longas
6. Activar a selección múltiple – Se se precisan varias opcións
7. Definir obrigatoriamente – Segundo as necesidades do formulario
8. Proba a fondo – Todas as opcións, todos os dispositivos

Conclusión

Os menús despregables xestionan de xeito eficiente a selección de opcións nos formularios. Aforran espazo, estandarizan os datos e funcionan ben en diferentes dispositivos. Para listas curtas, considera os botóns de opción. Para listas longas, activa a busca. Para seleccións múltiples, usa o modo de selección múltiple. A configuración correcta fai que os menús despregables sexan campos de entrada potentes que melloran tanto a experiencia do usuario como a calidade dos datos.

Creador automático de formularios Inclúe campos despregables con todas as funcións, modo de busca, opción de selección múltiple e estilos personalizados. Crea menús de selección profesionais en minutos.

Listo para engadir menús despregables? Descargar o creador automático de formularios e comeza a crear formularios con menús despregables hoxe mesmo.