Cómo crear formularios de WordPress con campos desplegables (método fácil)

Los visitantes comienzan a llenar tu formulario de contacto y, de repente, lo abandonan a mitad de camino. Es una de las experiencias más frustrantes para cualquier propietario de sitio web, especialmente cuando sabes que esos prospectos podrían transformar tu negocio.

La verdad es que los formularios largos intimidan a los usuarios y crean fricción innecesaria en tu proceso de conversión.

Después de años ayudando a propietarios de sitios de WordPress a optimizar sus formularios, hemos descubierto que usar campos desplegables puede mejorar tus tasas de finalización de formularios.

Además, estos elementos simples no solo ahorran valioso espacio en pantalla, sino que también guían a los usuarios a proporcionar exactamente la información que necesitas saber sobre ellos.

En este tutorial, te mostraremos la forma más fácil de crear formularios de WordPress con campos desplegables que los visitantes realmente quieran completar.

¿Qué son los campos desplegables y por qué usarlos?

Un campo desplegable permite a los usuarios elegir una opción de una lista predefinida de diferentes variaciones. Los usuarios simplemente pueden hacer clic en el campo para ver todas las opciones desplegables.

Como propietario de un sitio web, puedes usar campos desplegables para crear formularios web, como formularios de contacto, formularios de registro de eventos, suscripciones a boletines por correo electrónico o formularios de pedido de productos.

Los campos desplegables pueden mejorar la efectividad de tu formulario. Aquí tienes algunas ventajas:

• Consistencia. La lista de opciones predefinida mantiene los datos recopilados consistentes y previene entradas inválidas. Esto hace que el análisis de datos sea más preciso.
• Campos dinámicos. Los campos desplegables facilitan la configuración de lógica condicional. La lista de opciones predefinida te permite mostrar campos adicionales basándose en la selección del usuario sin obstáculos innecesarios.
• Longitud de formulario reducida. Combinar múltiples opciones en un menú desplegable compacto hace que tu formulario parezca menos intimidante. Esto puede resultar en una mejor experiencia de usuario.

Dicho esto, veamos cómo crear formularios con campos desplegables en WordPress. Aquí tienes un resumen rápido de los pasos que cubriremos en este tutorial:

• Paso 1: Instalar el Mejor Plugin de Formularios de Contacto
• Paso 2: Crear un Nuevo Formulario Usando WPForms
• Paso 3: Agregar el Campo Desplegable a tu Formulario
• Paso 4: Configurar Desplegables con Opciones y Lógica Condicional
• Paso 5: Personalizar las Notificaciones y Confirmaciones de tu Formulario
• Paso 6: Incrustar tu Formulario en WordPress
• Paso 7: Publicar el Nuevo Formulario en tu Sitio de WordPress
• Consejo Adicional: Formas Creativas de Usar Campos Desplegables
• Preguntas Frecuentes: Usar Campos Desplegables en Formularios de WordPress
• Recursos Adicionales: Domina tus Formularios de WordPress

¡Empecemos!

Paso 1: Instalar el Plugin Mejor Formulario de Contacto

WPForms es el mejor plugin de formularios de contacto para WordPress. Cuenta con herramientas de IA y más de 2,000 plantillas, que te ayudan a crear formularios en solo unos clics.

En WPBeginner, usamos WPForms para crear nuestros formularios de contacto, encuestas anuales a usuarios y solicitudes de migración, ¡y no podríamos estar más satisfechos!

Siéntete libre de conocer todas sus características en nuestra reseña completa de WPForms.

Entonces, instalemos y activemos el plugin WPForms. Puedes ir a Plugins » Agregar Nuevo Plugin desde tu panel de WordPress.

En la siguiente pantalla, puedes usar el botón de búsqueda para encontrar el plugin WPForms. Una vez encontrado, puedes hacer clic en ‘Instalar Plugin’ y luego en ‘Activar’.

Para instrucciones detalladas, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Paso 2: Crear un Nuevo Formulario Usando WPForms

Tras la activación, deberías ver un menú de WPForms en tu área de administración de WordPress como este:

Ahora, podrás acceder a la interfaz del constructor de WPForms y crear formularios con campos desplegables.

Para empezar a crear un nuevo formulario, puedes ir a WPForms » Agregar Nuevo.

Ahora, verás el panel de ‘Configuración’ dentro del constructor de formularios de WPForms. En este panel, lo primero que necesitarás hacer es nombrar tu formulario.

Por ejemplo, puedes escribir ‘Formulario de Contacto Sencillo’ o simplemente ‘Formulario de Contacto’ en el campo ‘Nombra tu Formulario’.

Una vez hecho esto, es hora de elegir cómo construirás tu formulario de WordPress.

