Cómo crear un formulario de varios pasos en WordPress en 10 minutos 

¿Quieres crear un formulario de varios pasos en WordPress que sea fácil de completar y convierta mejor?

He descubierto que dividir los formularios largos en pasos más pequeños puede mejorar realmente la experiencia del usuario. En lugar de mostrar todo a la vez, guías a las personas a través de campos pequeños que se sienten menos abrumadores.

En esta guía, te mostraré exactamente cómo crear un formulario de varios pasos usando WPForms, uno de los mejores creadores de formularios de arrastrar y soltar que existen.

Respuesta rápida: Para crear un formulario de varios pasos en WordPress, instala WPForms Pro, crea un nuevo formulario, arrastra el campo 'Salto de página' entre las secciones para dividirlo en pasos, habilita la barra de progreso en la configuración del formulario e incrusta el formulario en cualquier página. Todo el proceso dura unos 10 minutos y no requiere codificación.

Cuándo usar formularios de varios pasos

No todos los formularios necesitan dividirse en varios pasos, pero algunos tipos de formularios ven un claro aumento en las finalizaciones cuando se añaden saltos de página. Estos son los escenarios en los que marca la mayor diferencia:

• Formularios de registro con muchos campos: Los formularios de inscripción a eventos o de membresía que solicitan nombre, dirección, preferencias y detalles de pago a la vez se benefician de ser divididos en grupos lógicos.
• Formularios de generación de leads tipo cuestionario: Los formularios que califican leads en función de las respuestas (presupuesto, plazo, tipo de proyecto) se sienten como una conversación cuando se muestra una pregunta a la vez.
• Flujos de pago de varias páginas: Los formularios de pedido que recopilan información de contacto, detalles de envío y pago en pasos separados reducen la carga cognitiva en cada etapa.
• Formularios de solicitud de empleo: Las solicitudes con información personal, historial laboral y preguntas sobre disponibilidad encajan de forma natural en una estructura de tres pasos.
• Encuestas: Las encuestas más largas con varias áreas temáticas son más fáciles de completar cuando se agrupan en secciones temáticas en lugar de mostrarse como una sola página larga.

Consejos para un mejor diseño de formularios de varios pasos

Antes de empezar a construir, algunas decisiones de diseño harán que tu formulario sea mucho más fácil de completar. He visto que estas marcan una diferencia real en los formularios que he configurado con WPForms.

• Mantén cada paso con un máximo de 3-5 campos. Más de cinco campos por página vuelve a parecer un formulario largo.
• Etiqueta la barra de progreso con nombres de pasos, no solo números. “Paso 2: Tus datos de contacto” es más tranquilizador que “Paso 2 de 4”.
• Usa etiquetas de botón claras. “Siguiente paso” o “Continuar al envío” indica a los usuarios exactamente lo que sucederá cuando hagan clic.
• Habilita el botón Anterior. Los usuarios necesitan una forma de retroceder y corregir respuestas anteriores sin perder lo que ya han completado.
• Guarda las entradas parciales siempre que sea posible. WPForms Pro admite el guardado de entradas parciales, para que puedas hacer un seguimiento de los usuarios que comenzaron pero no terminaron.

La mejor manera de crear un formulario de varios pasos en WordPress

En este tutorial, usaremos WPForms para crear formularios de varias partes en WordPress. WPForms es el mejor plugin de creación de formularios de WordPress con arrastrar y soltar. Y con más de 3 millones de instalaciones activas, es la herramienta más fácil de usar para principiantes disponible.

Aún mejor, tiene una versión gratuita y otra de pago, pero hoy usaremos la versión Pro de WPForms para crear un formulario de varias páginas en WordPress.

¿Por qué no echas un vistazo a esta reseña de WPForms en profundidad para conocer todos los detalles?

Así que empecemos con el primer paso, que es crear un nuevo formulario.

