Principiantes: cómo crear un formulario de varios pasos en WordPress (con un complemento)

¿Quiere crear formularios de múltiples páginas sin desorden en WordPress que se vean geniales y se conviertan bien?

Dividir un formulario en varias páginas ayuda a aumentar la participación y mejorar la experiencia del usuario, todo mientras combate la fatiga del formulario para que obtenga más conversiones de formulario.

En este artículo, le mostraremos cómo crear un formulario de varios pasos en WordPress.

Aquí hay una tabla de contenido de los pasos si desea avanzar:

• [VIDEO] Cómo crear un formulario de varios pasos en WordPress
• Crear un formulario en WordPress
• Divida su formulario en diferentes partes
• Personaliza la barra de progreso
• Configure las opciones de su formulario
• Configure las notificaciones de su formulario
• Personalice las confirmaciones de su formulario
• Agregue su formulario a su sitio web

¿Por qué utilizar un formulario de varios pasos en su sitio web?

En primer lugar, ¿se pregunta qué es un formulario de varios pasos? Es simplemente dividir su formulario en varias páginas o pasos para que no sea un formulario largo.

Y, a pesar de agregar más pasos a su formulario de WordPress, el uso de un formulario de varios pasos (también conocido como de varias partes o de varias páginas) en su sitio web de WordPress puede aumentar la tasa de conversión de formularios de su sitio, especialmente si el formulario tiene más de 3 campos de formulario.

De hecho, después de dividir lo que alguna vez fue un formulario de página de destino de un solo paso en WordPress en varios pasos, WhatIsMyComfortZone.com realmente vio que el 53% de los visitantes del sitio se convirtieron y se convirtieron en clientes potenciales, incluso cuando el formulario se dividió en muchos pasos.

Y, dado que hicieron las mismas preguntas en cada formulario, tenía sentido que, a partir de ese momento, todos los formularios largos se convirtieran en formularios de varios pasos en su sitio web.

Aquí hay algunas razones más para considerar la creación de un formulario de varios pasos en WordPress:

• Fomente el enfoque : al agrupar las preguntas del formulario, puede dividir la información en áreas de enfoque para el usuario.
• Reduzca el abandono de formularios : es más probable que los usuarios completen la información que solicita cuando se divide en páginas en lugar de presentarla como un formulario largo.
• Recopile solo lo que necesita : puede tener un formulario de varios pasos de WordPress con campos condicionales utilizando la lógica condicional. Muestre diferentes páginas del formulario según las respuestas que brinden los usuarios.

Entonces, echemos un vistazo a cómo crear un formulario de varios pasos en WordPress.

Cómo crear un formulario de varios pasos en WordPress

Si está buscando un formulario Elementor de varios pasos, lea este tutorial y vea cómo agregar un formulario Elementor a WPForms.

Mire el video anterior si se pregunta cómo se crea un formulario de varios pasos con un complemento. Si prefiere instrucciones escritas, continúe leyendo a continuación.

Y si está buscando el mejor complemento de formulario de contacto gratuito, asegúrese de consultar nuestra publicación que compara WPForms Lite con el Formulario de contacto 7.

Paso 1: crea un formulario en WordPress

Lo primero que deberá hacer es instalar y activar el complemento WPForms. Para obtener más detalles sobre cómo configurar este generador de formularios, consulte esta guía paso a paso sobre cómo instalar un complemento en WordPress.

A continuación, vaya a WPForms »Agregar nuevo para crear un formulario nuevo.

Puede dividir cualquier formulario en varias partes o pasos utilizando WPForms. Entonces, para nuestro ejemplo, crearemos un formulario de contacto simple.

En la pantalla de configuración, asigne un nombre a su formulario y seleccione la plantilla que desea utilizar, según el tipo de formulario que esté creando. Elegiremos la plantilla de formulario de contacto simple.

WPForms creará un formulario de contacto simple en el generador de arrastrar y soltar.

Desde este área de creación de formularios, puede agregar campos adicionales a su formulario de contacto arrastrándolos desde el panel de la izquierda al panel de la derecha.

Con la plantilla de formulario de contacto simple, ya tendrá los campos de formulario Nombre , Correo electrónico y Comentario o Mensaje .

Haga clic en cualquiera de los campos del formulario para realizar cambios. También puede hacer clic en un campo de formulario y arrastrarlo para reorganizar el orden en su formulario de contacto.

Si desea crear algo más complejo que un simple formulario de contacto, eche un vistazo a algunos de los otros tutoriales que tenemos usando plantillas prediseñadas que vienen con WPForms:

