Cómo crear menús desplegables en formularios de WordPress

Los menús desplegables son fundamentales en los formularios. Selección de país, elección de categoría, clasificación de preferencias: cuando los usuarios necesitan elegir de una lista predefinida, los menús desplegables son la solución. Ahorran espacio, estandarizan los datos y guían a los usuarios hacia las opciones válidas. Aquí te explicamos cómo crear menús desplegables eficaces en tus formularios de WordPress.

¿Por qué utilizar menús desplegables?

Ventajas sobre los campos de texto

• Datos estandarizados: Sin errores tipográficos ni variaciones
• Selección guiada: Los usuarios ven las opciones disponibles
• Eficiente en cuanto al espacio: Colapsado hasta que se haga clic
• Compatible con dispositivos móviles: Selector nativo en teléfonos
• Finalización más rápida: Clic vs. tipo

Ventajas sobre los botones de opción

• Mejor para listas largas: Más de 6 opciones caben en espacios pequeños
• Apariencia más limpia: Menos desorden visual
• Desplazable: Manejar docenas de opciones

Cuándo utilizar menús desplegables

• 6+ opciones (menos = considere botones de opción)
• Opciones predefinidas y conocidas
• Se requiere selección única
• El espacio es limitado
• La estandarización de datos es importante

Creación de un menú desplegable básico

Paso 1: Agregar campo desplegable

1. Abra su formulario en AFB
2. Encuentre Menú Desplegable en tipos de campo
3. Arrastre a su formulario

Paso 2: Configurar la etiqueta

Etiqueta: "¿Cómo se enteró de nosotros?" Marcador: "Seleccione una opción..." Obligatorio: Sí/No

Paso 3: agregar opciones

Introduzca cada opción en una nueva línea:

Búsqueda de Google Redes sociales Amigo o colega Anuncio Blog o artículo Otro

Paso 4: Vista previa y prueba

1. Guardar formulario
2. Vista previa en la interfaz
3. Haga clic en el menú desplegable para verificar las opciones
4. Enviar entrada de prueba

Opciones de configuración del menú desplegable

Ajustes básicos

• Etiqueta: Pregunta o sugerencia
• Marcador de posición: Texto predeterminado (por ejemplo, “Seleccionar…”)
• Necesario: Debe seleccionar para enviar
• Texto de ayuda: Instrucciones adicionales

Configuración de opciones

• Lista de opciones: Opciones disponibles
• Seleccionado por defecto: Opción preseleccionada
• Conocido como: Escriba para filtrar
• Selección múltiple: Elija múltiples

Agregar opciones desplegables

Lista simple

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

Con valores distintos a las etiquetas

Mostrar una cosa, almacenar otra:

Pantalla: "Estados Unidos" Valor: "EE. UU." Pantalla: "Reino Unido" Valor: "RU"

Opciones agrupadas (Optgroups)

--- América del Norte --- Estados Unidos Canadá México --- Europa --- Reino Unido Alemania Francia

Muchas opciones

Para listas largas, considere:

• Orden alfabético
• Las opciones más comunes primero
• Búsqueda habilitada
• Agrupaciones lógicas

Texto del marcador

¿Qué es un marcador de posición?

El texto que se muestra antes de que el usuario seleccione una opción:

[Seleccione una opción... ▼] ← Marcador de posición

Buenos ejemplos de marcadores de posición

"Selecciona tu país..." "Elige una categoría..." "Elige una franja horaria..." "-- Por favor, selecciona --" "Selecciona una"

Mejores prácticas para marcadores de posición

• Que sea breve
• Deja claro que es un mensaje rápido
• No lo uses como opción válida
• Considere el formato “– Seleccionar –”

Menús desplegables de búsqueda

¿Qué es buscable?

Los usuarios pueden escribir para filtrar las opciones:

[Escribe para buscar... ▼] Tipos de usuario: "ger" Muestra: Alemania, Argelia, Níger

Cuándo habilitar la búsqueda

• 20+ opciones
• Listas de países/estados
• Catálogos de productos
• Cualquier lista larga

Habilitación de búsquedas

1. Seleccionar campo desplegable
2. Encuentra la opción “Buscable”
3. Activar

UX con capacidad de búsqueda

1. El usuario hace clic en el menú desplegable. 2. Aparece la entrada de texto. 3. El usuario escribe una coincidencia parcial. 4. Las opciones se filtran en tiempo real. 5. El usuario selecciona de la lista filtrada.

