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 hacen que los visitantes se vayan sin terminar el formulario.

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 de diferentes variaciones. Los usuarios pueden simplemente 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 establecida mantiene la coherencia de los datos recopilados 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 te permite mostrar campos adicionales según 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.

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

¡Empecemos!

Paso 1: Instalación del plugin WPForms

WPForms es el mejor plugin de formularios de contacto para WordPress. Tiene herramientas de IA y más de 2000 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!

No dudes en conocer todas sus características en nuestra reseña completa de WPForms.

Así que, instalemos y activemos el plugin WPForms.

Puedes ir a Plugins » Añadir Plugin desde tu panel de WordPress.

En la siguiente pantalla, puedes usar la barra de búsqueda para encontrar el plugin WPForms.

Una vez encontrado, puedes hacer clic en ‘Instalar Plugin’ y luego en ‘Activar’.

Para obtener 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 creador de formularios de WPForms.

En este panel, lo primero que tendrás que 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 deseas usar el constructor de formularios con IA, todo lo que tienes que hacer es ingresar una indicación simple. 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 (Súper consejo: si solo tienes 2-3 opciones, considera usar Botones de Radio en su lugar para una mejor experiencia de usuario).

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:

A la derecha del panel, podrás ver un campo desplegable en tu formulario de contacto. Cuando hagas clic en el campo, podrás acceder a su configuración. También puedes pasar el cursor sobre él para ver opciones como:

• 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’

Así es como podría verse en tu pantalla:

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 completar el 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.

Simplemente haz clic en el campo desplegable en el panel de vista previa. Esto abrirá automáticamente la pestaña ‘Opciones del Campo’ a la izquierda.

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

• Etiqueta. Para los menús desplegables, las etiquetas suelen ser preguntas como ‘¿Te gustaría suscribirte a nuestro boletín?’ También recomendamos agregar un texto de marcador de posición como ‘Selecciona una opción’, para asegurar que los usuarios elijan una respuesta en lugar de enviar accidentalmente la opción predeterminada.
• 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 te permite mostrar u ocultar campos basándose en las respuestas previas de un usuario. Esto mantiene tus formularios cortos y ordenados al mostrar campos solo cuando son relevantes.

Configurar la lógica condicional hace que los formularios sean más fáciles de completar. Al mostrar solo las opciones relevantes según 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.

Para que la lógica condicional funcione, primero necesitamos el campo que aparecerá u desaparecerá según la elección del usuario. Vuelve a la pestaña ‘Agregar Campos’ y haz clic en ‘Menú Desplegable’ o 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’, que extrae automáticamente información de la configuración de tu WordPress o de los propios campos del formulario. Dicho esto, puedes ajustar la configuración según tus necesidades.

Por ejemplo, el campo 'Enviar a la dirección de correo electrónico' tiene la etiqueta inteligente {admin_email}. Por defecto, esta será la dirección de correo electrónico de administrador de tu sitio de WordPress. Por lo tanto, las notificaciones de envío de formularios irán a la bandeja de entrada del correo electrónico 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 a enviar el correo electrónico de tu formulario a varias personas o departamentos, lee nuestra guía sobre cómo crear un formulario de contacto con varios 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.

Si ves un mensaje de advertencia aquí, significa que tu ‘Correo electrónico del remitente’ no coincide con el dominio de tu sitio web (por ejemplo, usar una dirección @gmail.com en lugar de @tudominio.com).

Para evitar que tus correos electrónicos de notificación aterricen en la carpeta de ‘Spam’, debes asegurarte de que el ‘Correo electrónico del remitente’ coincida con el dominio de tu sitio web.

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 dónde irá tu respuesta si respondes al correo electrónico de notificación. Generalmente, deberías establecer esto a la dirección de correo electrónico del visitante.

Simplemente haz clic en ‘Mostrar etiquetas inteligentes’ y selecciona el campo ‘Correo electrónico’ de tu formulario.

Ahora, cuando recibas un envío y hagas clic en “Responder” en tu bandeja de entrada de correo electrónico, tu mensaje irá directamente al visitante que completó el formulario.

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’. Las notificaciones son alertas por correo electrónico que se envían después de que alguien envía el formulario, mientras que las confirmaciones son los mensajes en pantalla que los usuarios ven de inmediato.

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 (Redireccionar)‘, insertarás la URL de una 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 de contacto en una página

Para mostrar tu nuevo formulario en tu sitio de WordPress, puedes usar el asistente de ‘Incrustar’ dentro del creador 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 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 » Vista previa 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’.

¡Felicitaciones! 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

Los campos desplegables son increíblemente versátiles y se pueden usar para mucho más que simples formularios de contacto.

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

• 🛍️ Configuradores de productos – Esto permite a los usuarios personalizar productos, como ‘Elegir color’, ‘Seleccionar talla’ o ‘Elegir acabado’. Esto es perfecto para páginas de productos de WooCommerce o formularios de pedidos personalizados.
• 📅 Programación de citas – Las pequeñas empresas o los sitios web de servicios pueden aprovechar los desplegables en cascada para seleccionar fechas y horas. Esto es especialmente útil para sistemas de reservas o solicitudes de consulta.
• 🗺️ Servicios basados en ubicación – Puedes agregar desplegables para seleccionar país, estado y ciudad mientras incrustas mapas en tus formularios. Esto puede ser muy útil para servicios de entrega o directorios de negocios locales.
• ✏️ Formularios de cuestionarios – Los desplegables también son perfectos para preguntas de opción múltiple. Si estás dirigiendo un curso en línea, ¡puedes usar estos campos para mantener todo ordenado y organizado!

Por encima de todo, siempre puedes personalizar y estilizar 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 creador 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.

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 ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.