• Solicite un formulario de cotización
• Solicitud de empleo
• Formulario de pedido
• Formulario de encuesta
• Formulario de encuesta
• Formulario de registro de usuario

Estos formularios tienden a ser mucho más largos que un simple formulario de contacto y probablemente requerirán varios pasos para completar si solicita mucha información.

Ahora echemos un vistazo a cómo dividir su formulario en varias partes.

Paso 2: Divida su formulario en diferentes partes

Una vez que haya agregado y personalizado todos los campos del formulario en su formulario, debe agregar el campo del formulario Salto de página a su sitio para dividirlo en diferentes páginas.

Para hacer esto, arrastre el campo de formulario Salto de página , que se encuentra en Campos de fantasía , desde el panel de la izquierda al panel de la derecha.

Coloque el campo donde desea que se divida el formulario.

Haga esto donde quiera que su formulario se divida en otra página. Desde allí, puede agregar campos de formulario adicionales para completar su formulario.

WPForms le permite crear tantas páginas de formulario como desee, pero recuerde no abrumar a sus usuarios. Solo recopile la información que necesita. Siempre puede recopilar más información más tarde.

Paso 3: personalice la barra de progreso del formulario de varias páginas

Según sus necesidades, es posible que desee mostrar un indicador de progreso para que los usuarios conozcan las diferentes secciones de su formulario. De esta manera, siempre sabrán dónde se encuentran en su formulario y cuánto les queda por completar antes de hacer clic en "Enviar" según las barras de progreso.

Para facilitarle las cosas, WPForms viene con tres barras indicadoras de estilo de ruta de navegación diferentes para sus formularios de varios pasos:

1. Conectores: muestra una barra de conexión y títulos de página de cada parte de su formulario de varios pasos.
2. Círculos: muestra un círculo y un título de página por página en su formulario de varios pasos.
3. Barra de progreso: indica el progreso del formulario a medida que el usuario lo completa.

Para personalizar la barra de progreso y el título de la página de la primera página de su formulario de varios pasos, haga clic en la sección Salto de la primera página .

Aparecerá un nuevo panel en el Editor de formularios donde puede elegir qué barra de progreso desea usar. Aquí también puede cambiar el color del indicador de progreso.

También puede cambiar el título de la página para que los usuarios sepan en qué parte del formulario se encuentran si elige la opción Círculos o Conectores . De lo contrario, los usuarios solo verán una barra de progreso estándar que los guiará a través del número de pasos que quedan en el formulario de varios pasos.

Para personalizar el título de la página siguiente y el botón que lleva a los visitantes del sitio a la página siguiente en su formulario, haga clic en la sección Salto de página que creó cuando agregó el salto de página a su formulario.

Puede también alternar en la característica que le permite mostrar a los visitantes del sitio un botón Página anterior. De esta manera, pueden volver a la página anterior de su formulario si lo necesitan.

Cuando haga esto, también tendrá la oportunidad de cambiar la copia del botón.

Una vez que haya terminado de crear todos los saltos de página y personalizar el indicador de progreso, haga clic en Guardar .

Paso 4: Configure las opciones de su formulario

Para comenzar, vaya a Configuración » General .

Aquí puede configurar lo siguiente:

• Nombre del formulario : cambie el nombre de su formulario aquí si lo desea.
• Descripción del formulario: proporcione una descripción a su formulario.
• Enviar texto del botón: personalice la copia en el botón de envío.
• Prevención de correo no deseado: detenga el correo no deseado de los formularios de contacto con la función antispam, hCaptcha o Google reCAPTCHA. La casilla de verificación antispam se habilita automáticamente en todos los formularios nuevos.
• Formularios AJAX: habilite la configuración AJAX sin recargar la página para que pueda tener un formulario AJAX de varios pasos en WordPress.
• Mejoras de GDPR: puede deshabilitar el almacenamiento de información de entrada y detalles de usuario, como direcciones IP y agentes de usuario, en un esfuerzo por cumplir con los requisitos de GDPR. Consulte nuestras instrucciones paso a paso sobre cómo agregar un campo de acuerdo GDPR a su formulario de contacto simple.

Cuando haya terminado, haga clic en Guardar .

Paso 5: Configure las notificaciones de su formulario

Las notificaciones son una excelente manera de enviar un correo electrónico cada vez que se envía un formulario en su sitio web.

