¿Le gustaría cambiar el aspecto o el funcionamiento de los campos desplegables de sus formularios? Hay muchas formas de personalizar este tipo de campo para adaptarlo a sus necesidades.
Este tutorial le mostrará todas las formas en que puede personalizar el campo Dropdown en WPForms.
- Editar la etiqueta y la descripción del campo
- Editar, añadir y eliminar opciones
- Generación de opciones con WPForms AI
- Exigir el campo
- Activar la selección de varias opciones
- Elegir un estilo de campo desplegable
- Cambiar el tamaño del campo
- Añadir texto de marcador de posición
- Uso de opciones dinámicas desplegables
- Ocultar la etiqueta de campo
- Preguntas frecuentes
Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio WordPress. A continuación, puede crear un nuevo formulario o editar uno existente para abrir el constructor de formularios.
Si aún no lo ha hecho, añada un campo desplegable a su formulario haciendo clic en Desplegable en la sección Campos estándar del constructor, o arrastrando y soltando este campo en el área de vista previa del formulario.
Editar la etiqueta y la descripción del campo
En primer lugar, puede editar la etiqueta y la descripción de su campo desplegable. Haga clic en el campo desplegable que desea personalizar en el área de vista previa del formulario para abrir sus opciones de campo.
Nota: ¿Quiere saber más sobre todas las opciones de campo disponibles en WPForms? Consulte nuestra guía completa para obtener consejos adicionales de personalización.
Cambiar la etiqueta de campo
Por defecto, la etiqueta del campo será "Desplegable". En el panel Opciones de campo, puedes introducir tu propia etiqueta personalizada para que este texto sea el que tú quieras.
Añadir una descripción
Las descripciones de campo pueden proporcionar a los usuarios más detalles e instrucciones para rellenar el formulario. Puedes añadir una a tu campo desplegable en el campo Descripción del panel Opciones de campo.
Nota: ¿Quieres aprender más formas de añadir instrucciones a tus formularios? Echa un vistazo a nuestro tutorial sobre cómo añadir texto extra a tus formularios.
Editar, añadir y eliminar opciones
Los campos desplegables permiten a los usuarios seleccionar entre varias opciones. Puede personalizar estas opciones en el panel Opciones de campo.
Edición de opciones desplegables
Para personalizar el texto de cada una de las opciones desplegables, escriba la etiqueta deseada en el campo correspondiente.
Nota: ¿Quiere aprender a añadir una opción condicional "Otro" a su campo desplegable? Consulta nuestro tutorial sobre cómo configurar este tipo de opción para campos de selección.
Para reordenar las opciones del desplegable, basta con arrastrarlas y soltarlas en el orden en que desea que aparezcan.
Puede preseleccionar una opción haciendo clic en el botón de opción situado a la izquierda de su etiqueta.
Nota: Para más detalles sobre la preselección de una opción de su campo desplegable, consulte nuestro tutorial sobre cómo añadir valores predeterminados a sus campos de formulario.
Añadir o eliminar opciones desplegables
Para añadir una nueva opción al campo desplegable, haga clic en uno de los botones azules de signo más (+ ) situados junto a una opción existente en las opciones del campo.
La nueva opción aparecerá inmediatamente después de aquella cuyo botón más (+) ha pulsado.
Si desea añadir varias opciones al mismo tiempo, haga clic en Añadir en bloque.
A continuación, introduzca cada una de las nuevas opciones en su propia línea. Cuando haya introducido todas las opciones que desee incluir, haga clic en Añadir nuevas opciones.
Las nuevas opciones se añadirán después de la última opción existente.
Nota: ¿Busca más orientación sobre cómo añadir opciones a sus campos desplegables? Consulte nuestra guía sobre cómo añadir opciones de forma masiva a los campos de selección.
Para eliminar una opción del campo desplegable, haga clic en el botón rojo con el signo menos (-) situado junto a ella.
Generación de opciones con WPForms AI
También puede agregar opciones a su campo desplegable usando WPForms AI. Esta característica le permite generar rápidamente opciones relevantes basadas en su pregunta. Para usar WPForms AI, simplemente haga clic en el botón Generar opciones debajo de la sección Opciones.
Nota: Para aprender más sobre la generación de opciones con WPForms AI, asegúrese de revisar nuestro tutorial sobre el uso de AI Choices.
Exigir el campo
Al hacer que su campo desplegable sea obligatorio, puede asegurarse de que los usuarios realicen una selección antes de enviar el formulario.
Para requerir su campo desplegable, active la opción Requerido en la parte inferior de las opciones de campo.
Si un usuario intenta enviar su formulario sin hacer una selección en este campo desplegable, verá un mensaje que dice: "Este campo es obligatorio".
Nota: ¿Desea modificar el mensaje que verán los usuarios si intentan enviar un formulario sin rellenar un campo obligatorio? Nuestro tutorial sobre la personalización de los mensajes de validación tiene todos los detalles.
Activar la selección de varias opciones
Normalmente, los usuarios sólo pueden elegir una opción de un campo desplegable. Sin embargo, puede permitirles elegir varias opciones configurando algunos ajustes en las opciones avanzadas del campo.
Para habilitar la selección de múltiples opciones para su campo desplegable, haga clic en la pestaña Avanzado del panel Opciones de campo.
A continuación, active la opción Selección de varias opciones.
Nota: ¿Necesita más ayuda para configurar la selección de múltiples opciones? Consulte nuestro tutorial completo sobre esta configuración para obtener más detalles.
Elegir un estilo de campo desplegable
Hay dos estilos disponibles para el campo desplegable: Moderno y Clásico.
Estilo desplegable moderno
El estilo Moderno aparece con una pequeña flecha rellena en la que los usuarios pueden hacer clic para ampliar las opciones del campo.
No se preselecciona ninguna opción por defecto en un campo desplegable moderno.
Si activa la selección de múltiples opciones, los usuarios verán el típico campo desplegable. Cuando hagan clic en la flecha para ampliar las opciones disponibles, podrán hacer clic en tantas como deseen para añadir sus selecciones al campo.
Cada opción seleccionada tendrá un botón X que los usuarios pueden pulsar para eliminarla.
Nota: Para personalizar aún más el campo Desplegable moderno, como controlar el número de resultados de búsqueda mostrados, consulte nuestra documentación para desarrolladores para obtener opciones de configuración adicionales.
Estilo desplegable clásico
El campo desplegable de estilo clásico aparece con una flecha abierta en la que los usuarios pueden hacer clic para ampliar las opciones disponibles.
Por defecto, se seleccionará la primera opción que aparece en la pestaña General del panel Opciones de campo, a menos que preseleccione una opción diferente o añada texto de marcador de posición al campo.
Si la selección de múltiples opciones está activada, los usuarios verán este campo como una lista de opciones. Pueden hacer clic en una sola opción para seleccionarla, o pulsar la tecla Mayús del teclado y seleccionar varios elementos.
Las opciones seleccionadas aparecerán sombreadas.
Cambiar el tamaño del campo
Puede ajustar el ancho de su campo desplegable en su formulario publicado seleccionando Pequeño, Mediano o Grande en el desplegable Tamaño del campo.
Esta opción es especialmente útil cuando se crea un diseño de varias columnas.
Nota: Para más detalles sobre tamaños de campo, por favor vea nuestra guía completa de opciones de campo en WPForms.
Añadir texto de marcador de posición
Puede añadir texto de marcador de posición a su campo desplegable para dar a los usuarios instrucciones adicionales sobre cómo realizar sus elecciones. Esta opción también evita que un desplegable clásico preseleccione la primera opción.
Para añadir texto de marcador de posición a su campo desplegable, introduzca su texto personalizado en el campo Texto de marcador de posición de las opciones avanzadas de campo.
Nota: ¿Necesita más orientación sobre cómo agregar texto de marcador de posición a sus campos desplegables? Consulte nuestro tutorial sobre el uso de texto de marcador de posición en WPForms para obtener más información.
Uso de opciones dinámicas desplegables
Los campos desplegables pueden extraer datos de su sitio como taxonomías y títulos de contenido para utilizarlos como opciones. Estas opciones se actualizarán automáticamente en tus formularios a medida que las cambies en otras partes de tu sitio WordPress.
Para activar las opciones dinámicas, abra las opciones avanzadas de campo. A continuación, seleccione Tipo de entrada o Taxonomía en el menú desplegable Opciones dinámicas.
Nota: ¿Necesita más ayuda para configurar las opciones dinámicas de su campo desplegable? Vea nuestra guía completa para usar valores dinámicos en WPForms para detalles adicionales.
Ocultar la etiqueta de campo
Por último, puede activar la opción Ocultar etiqueta para ocultar la etiqueta del campo desplegable en el formulario incrustado.
Nota: Te recomendamos que añadas una etiqueta de campo en las opciones generales de campo para tu campo desplegable aunque ocultes su etiqueta en el frontend. Esto garantizará que el campo desplegable siga etiquetado en las entradas del formulario.
Preguntas frecuentes
A continuación, hemos respondido algunas de las preguntas más frecuentes sobre la personalización del campo Desplegable en WPForms.
¿Puedo modificar el aspecto del campo desplegable?
Sí. Con CSS personalizado, puedes personalizar el aspecto del campo desplegable en tu sitio. Sin embargo, esto implica añadir código CSS a tu sitio y está pensado para usuarios con conocimientos técnicos. Para obtener más información, consulta nuestro tutorial sobre la personalización del campo desplegable.
Ya está. Ya puedes personalizar los campos desplegables de tus formularios para que se vean y funcionen como tú quieras.
¿Desea agregar lógica condicional a sus campos desplegables? Echa un vistazo a nuestro tutorial sobre el uso de la lógica condicional inteligente en WPForms.