Con WPForms, puedes crear desde cero, elegir una plantilla predeterminada o usar el constructor de formularios con IA.

Si quieres usar el constructor de formularios con IA, todo lo que tienes que hacer es ingresar una indicación sencilla. La IA generará el formulario por ti en unos segundos.

Para esta guía, sin embargo, vamos a usar ‘Formulario de Contacto Sencillo’.

Para usar una plantilla de formulario, todo lo que tienes que hacer es pasar el cursor sobre la que quieras y hacer clic en ‘Usar plantilla’.

Para obtener instrucciones paso a paso, consulta nuestra guía detallada sobre cómo crear un formulario de contacto en WordPress.

Paso 3: Agregar el Campo Desplegable a tu Formulario

Después de completar el proceso de configuración, serás redirigido al constructor de formularios, donde hay una lista de campos a la izquierda y una vista previa en vivo a la derecha.

Ahora, queremos agregar un campo desplegable a nuestro formulario de contacto.

Simplemente arrastra ‘Desplegable’ y suéltalo en el lado derecho del formulario.

A la derecha del panel, podrás ver un campo desplegable en tu formulario de contacto. Puedes pasar el cursor sobre el campo para acceder a su configuración, que incluye:

• Un botón de copiar
• Un botón de eliminar
• Una instrucción de ‘Hacer clic para editar’
• Una instrucción de ‘Arrastrar para reordenar’

Usando la función de arrastrar y soltar, movamos el campo desplegable encima de ‘Comentario o mensaje’.

Al tener el campo de párrafo ‘Comentario o mensaje’ justo antes del botón de enviar, ofreces un mejor flujo para el proceso de finalización del formulario. También hace que tu campo desplegable sea más visible para que los usuarios no lo pasen por alto.

Paso 4: Configurar Desplegables con Opciones y Lógica Condicional

En este paso, configurarás la etiqueta, las opciones y la descripción de tu campo desplegable. Tu lista de opciones debe alinearse con tu tipo de formulario. Dado que estamos creando un formulario de contacto, ofrezcamos una opción de suscripción a boletín informativo.

Haz clic en tu campo desplegable y luego ve a ‘Opciones de campo’.

En la pestaña ‘General’, completa los detalles necesarios:

• Etiqueta. En los campos desplegables, las etiquetas suelen ser preguntas. Usaremos ‘¿Te gustaría suscribirte a nuestro boletín?’ como ejemplo.
• Opciones. Agreguemos ‘Sí, por favor.’ y ‘No, gracias.’
• Descripción. Puedes dejar ‘Puedes cancelar tu suscripción en cualquier momento.’ en este campo.
• Requerido. Activa esta opción para que los visitantes deban completar este campo.

A continuación, configuremos la lógica condicional.

La lógica condicional significa tomar decisiones con declaraciones de ‘si’ y ‘entonces’. Cuando se usa en formularios, decide qué sucede a continuación basándose en la respuesta que da un usuario.

Configurar la lógica condicional hace que los formularios sean más fáciles de completar. Al mostrar solo opciones relevantes basadas en selecciones anteriores, tu formulario no abruma a los usuarios con opciones innecesarias.

En este ejemplo, mostraremos un campo adicional si los usuarios eligen la opción ‘Sí, por favor’. Permitiremos a los suscriptores elegir con qué frecuencia desean recibir correos electrónicos promocionales.

Antes de eso, necesitarás preparar un nuevo campo. Vuelve a la pestaña ‘Agregar Campos’ y haz clic en ‘Desplegable’ o en cualquier otro tipo de campo. Luego, completa los detalles del nuevo campo.

Aquí tienes un ejemplo:

Ahora que el nuevo campo está listo, haz clic en él y navega a la pestaña ‘Lógica Inteligente’.

Desde aquí, puedes activar la lógica condicional activando la opción ‘Habilitar Lógica Condicional’.

Una vez activada, puedes configurar la lógica condicional para tu nuevo campo.

Comienza eligiendo ‘Mostrar’ u ‘Ocultar’ el nuevo campo. Luego, selecciona un campo existente y una entrada del usuario.

Aquí está nuestra configuración como referencia: ‘Mostrar’ este campo si ‘¿Te gustaría suscribirte a nuestro boletín?’ es ‘Sí, por favor’.

Paso 5: Personalizar las Notificaciones y Confirmaciones de tu Formulario

Es hora de personalizar tu nuevo formulario.

Puedes empezar configurando notificaciones por correo electrónico cada vez que un nuevo usuario envíe un formulario. Ve a Configuración » Notificaciones y activa la opción 'Habilitar notificaciones'.

Luego, revisa los detalles de notificación predeterminados de tu formulario debajo del interruptor.