De hecho, a menos que desactive esta función, cada vez que alguien envíe un formulario de varios pasos en su sitio, recibirá una notificación sobre el envío.

Si usa etiquetas inteligentes, también puede enviar una notificación a la dirección de correo electrónico del usuario cuando envía un formulario, informándole que lo recibió y que se pondrá en contacto en breve. Esto asegura a los visitantes del sitio que su formulario se haya procesado correctamente.

También se agradece cuando se trata de formularios de varias páginas que pueden haber tardado mucho en completarse. Lo último que un visitante del sitio quiere preguntarse es si el formulario largo que acaba de completar se realizó.

Para obtener ayuda con este paso, consulte nuestra documentación sobre cómo configurar notificaciones de formulario en WordPress.

Además, si desea mantener la marca en sus correos electrónicos de manera consistente, consulte esta guía sobre cómo agregar un encabezado personalizado a su plantilla de correo electrónico.

Paso 6: personalice las confirmaciones de su formulario

Las confirmaciones de formulario son mensajes que se muestran a los visitantes del sitio una vez que envían un formulario en su sitio web. Le informan a las personas que su formulario ha sido procesado y le ofrecen la oportunidad de informarles cuáles son los próximos pasos.

Nuevamente, esto es útil especialmente cuando se trata de formularios largos en su sitio web.

WPForms tiene tres tipos de confirmación para elegir:

1. Mensaje. Este es el tipo de confirmación predeterminado en WPForms. Cuando un visitante del sitio envía un formulario, aparecerá un mensaje de confirmación simple que le informará que su formulario fue procesado. Busque aquí algunos mensajes de éxito que ayudarán a aumentar la satisfacción del cliente.
2. Mostrar página. Este tipo de confirmación llevará a los visitantes del sitio a una página web específica en su sitio agradeciéndoles por el envío de su formulario. Para obtener ayuda para hacer esto, consulte nuestro tutorial sobre cómo redirigir a los clientes a una página de agradecimiento. Además, asegúrese de consultar nuestro artículo sobre cómo crear páginas de agradecimiento efectivas para aumentar la lealtad de los clientes.
3. Vaya a URL (Redirigir). Esta opción se utiliza cuando desea enviar a los visitantes del sitio a un sitio web diferente.

Veamos cómo configurar una confirmación de formulario simple en WPForms para que pueda personalizar el mensaje que los visitantes del sitio verán cuando envíen un formulario en su sitio.

Para comenzar, haga clic en la pestaña Confirmación en el Editor de formularios en Configuración .

A continuación, seleccione el tipo de tipo de confirmación que le gustaría crear. Para este ejemplo, seleccionaremos Mensaje .

Luego, personalice el mensaje de confirmación a su gusto y haga clic en Guardar .

Para obtener ayuda con otros tipos de confirmación, consulte la documentación sobre la configuración de confirmaciones de formulario.

Ahora está listo para agregar su formulario de contacto a su sitio web.

Paso 7: agregue su formulario a su sitio web

Una vez que haya creado su formulario de varios pasos, debe agregarlo a su sitio web de WordPress.

WPForms le permite agregar sus formularios a varios lugares de su sitio web, incluidas sus páginas, publicaciones de blog y widgets de la barra lateral.

Echemos un vistazo a la opción de ubicación más común: incrustación de página / publicación.

Para comenzar, cree una nueva página o publicación en WordPress, o vaya a la configuración de actualización en una existente. Después de eso, haga clic dentro del primer bloque (el área en blanco debajo del título de su página) y haga clic en el icono Agregar WPForms.

El widget WPForms aparecerá dentro de su bloque. Haga clic en el menú desplegable WPForms y elija cuál de los formularios que ya ha creado desea insertar en su página. Seleccione el formulario que acaba de crear.

Luego, publique su publicación o página para que su formulario de contacto aparezca en su sitio web.

A continuación, haga clic en el botón azul en la parte superior derecha que dice Publicar o Actualizar, para que su formulario aparezca en su sitio web.

En conclusión

¡Y ahí lo tienes! Ahora sabe cómo crear un formulario de varios pasos en WordPress y puede comenzar a mejorar su experiencia de usuario y su tasa de conversión de inmediato.

Si está buscando inspiración para formularios de varias páginas, consulte este resumen de ejemplos de formularios de varios pasos.

¿Entonces, Qué esperas? Empiece hoy mismo con el mejor creador de formularios de varios pasos para WordPress.

Y no olvide que si le gusta este artículo, síganos en Facebook y Twitter.