Cómo configurar un campo desplegable de selección múltiple en WordPress (la forma más fácil)
Publicado: 2020-10-26¿Necesita agregar un campo desplegable de selección múltiple en WordPress? Los menús desplegables de selección múltiple son una excelente manera de permitir que los usuarios elijan más de una opción de una lista.
En este artículo, le mostraremos una manera fácil y rápida de crear su propio menú desplegable de selección múltiple. No es necesario que escriba ningún código para crear el menú desplegable y agregarlo a su sitio web.
Cree su formulario de WordPress ahora
¿Cómo se seleccionan varias opciones en un menú desplegable?
Con WPForms, puede configurar cualquier menú desplegable para que sea un menú desplegable de selección múltiple.
Cuando su visitante haga clic en un elemento de la lista, el menú desplegable permanecerá abierto para que pueda realizar más selecciones.
Este menú desplegable también le permite buscar entre las opciones. Por lo que es perfecto para listas largas, como una lista desplegable de países.
Le mostraremos la manera fácil de hacer usted mismo un menú desplegable de selección múltiple.
Cómo configurar un campo desplegable de selección múltiple en WordPress
Echemos un vistazo a los pasos que vamos a seguir en este tutorial.
- Instale el complemento WPForms
- Crea tu formulario
- Agregue un campo desplegable de selección múltiple a su formulario
- Publique su formulario en su sitio web
Bien, comencemos instalando el complemento que vamos a usar.
Paso 1: Instale el complemento WPForms
WPForms es el mejor creador de formularios para WordPress. Es muy fácil crear cualquier formulario para su sitio web usando el generador de arrastrar y soltar.
Para comenzar a crear su formulario, querrá instalar y activar el complemento WPForms en WordPress. Si necesita ayuda con este paso, consulte esta guía para principiantes para instalar un complemento.
¿Todo listo? Sigamos adelante y creemos su primer formulario.
Paso 2: crea tu formulario
Ahora vamos a crear un formulario básico y agregarle un menú desplegable.
En este ejemplo, crearemos un formulario de voluntario con un selector de fechas y un menú desplegable.
WPForms tiene una excelente plantilla de formulario de solicitud para voluntarios. Pero para este ejemplo, usaremos el formulario de contacto simple como punto de partida.
Para comenzar, abra su panel de WordPress y haga clic en WPForms »Agregar nuevo .
Continúe y escriba un nombre para su formulario en la parte superior. Luego haga clic en la plantilla Formulario de contacto simple para abrirlo en su navegador.
Ahora que la plantilla está abierta, verás que ya tenemos 3 campos:
- Nombre
- Correo electrónico
- Comentario o mensaje
Agreguemos un campo de fecha para que la persona que complete el formulario pueda elegir el día en que le gustaría ayudar.
Primero, siga adelante y arrastre un campo de Fecha / Hora desde el lado izquierdo del generador de formularios hacia el lado derecho. Luego haga clic una vez en el campo Fecha / Hora para abrir la configuración.
Hay 2 configuraciones básicas que vamos a personalizar aquí:
- Cambie el texto de la etiqueta para adaptarlo a su forma
- Utilice el menú desplegable para cambiarlo a un campo de fecha solamente.
Ahora desplácese hacia abajo hasta Opciones avanzadas y haga clic en él para expandir la configuración.
Solo queremos voluntarios los días de semana, así que hagamos clic en Limitar días para que los fines de semana aparezcan atenuados. Para hacer esto, simplemente seleccione de lunes a viernes:
De acuerdo, eso está hecho, entonces podemos hacer clic en Guardar .
Pasemos a agregar nuestro menú desplegable de selección múltiple.
Paso 3: agregue un campo desplegable de selección múltiple a su formulario
En este paso, agregaremos un campo desplegable y luego lo personalizaremos para aceptar múltiples selecciones.
Primero, arrastremos un menú desplegable al formulario. Luego haga clic en el campo para que la configuración se abra a la izquierda.
Si lo desea, puede completar automáticamente el menú desplegable de otras partes de WordPress, como sus publicaciones o productos. Puede averiguar cómo en este artículo sobre cómo utilizar las opciones de campo dinámicas.
Pero si desea codificar la lista, WPForms lo hace fácil. Viene con algunas listas preestablecidas útiles para campos desplegables. Para acelerar las cosas, agregaremos una lista de estados de EE. UU. Que usan uno de los ajustes preestablecidos.
Primero, continúe y haga clic en Bulk Add en la configuración del campo desplegable.
Y luego haga clic en Mostrar ajustes preestablecidos para abrir todas las listas de ajustes preestablecidos disponibles.
Ahora hagamos clic en Estados para obtener automáticamente una lista de estados de EE. UU. Que podemos agregar al menú desplegable de selección múltiple.
Verá que la lista completa de estados se completa automáticamente en el cuadro Opciones . Haga clic en Agregar nuevas opciones para agregarlas como opciones de respuesta.
¿Notó que el campo desplegable tiene 3 respuestas predeterminadas? No olvide hacer clic en el signo menos junto a esas opciones predeterminadas para eliminarlas.
Muy bien, esas son todas nuestras opciones de respuesta configuradas en el campo desplegable.
Todo lo que tenemos que hacer ahora es decirle a WPForms que queremos que este sea un campo de selección múltiple.
Para hacer eso, vamos a desplazarnos hacia abajo en el lado izquierdo y expandir Opciones avanzadas .
Seleccionemos Selección de opciones múltiples en esta sección.
Hay otro cambio importante que hacer justo debajo.
Cambiemos el estilo de este campo a un menú desplegable Moderno .
¿Se pregunta por qué cambiamos este campo al estilo moderno?
Hay 3 razones por las que este campo funciona mejor para un menú desplegable de selección múltiple:
- El campo Estilo moderno muestra una fila con una flecha para expandir la lista. Por lo tanto, es más compacto que el estilo clásico, que siempre muestra 4 filas.
- El campo Estilo moderno le permite hacer clic en varias entradas sin mantener presionada ninguna tecla del teclado. Con el campo Clásico , su visitante deberá mantener presionada la tecla Control o Comando en su teclado para seleccionar más de una entrada a la vez.
- Y como mencionamos en la parte superior, el menú desplegable de selección múltiple de estilo moderno tiene un cuadro de búsqueda, lo que facilita la búsqueda rápida del elemento que desea.
Bien, tenemos nuestro menú desplegable configurado de la forma que queremos. Guardemos nuestro progreso hasta ahora haciendo clic en el botón Guardar en la parte superior del generador de formularios.
Ahora podemos publicar el formulario. Este es el paso final y solo toma unos minutos.
Paso 4: publique su formulario en su sitio web
Ahora que hemos completado el formulario, es hora de publicarlo en su sitio de WordPress.
WPForms le permite publicar sus formularios en cualquier lugar que desee. Puede agregarlos a:
- Publicaciones
- Paginas
- Barras laterales
- El pie de página de WordPress.
En este ejemplo, creemos una nueva página para el formulario.
Para comenzar, haga clic en Insertar en la parte superior del generador de formularios.
Ahora sigamos adelante y hagamos clic en Crear nueva página .
Escribe un nombre para tu página y luego haz clic en Let's Go .
WordPress abrirá la nueva página y mostrará una vista previa de su formulario. Haga clic en el botón azul Publicar o Actualizar en la parte superior derecha.
Ahora su menú desplegable de selección múltiple está en vivo y listo para usar.
¡Y eso es! Aprendió cómo hacer un menú desplegable de selección múltiple fácilmente en WordPress.
Cree su formulario de WordPress ahora
Siguiente paso: divide tu formulario en páginas
Si está buscando formas de hacer que su formulario sea más compacto, piense en dividirlo en varias páginas. Esto puede hacer que sea mucho más fácil trabajar con formularios largos.
Para saber cómo agregar saltos de página a un formulario, lea nuestra guía para crear un formulario de varios pasos.
¿Listo para construir tu formulario? Empiece hoy mismo con el plugin de creación de formularios de WordPress más sencillo. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo le ayudó, síganos en Facebook y Twitter para obtener más tutoriales y guías gratuitos de WordPress.