Cómo crear una lista desplegable con selecciones múltiples

Los menús desplegables multiselección facilitan el manejo de listas largas en formularios. No es la única forma de añadir una lista larga con opciones seleccionables múltiples en un formulario, pero es el enfoque más conciso.

Y cuando se trata de diseñar formularios que la gente realmente quiera completar, necesitas algo que no alargue tu formulario más de lo absolutamente necesario.

Sin embargo, veo sitios web que utilizan grandes listas de verificación en situaciones donde podrían haber creado un diseño más limpio si hubieran optado por un menú desplegable multiselección.

Según lo que he visto, esto se debe a que el creador de formularios no admite menús desplegables multiselección, o a que el creador no presta atención.

Así que pensé que debería preparar una guía rápida para mostrar lo fácil que es añadir menús desplegables a tus formularios en WordPress con opciones de selección múltiple.

Cómo configurar un campo de menú desplegable multiselección en WordPress

Empecemos instalando el plugin que vamos a utilizar.

Paso 1: Instalar el plugin WPForms

Primero, necesitas un creador de formularios que admita menús desplegables multiselección. Recomiendo WPForms porque creo sinceramente que ningún otro plugin de formularios de WordPress ofrece la flexibilidad y las funciones de ahorro de tiempo del mismo nivel.

Por ejemplo, con los menús desplegables de WPForms, puedes:

• Añadir opciones de selección múltiple en menús desplegables tanto en versiones gratuitas como de pago
• Generar y añadir largas listas de opciones automáticamente con IA

Si bien puedes usar WPForms Lite o WPForms Pro para crear menús desplegables con selección múltiple, usaré WPForms Pro en esta guía (consulta WPForms Lite vs Pro para obtener más información sobre las diferencias clave entre las dos versiones).

¿Es la primera vez que instalas un plugin? Es increíblemente fácil. Puedes seguir los pasos de instalación descritos en nuestra guía de documentación.

Una vez instalado, puedes empezar a crear tus formularios de inmediato.

Paso 2: Crear un nuevo formulario

Abre tu menú de administrador de WordPress. Pasa el cursor sobre WPForms en la barra lateral y luego haz clic en Añadir nuevo.

Esta acción cargará la pantalla de configuración del formulario. En este ejemplo, quiero crear un formulario de solicitud de libros. Así que le daré un nombre apropiado al formulario para mi referencia interna y elegiré una plantilla.

Por simplicidad, usaré el Formulario de contacto simple y luego lo personalizaré un poco añadiendo un desplegable más tarde.

Recuerda que hay más de 2.100 plantillas de formularios para elegir. Incluso puedes generar el formulario completo con IA.

Pero para demostrar mejor la funcionalidad y las personalizaciones, usaré la ruta manual para este.

Después de seleccionar tu plantilla, el creador de formularios se cargará en pocos segundos.

Cada plantilla en WPForms es 100% personalizable. Así que puedes insertar fácilmente nuevos campos, eliminar campos existentes o cambiar otras configuraciones.

En el siguiente paso, añadiré un campo desplegable con una lista bastante grande de opciones seleccionables.

Paso 3: Añadir un campo desplegable

Primero, arrastraremos un desplegable al formulario.

Luego, haz clic en el campo para que se abran las configuraciones a la izquierda.

En el panel izquierdo, verás varias opciones. Como cambiar la etiqueta del campo e introducir las opciones para tu desplegable.

Primero, demos un nombre más relevante y descriptivo al campo cambiando la etiqueta. Como quiero añadir una lista de libros que la gente puede solicitar en este campo, etiqueto este campo como "Libros a solicitar".

Ahora, es hora de añadir las opciones para tu desplegable. Es bastante fácil añadir opciones manualmente cuando solo tienes unas pocas.

Pero si tienes una lista larga, puedes ahorrar mucho tiempo dejando que la IA genere y añada las opciones por ti en su lugar.

Para usar la IA para las opciones, haz clic en el botón morado Generar opciones.