Antes de empezar: El campo de salto de página que permite los formularios de varios pasos solo está disponible en WPForms Pro o superior. La versión gratuita de WPForms no incluye esta función. Si tienes instalada la versión gratuita, deberás actualizar antes de seguir los pasos a continuación.

Paso 1: Crear un nuevo formulario en WordPress

Lo primero que debes hacer es instalar y activar el plugin WPForms. Si no estás seguro de cómo hacerlo, puedes seguir esta guía paso a paso para instalar plugins de WordPress para principiantes.

Con WPForms, puedes dividir cualquier tipo de formulario en varias partes, así que vamos a crear un formulario de contacto sencillo.

Ve a WPForms » Añadir nuevo para crear un nuevo formulario y ver las plantillas disponibles.

Luego, en esa pantalla, ponle un nombre a tu formulario y elige la plantilla Formulario de contacto sencillo.

WPForms abrirá ahora la plantilla en el creador de formularios de arrastrar y soltar para que la edites.

El formulario de contacto sencillo viene con los siguientes campos ya añadidos a tu formulario:

• Nombre
• Correo electrónico
• Comentario o Mensaje

También puedes mover los campos del formulario y añadir campos extra arrastrándolos desde la columna de la izquierda a la columna de la derecha. Simplemente haz clic en cualquier campo del formulario para editar su contenido y arrástralo para reorganizar su posición.

Si deseas añadir más que un formulario de contacto a tu sitio de WordPress, también puedes crear los siguientes tipos de formularios con WPForms:

• Formulario de encuesta
• Formulario de pedido en línea
• Formulario estilo Type-form
• Formulario de carga de archivos

La mayoría de estos tipos de formularios son más largos que los formularios de contacto estándar, por lo que dividirlos en varios pasos puede mejorar las conversiones.

Paso 2: Dividir tu formulario en varias partes

Una vez que hayas personalizado tu formulario y añadido los campos que necesitas, agrega el campo Divisor de página para dividir tu formulario en diferentes páginas.

Puedes hacer esto buscando en la sección Campos avanzados y arrastrando el campo de formulario Divisor de página al panel derecho.

Luego, suelta el campo en tu formulario donde quieras que se divida.

Repite esto para cada sección donde desees dividir tu formulario en otra página. A partir de ahí, continúa personalizando tu formulario agregando los campos que necesitas para completarlo.

Si bien WPForms te permite agregar tantos formularios como desees, es crucial evitar abrumar a los usuarios con demasiada información. Hacerlo puede hacer que abandonen tu formulario, lo cual es lo contrario de lo que deseas lograr.

Paso 3: Personalizar la barra de progreso de tu formulario

Para mejorar el flujo de tu formulario, puedes incluir una barra de progreso. Una barra de progreso informa a las personas sobre las diferentes secciones de tu formulario y es un excelente indicador visual de cuánto queda por completar.

WPForms viene con 3 barras indicadoras de progreso diferentes para formularios de varios pasos, que son las siguientes:

1. Conectores: Barras de conexión y títulos de página para cada paso de tu formulario.
2. Círculos: Círculos numerados y títulos de página para cada paso del formulario.
3. Barra de progreso: Indicador del progreso del usuario a medida que completa los pasos del formulario.

Cada opción ofrece a los usuarios una experiencia visual diferente. La Barra de progreso muestra un relleno basado en porcentaje que avanza a medida que los usuarios completan cada paso. Las opciones Círculos y Conectores muestran recuentos de pasos ("Paso 2 de 4") con etiquetas con nombre, que funcionan bien cuando cada paso tiene un tema claro como "Tus datos" o "Pago".

Los nombres de los pasos merecen el minuto extra para configurarlos. Una etiqueta como "Paso 2: Dirección de envío" indica exactamente a los usuarios dónde se encuentran en el proceso, lo que reduce el abandono más que una barra sin etiqueta. Desde la perspectiva del usuario, los pasos etiquetados se ven profesionales y se sienten menos intimidantes que un indicador de progreso genérico.