Menús desplegables de selección múltiple

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

Selección única: el usuario elige UNA opción Selección múltiple: el usuario elige MÚLTIPLES opciones

Cuándo utilizar la selección múltiple

• “Seleccione todas las que correspondan”
• Múltiples intereses/preferencias
• Seleccionar múltiples categorías
• Cuando las casillas de verificación ocuparían demasiado espacio

Habilitación de selección múltiple

1. Seleccionar campo desplegable
2. Busque “Permitir selecciones múltiples”
3. Activar

Apariencia de selección múltiple

[Diseño web, SEO, Marketing ▼] Los elementos seleccionados se muestran como etiquetas/chips

Selección múltiple con límites

Combinar con selección mínima/máxima:

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

Ejemplos de configuración

Ejemplo 1: Selección de país

Etiqueta: "País" Marcador de posición: "Seleccione su país..." Buscable: Sí Obligatorio: Sí Opciones: [195+ países en orden alfabético]

Ejemplo 2: Tipo de consulta

Etiqueta: "¿Sobre qué trata su consulta?" Marcador: "Seleccione una categoría..." Obligatorio: Sí Opciones: - Ventas - Soporte - Facturación - Colaboración - Prensa/Medios - Otros

Ejemplo 3: Rango de presupuesto

Etiqueta: "¿Cuál es su presupuesto?" Marcador de posición: "Seleccione rango..." Obligatorio: No Opciones: - Menos de $1,000 - $1,000 - $5,000 - $5,000 - $10,000 - $10,000 - $25,000 - $25,000+ - Aún no estoy seguro

Ejemplo 4: Franja de tiempo

Etiqueta: "Hora de cita preferida" Marcador de posición: "Elija una hora..." Obligatorio: Sí Opciones: - 9:00 AM - 10:00 AM - 11:00 AM - 1:00 PM - 2:00 PM - 3:00 PM - 4:00 PM

Ejemplo 5: Intereses de selección múltiple

Etiqueta: "Temas de interés" Marcador de posición: "Seleccionar temas..." Selección múltiple: Sí Buscable: Sí Opciones: - Tecnología - Negocios - Marketing - Diseño - Desarrollo - Analítica - Seguridad - IA/ML

Ejemplo 6: Servicios agrupados

Etiqueta: "¿Qué servicio necesitas?" Opciones: --- Servicios web --- - Diseño web - Desarrollo web - Comercio electrónico --- Marketing --- - SEO - PPC - Redes sociales --- Soporte --- - Mantenimiento - Hosting - Consultoría

Selección predeterminada

Sin valor predeterminado (recomendado)

[Seleccione una opción... ▼]

El usuario debe elegir activamente. Se recomiendan los campos obligatorios.

Predeterminado preseleccionado

[Estados Unidos ▼] ← Preseleccionados

Úselo cuando:

• Una opción es abrumadoramente común
• Acelera la finalización del formulario
• Existe un valor lógico predeterminado

Configuración predeterminada

1. En la lista de opciones, marque la opción predeterminada
2. O establezca “Valor predeterminado” en la configuración

Botones desplegables vs. botones de opción

Utilice el menú desplegable cuando

• 6+ opciones
• Lista larga (países, estados)
• El espacio es limitado
• Las opciones son similares en naturaleza

Utilice botones de opción cuando

• 2-5 opciones
• Todas las opciones deberían estar visibles
• Las opciones tienen descripciones
• La comparación visual es importante

Comparación lado a lado

DESPLEGABLE (más de 6 opciones, ocultas hasta que se hace clic): [Seleccionar un plan... ▼] BOTONES DE RADIO (de 2 a 5 opciones, todas visibles): ○ Gratis ○ Básico ($9/mes) ○ Pro ($29/mes) ○ Enterprise (Contáctenos)

Menús desplegables de estilos

Apariencia predeterminada

Los menús desplegables heredan el estilo del formulario:

• Color/radio del borde
• Color de fondo
• Familia/tamaño de fuente
• Relleno

Opciones de estilo personalizadas

• Icono de flecha desplegable
• Apariencia del elemento seleccionado
• Estados de opción al pasar el mouse
• Estilo de etiqueta de selección múltiple

Estilo móvil

Menús desplegables móviles nativos:

• iOS: Selector de rueda
• Android: Selector de materiales
• Consistente con el sistema operativo

BUENAS PRÁCTICAS