Algunas entradas en el campo 'Notificación Predeterminada' tienen una 'Etiqueta Inteligente'. Esta etiqueta asume a dónde enviar las notificaciones de envío de formularios, entre otras cosas. Dicho esto, puedes ajustar la configuración según tus necesidades.

Por ejemplo, el campo 'Dirección de Correo Electrónico Enviado A' tiene la 'Etiqueta Inteligente' {admin_email}. Por defecto, este será el correo electrónico del administrador de tu sitio de WordPress. Por lo tanto, todas las notificaciones de envío de formularios irán a la bandeja de entrada del correo del administrador.

Puedes agregar más destinatarios, como tu especialista en marketing por correo electrónico. Solo asegúrate de separar cada correo electrónico con una coma.

Si deseas aprender cómo enviar el correo electrónico de tu formulario a varias personas o departamentos diferentes, lee nuestra guía sobre cómo crear un formulario de contacto con múltiples destinatarios.

A continuación, la copia predeterminada de tu 'Línea de Asunto del Correo Electrónico' es 'Nueva Entrada: Nombre de Tu Formulario'. Sin embargo, puedes cambiar la línea de asunto a tu gusto siempre que sea fácil de identificar.

Los usuarios que envíen un formulario deberían recibir una notificación en sus correos electrónicos. El campo 'Nombre del Remitente' permite a los usuarios saber quién envía el correo electrónico de notificación.

El siguiente campo es 'Correo Electrónico del Remitente', y la 'Etiqueta Inteligente' para este campo es {admin_email}.

Con esta configuración predeterminada, los usuarios recibirán correos electrónicos de notificación del correo electrónico de administrador de tu sitio.

La parte resaltada te informa que la dirección de correo electrónico de administrador de tu sitio está en un dominio diferente, por ejemplo, @gmail.com. Esto puede generar problemas de entrega, como que los correos electrónicos terminen en la carpeta de 'Spam'.

Puedes leer nuestra guía sobre cómo configurar WP Mail SMTP para asegurarte de que tus correos electrónicos lleguen a la bandeja de entrada de los lectores.

Por cada correo electrónico de notificación enviado, el destinatario también tiene la opción de responderlo.

En el campo 'Responder a', puedes establecer a qué dirección de correo electrónico se recibirán las respuestas de los usuarios. La 'Etiqueta inteligente' de este campo es {field_id= "1"}. Significa que las respuestas de los usuarios irán a la misma dirección de correo electrónico que la del campo 'Correo electrónico del remitente'.

Por último, el campo 'Mensaje de correo electrónico' tiene la etiqueta inteligente {all_fields}. Por lo tanto, tu mensaje de correo electrónico contendrá los campos de tu formulario junto con las respuestas del usuario.

Una vez que hayas terminado de personalizar tus notificaciones, navega a 'Confirmaciones'. En esta sección, configurarás cómo mostrarás la confirmación después del envío del formulario.

Primero, puedes elegir 'Mensajes', 'Mostrar página' o 'Ir a URL (Redirigir)' como tu tipo de confirmación.

Si eliges 'Mensaje' como tu tipo de confirmación, mostrarás un mensaje de confirmación para que los usuarios sepan que hemos recibido sus envíos de formulario.

Con este tipo de confirmación, puedes editar el mensaje predeterminado para que se ajuste a tu marca. Ve al campo 'Mensaje de confirmación' y escribe tu mensaje personalizado en el cuadro de texto.

Si eliges 'Mostrar página', deberás seleccionar una página existente en tu sitio web de WordPress. Y si optas por 'Ir a URL (Redirigir)', insertarás una URL de página.

Antes de pasar al siguiente paso, haz clic en 'Guardar' para no perder tu progreso.

Hecho esto, estás listo para mostrar tu nuevo formulario en tu sitio de WordPress.

Paso 6: Incrustar tu Formulario en WordPress

Para mostrar tu nuevo formulario en tu sitio de WordPress, puedes usar el asistente 'Incrustar' dentro del constructor de formularios de WPForms.

Esto activará la ventana emergente 'Incrustar en una página'. En ella, puedes elegir 'Seleccionar página existente' o 'Crear nueva página', lo que sea más relevante para ti.

En este ejemplo, vamos con 'Seleccionar página existente'.

El siguiente paso es elegir la página donde quieres mostrar tu nuevo formulario.

Simplemente haz clic en el menú desplegable y elige una página web existente. Una vez que lo hagas, haz clic en '¡Vamos!'.

Esto te redirigirá al editor de bloques de WordPress.

Desde aquí, necesitas hacer clic en el botón ‘+’ para agregar un bloque de WPForms.

Puedes escribir ‘WPForms’ en la barra de búsqueda y deberías ver el bloque de WPForms en los resultados de búsqueda.