Ahora, describe las opciones en términos sencillos y la IA de WPForms generará tu lista casi al instante. Quiero añadir una lista de libros populares (que probablemente estarán disponibles en cualquier biblioteca decente), y eso es lo que voy a pedir en el prompt.

En pocos segundos, tuve una lista fantástica con la que trabajar. Pero si quieres cambiar la lista masivamente, puedes intentar modificar tu prompt y pedirle a la IA de WPForms que actualice la lista.

Una vez que estés satisfecho con las sugerencias, haz clic en Insertar opciones.

Las opciones generadas aparecerán en la lista de opciones en el panel izquierdo. También puedes editar manualmente estas opciones.

Por defecto, un visitante solo puede seleccionar una opción a la vez del desplegable. Pero es fácil cambiar estas configuraciones como te mostraré en el siguiente paso.

Paso 4: Editar la configuración del campo desplegable para habilitar la selección múltiple

Por defecto, un visitante solo puede seleccionar una opción a la vez del desplegable. Para cambiar esto, primero ve a la pestaña Avanzado del campo desplegable.

Después de eso, haz clic en Selección de opciones múltiples para activarlo.

¡Genial! Ya casi hemos terminado aquí. Pero personalmente no soy fan del estilo Desplegable Clásico (que es el modo predeterminado).

Esto hace que el desplegable aparezca como una caja rectangular con desplazamiento vertical, y necesitas presionar Ctrl (Comando en Mac) para seleccionar varias opciones.

Puedes hacer que el campo desplegable sea más intuitivo cambiando el Estilo de Clásico a Moderno.

Hay 3 razones por las que el estilo Moderno funciona mejor para un desplegable de selección múltiple:

• El campo de estilo Moderno muestra una fila con una flecha para expandir la lista. Es más compacto que el estilo Clásico, que siempre muestra 4 filas y ocupa más espacio en la pantalla.
• El campo de estilo Moderno te permite hacer clic en varias entradas sin mantener pulsada ninguna tecla del teclado. Con el campo Clásico, tu visitante necesitará mantener pulsada la tecla Control o Comando de su teclado para seleccionar más de 1 entrada a la vez.
• El desplegable de selección múltiple de estilo Moderno tiene un cuadro de búsqueda, lo que facilita encontrar el elemento que deseas rápidamente.

Guardemos nuestro progreso hasta ahora haciendo clic en el botón Guardar en la parte superior del constructor de formularios.

Ahora podemos publicar el formulario. Este es el paso final y solo toma unos minutos.

Paso 5: Publicar tu formulario

Ahora que hemos completado el formulario, es hora de publicarlo en tu sitio de WordPress.

WPForms te permite publicar tus formularios donde quieras. Puedes añadirlos a:

• Entradas
• Páginas
• Barras laterales
• El pie de página de WordPress.

En este ejemplo, creemos una nueva página para el formulario.

Para empezar, haz clic en Incrustar en la parte superior del constructor de formularios.

Ahora, vamos a hacer clic en Crear Nueva Página.

Escribe un nombre para tu página y luego haz clic en ¡Vamos!.

WordPress abrirá la nueva página y mostrará una vista previa de tu formulario. Haz clic en el botón azul Publicar en la parte superior derecha.

Ahora tu formulario con el desplegable de selección múltiple está en vivo y listo para usar.

¡Y eso es todo! Aprendiste a crear fácilmente un desplegable de selección múltiple en WordPress.

Crea tu formulario de WordPress ahora

Siguiente Paso: Divide tu Formulario en Páginas

Si buscas formas de hacer tu formulario más compacto, considera dividirlo en varias páginas. Esto puede hacer que los formularios largos sean mucho más fáciles de completar.

• Para saber cómo añadir saltos de página a un formulario, lee nuestra guía para crear un formulario de varios pasos.
• Para crear un formulario de varios pasos diseñado para aumentar las conversiones y los leads, consulta cómo crear un Formulario de Leads.

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.