Para cambiar la barra de progreso y el título de la página de la primera página de tu formulario de varios pasos, haz clic en el campo Divisor de página.

Verás un nuevo panel donde puedes elegir el tipo de progreso para tu formulario. En esa área, también puedes cambiar el color utilizado para resaltar el indicador de progreso si lo deseas.

Si seleccionas las opciones de círculos o conectores, también puedes cambiar el título de la página. Hacerlo ayuda a los usuarios a saber en qué parte del formulario se encuentran, para que no se pierdan. Pero si prefieres no hacerlo, se mostrará una barra de progreso estándar a los usuarios para guiarlos al completar tu formulario.

A continuación, puedes cambiar el botón y el texto de Siguiente página, que lleva a los usuarios a la siguiente página de tu formulario.

Para hacer esto, haz clic en la sección Divisor de página que agregaste al crear tu formulario.

Además, puedes agregar un botón de Página anterior haciendo clic en el interruptor a la posición Activado. De esa manera, los usuarios pueden retroceder si olvidaron agregar alguna información.

Una vez que hayas terminado de personalizar tu barra de progreso, haz clic en Guardar y pasa al siguiente paso.

Paso 4: Editar la configuración de tu formulario

Ahora pasemos a editar la configuración de tu formulario. Para ello, ve a Ajustes » General.

En esta sección, puedes establecer las siguientes opciones:

• Nombre del formulario – Dale un nuevo nombre a tu formulario si lo deseas.
• Descripción del formulario – Añade una descripción a tu formulario como referencia.
• Texto del botón de envío – Cambia el texto de tu botón de envío.
• Ajustes de spam – Habilita la opción de honeypot anti-spam para evitar que los spammers envíen envíos no deseados.
• Funciones de GDPR – Deshabilita el almacenamiento de la información introducida en tus formularios, como direcciones IP y otros datos sensibles, para cumplir con el GDPR.

Cuando la configuración esté configurada, haz clic en Guardar.

Paso 5: Configurar las notificaciones de tu formulario

La configuración de notificaciones en WPForms envía un correo electrónico cuando se envía un formulario en tu sitio de WordPress.

Puedes encontrar la configuración de notificaciones haciendo clic en Ajustes » Notificaciones.

Sin embargo, si no deshabilitas las notificaciones del formulario, recibirás un correo electrónico por cada formulario enviado en tu sitio.

Por otro lado, puedes usar etiquetas inteligentes para enviar un correo electrónico a las personas que rellenan tu formulario. Las etiquetas inteligentes son una excelente manera de hacerles saber que su formulario se ha procesado correctamente y que lo has recibido.

Es aún mejor usar esta función en formularios largos con varios pasos porque pueden tardar más en completarse. Además, evita que los usuarios se pregunten si todo ha ido bien. Para obtener más ayuda, puedes consultar la documentación sobre la configuración de las notificaciones del formulario aquí.

Cuando hayas terminado de configurar tus notificaciones, pasa a configurar tu mensaje de confirmación del formulario.

Paso 6: Definir el mensaje de confirmación de tu formulario

Los mensajes de confirmación de formulario son mensajes breves que se muestran a los usuarios cuando han enviado un formulario en tu sitio. Es una excelente manera de decirles a las personas que su formulario está siendo procesado y qué pasos seguir a continuación.

Hay 3 tipos de mensajes de confirmación en WPForms que incluyen:

1. Mensaje – Un mensaje simple que informa a los usuarios que su formulario ha sido enviado.
2. Mostrar página – Envía a los usuarios a una página diferente, como una página de agradecimiento después de enviar su formulario.
3. Ir a URL (Redirigir) – Envía a los visitantes del sitio a un sitio web diferente después del envío del formulario.

Para configurar tu mensaje de confirmación, haz clic en Ajustes » Confirmación.