Haz clic para agregarlo.

Después de agregar el bloque de WPForms, verás un menú desplegable en tu página.

Simplemente haz clic en el menú desplegable y elige un formulario de la lista. Seleccionemos ‘Formulario de contacto’ ya que es el formulario que acabamos de crear.

Paso 7: Publicar el Nuevo Formulario en tu Sitio de WordPress

En esta etapa final, previsualicemos el formulario antes de publicarlo para asegurarnos de que todo se vea perfecto. En el editor de contenido de WordPress, haz clic en Ver » Previsualizar en una pestaña nueva.

Si lo deseas, también puedes previsualizar cómo se ve el formulario en tabletas y dispositivos móviles. Todo lo que tienes que hacer es hacer clic en Ver » Tableta o Móvil » Previsualizar en una pestaña nueva.

Finalmente, si no se necesitan más ajustes, puedes continuar y presionar ‘Actualizar’.

¡Felicidades! Has agregado exitosamente tu nuevo formulario de contacto con campos desplegables en tu sitio web de WordPress.

Así es como se veía en nuestro sitio web de demostración:

Consejo adicional: Formas creativas de usar campos desplegables

¿Sabes qué es increíble sobre los campos desplegables? ¡Son mucho más versátiles de lo que la mayoría de la gente piensa!

Después de años construyendo sitios web, hemos descubierto algunas formas realmente ingeniosas de usar desplegables que van más allá de los formularios de contacto habituales. Aquí hay algunos de nuestros casos de uso creativos favoritos para inspirarte:

🛍️ Configuradores de Productos – Esto permite a los usuarios personalizar productos, como ‘Elige tu color’, ‘Selecciona talla’ o ‘Elige un acabado’. Esto es perfecto para páginas de productos de WooCommerce o formularios de pedido personalizados.

📅 Programación de Citas – Pequeñas empresas o sitios web de servicios pueden aprovechar los menús desplegables en cascada para fechas y horarios. Esto es especialmente útil para sistemas de reservas o solicitudes de consulta.

🗺️ Servicios basados en ubicación – Puedes agregar listas desplegables para seleccionar país, estado y ciudad mientras incrustas mapas en tus formularios. Esto puede ser súper útil para servicios de entrega o directorios de negocios locales.

✏️ Formularios de cuestionario – Las listas desplegables también son perfectas para preguntas de opción múltiple. Si estás impartiendo un curso en línea, ¡entonces puedes usar estos campos para mantener todo ordenado y organizado!

Por encima de todo, siempre puedes personalizar y dar estilo a tus formularios de WordPress aún más, para que se integren con el diseño de tu sitio web.

Preguntas Frecuentes: Usar Campos Desplegables en Formularios de WordPress

Aquí tienes respuestas a algunas de las preguntas más comunes sobre el uso de campos desplegables en WordPress.

¿Cuál es el mejor plugin para crear formularios con campos desplegables?

Recomendamos WPForms como la mejor opción. Sus herramientas de IA aceleran el proceso, el constructor de arrastrar y soltar es súper fácil de usar, y el campo desplegable está incluido incluso en la versión gratuita WPForms Lite.

Para funciones avanzadas como la lógica condicional, la versión WPForms Pro es una gran mejora.

¿Puedo agregar campos desplegables a mis formularios gratis?

¡Sí! El plugin gratuito WPForms Lite incluye el campo desplegable estándar, lo que te permite crear formularios organizados y fáciles de usar sin gastar un centavo.

¿Los campos desplegables son compatibles con dispositivos móviles?

Definitivamente. Cuando usas un plugin de calidad como WPForms, todos los campos del formulario son completamente responsivos. Eso significa que los menús desplegables se ajustan automáticamente para verse geniales y funcionar sin problemas en computadoras de escritorio, tabletas y teléfonos inteligentes.

¿Puedo usar imágenes como opciones en los campos de mi formulario?

WPForms Pro incluye una función de 'Opciones de Imagen' para botones de radio y casillas de verificación. Si bien esto no está disponible para los desplegables, permite a los usuarios elegir entre opciones visuales, perfecto para la selección de productos y formularios similares.

Recursos Adicionales: Domina tus Formularios de WordPress

Esperamos que esta guía te haya ayudado a aprender cómo crear formularios de WordPress con campos desplegables. Si te resultó útil, aquí tienes algunas guías seleccionadas para ayudarte a sacarles más provecho:

• Cómo personalizar y dar estilo a tus formularios de WordPress
• Cómo usar un formulario de contacto para hacer crecer tu lista de correo electrónico
• Cómo bloquear el spam de formularios de contacto en WordPress 
• Cómo rastrear y reducir el abandono de formularios en WordPress
• Guía definitiva para usar formularios de WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.