1. Ordenar las opciones de forma lógica

• Alfabético: Países, nombres
• Numérico: Cantidades, rangos
• Frecuencia: Lo más común primero
• Cronológico: Franjas horarias, fechas

2. Mantenga las opciones concisas

Bueno: "Estados Unidos" Evitar: "Estados Unidos de América (EE. UU.)" Bueno: "$1,000 - $5,000" Evitar: "Entre mil y cinco mil dólares"

3. Incluya “Otros” cuando corresponda

Opciones: - Google - Facebook - LinkedIn - Recomendación de amigos - Otros ← Detecta casos extremos

4. Utilice un marcador de posición, no la primera opción

Bueno: Marcador de posición: "Seleccionar..." Opciones: Opción 1, Opción 2, Opción 3 Evitar: Opciones: "Seleccionar...", Opción 1, Opción 2 (La primera opción no debe ser un mensaje)

5. Habilitar la búsqueda de listas largas

Cualquier menú desplegable con entre 15 y 20 opciones debería poder buscarse.

6. Considere el rendimiento de carga

Las listas extremadamente largas (más de 1000) pueden necesitar:

• Carga Diferida
• Búsqueda del lado del servidor
• Dividiendo en subcategorías

Casos de uso comunes de menús desplegables

Formularios de Contacto

- Departamento (Ventas, Soporte, Facturación) - Tipo de consulta (Pregunta, Comentarios, Queja) - ¿Cómo se enteró de nosotros?

Los formularios de inscripción

- País - Estado/Provincia - Industria - Tamaño de la empresa - Cargo/puesto de trabajo

Formularios de pedido

- Selección de productos - Cantidad - Variantes de tamaño/color - Método de envío

Formularios de encuesta

- Escalas de calificación (1-10) - Frecuencia (Nunca a Siempre) - Acuerdo (Totalmente en desacuerdo a Totalmente de acuerdo)

Formularios de reserva

- Tipo de servicio - Fecha preferida - Franja horaria - Duración

Localización de averías

El menú desplegable no muestra opciones

• Verificar que las opciones estén guardadas
• Comprobar si la lista de opciones está vacía
• Borrar caché y actualizar

La búsqueda no funciona

• Confirmar que la búsqueda esté habilitada
• Comprobar errores de JavaScript
• Prueba en diferentes navegadores

La selección múltiple no guarda todas las selecciones

• Verificar que la selección múltiple esté habilitada
• Verificar el manejo del envío del formulario
• Prueba con menos selecciones

El selector móvil no aparece

• El estilo personalizado puede anular el estilo nativo.
• Prueba en un dispositivo móvil real
• Comprobar si hay conflictos de JavaScript

Accesibilidad

Teclado de navegación

• Pestaña para enfocar el menú desplegable
• Teclas de flecha para navegar
• Enter/Espacio para seleccionar
• Escribe la primera letra para saltar

Lectores de pantalla

• Etiqueta correctamente asociada
• Opciones anunciadas
• Selección confirmada

BUENAS PRÁCTICAS

• Etiquetas claras y descriptivas
• Orden lógico de opciones
• Evite el marcador de posición como única instrucción

Resumen

Creación de menús desplegables:

1. Agregar campo desplegable – Arrastre para formar
2. Establecer etiqueta – Pregunta/indicación clara
3. Añadir marcador de posición – Texto “Seleccionar…”
4. Introducir opciones – Uno por línea
5. Habilitar búsqueda – Para listas largas
6. Habilitar selección múltiple – Si se necesitan múltiples opciones
7. Conjunto requerido – Según las necesidades del formulario
8. Prueba a fondo – Todas las opciones, todos los dispositivos

Conclusión

Los menús desplegables gestionan eficazmente la selección de opciones en los formularios. Ahorran espacio, estandarizan los datos y funcionan bien en todos los dispositivos. Para listas cortas, considere los botones de opción. Para listas largas, habilite la búsqueda. Para selecciones múltiples, utilice el modo de selección múltiple. La configuración correcta convierte los menús desplegables en campos de entrada potentes que mejoran tanto la experiencia del usuario como la calidad de los datos.

Constructor de formularios automático Incluye campos desplegables completos con función de búsqueda, opción de selección múltiple y estilo personalizado. Cree menús de selección profesionales en minutos.

¿Estás listo para agregar menús desplegables? Descargar Auto Form Builder y comience a crear formularios con menús desplegables hoy mismo.