Luego elige el tipo de mensaje que te gustaría mostrar a tus visitantes después de completar tu formulario. Para este tutorial, seleccionaremos Mensaje.

Ahora personaliza el texto del mensaje para que se adapte a tus necesidades y haz clic en Guardar cuando estés satisfecho.

Ahora estás listo para añadir tu formulario a WordPress.

Paso 7: Añadir tu formulario a WordPress

Una vez que hayas creado tu formulario de varios pasos, es hora de añadirlo a tu sitio de WordPress. Con WPForms, puedes añadir tu formulario a muchas áreas de tu sitio web. Esto incluye la página o publicación de tu sitio, tu barra lateral y cualquier otra área lista para widgets.

Veamos cómo añadir tu formulario de varios pasos a una página de WordPress.

El formulario se mostrará exactamente como se configuró en WPForms, incluida la barra de progreso y el diseño de varios pasos. Si aún no has creado una página de destino, el editor de arrastrar y soltar de SeedProd hace que sea sencillo crear una a partir de una plantilla sin tocar ningún código.

Luego, haz clic en el icono más en el editor de WordPress para añadir un nuevo bloque de contenido. En el campo de búsqueda, escribe WPForms para encontrarlo fácilmente.

Ahora haz clic en el bloque WPForms para añadirlo a tu página.

Cuando WPForms aparezca dentro de tu bloque, haz clic en la flecha desplegable para seleccionar tu formulario de varios pasos en la lista e insertarlo en tu página.

Luego, haz clic en Publicar para publicar la página en WordPress. Tu formulario de varios pasos aparecerá ahora en tu sitio web.

Añadir tu formulario de varios pasos a una página de destino de SeedProd

Has creado el formulario. Ahora la verdadera pregunta es dónde ponerlo. Añadir tu formulario de varios pasos a una página estándar de WordPress funciona, pero incrustarlo en una página de destino dedicada creada con SeedProd te da control total sobre el diseño alrededor del formulario, lo que significa menos distracciones y más conversiones.

SeedProd tiene un bloque WPForms incorporado que se conecta directamente a cualquier formulario que hayas creado.

Aquí te explicamos cómo configurarlo:

1. Abre tu página de destino en el constructor de páginas de SeedProd yendo a SeedProd » Páginas de destino y haciendo clic en Editar página.
2. En el panel izquierdo, busca WPForms y arrastra el bloque WPForms a tu página donde quieras que aparezca el formulario.
3. Haz clic en el bloque para abrir su configuración, luego usa el desplegable para seleccionar tu formulario de varios pasos de la lista de formularios existentes.
4. Ajusta el diseño de la sección circundante, el titular y los estilos de los botones para que coincidan con tu campaña, luego haz clic en Guardar y Publicar página.

El formulario se mostrará exactamente como está configurado en WPForms, incluyendo la barra de progreso y el diseño de varios pasos. Si aún no has creado una página de destino, el editor de arrastrar y soltar de SeedProd facilita la creación de una a partir de una plantilla sin tocar ningún código.

Preguntas frecuentes sobre formularios de varios pasos en WordPress

¡Y eso es todo! Has aprendido a crear un formulario de varios pasos en WordPress para que puedas empezar a mejorar la participación del usuario y las tasas de conversión de formularios en muy poco tiempo.

Si te ha gustado este artículo, consulta nuestro escaparate de los mejores plugins de WordPress para usar también en tu sitio.

Y para más tutoriales de formularios, consulta estos artículos:

• Cómo crear un formulario de WordPress con carga de archivos
• Cómo crear un formulario estilo Typeform
• Cómo crear un formulario de contacto en WordPress
• Cómo crear un formulario de pedido en línea en WordPress
• Cómo crear un formulario de registro de eventos en WordPress

Y si quieres, síguenos en Facebook y Twitter para obtener más consejos y tutoriales útiles.