Cómo crear un formulario de varios pasos en WordPress

Hace unos días, alguien me preguntó acerca de cómo crear formularios de varios pasos en WordPress. Estaba en una fiesta, de alguna manera en una conversación, surgió el problema. No estaba de humor para explicarle el tema en ese momento, pero como estoy trabajando con WordPress, sentí que lo convencía y de alguna manera tenía que hacerle entender.

Más tarde, el problema tomó mi consideración y pensé en escribir una publicación basada en un tutorial que podría ayudar a otros a crear un formulario de varios pasos en WordPress. Es por eso que estoy dando un intento de hacer esto posible.

¿Por qué diseñar formularios de varios pasos?

Un formulario es una de las formas más fáciles de recopilar información y ponerse en contacto con su audiencia. Puede ser un formulario casual simple, puede ser un formulario comercial o cualquier tipo de formulario relacionado con una encuesta.

Sin embargo, los formularios largos a veces son desagradables para los usuarios y, en última instancia, también pueden considerarse una mala experiencia de usuario. Para deshacerse de este problema, casi todas las grandes empresas utilizan formularios de varios pasos que se dividen en secciones y páginas.

La barra de progreso en la parte superior de la página ofrece a los usuarios más comodidad y control al completar el formulario y, lo que es más importante, brinda un sabor diferente de interactividad con sus usuarios. Además, aumenta su compromiso con los usuarios rápidamente.

Cómo crear un formulario de WordPress de varias páginas con WP Fluent Form

Usaré WP Fluent Form aquí para que lo entiendas. WP Fluent Form es un complemento de formulario de WordPress fácil de usar y de rápido crecimiento para crear cualquier tipo de formulario.

En primer lugar, debe instalar y activar el complemento WP Fluent Form en WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de activar el complemento WP Fluent Forms y completar el proceso de licencia, tendrá un entorno agradable para crear un formulario de varios pasos en su sitio web.

Creo que vas a crear un formulario de varios pasos de tres pasos como lo estoy haciendo ahora. El primer paso es para la información personal del usuario, la segunda página es para la información educativa del usuario y la tercera página cubrirá los pasatiempos del usuario. Ahora, le mostraré cómo hacer que suceda usando WP Fluent Form.

WP Fluent Forms le ofrece más de 60 plantillas de formulario listas para usar integradas. Puede usar cualquiera de ellos con un solo clic para cumplir el propósito respectivo. Una vez que haya terminado con el clic, verá que se ha creado automáticamente un formulario respectivo.

También puede crear formularios manualmente desde cero. Para crear un formulario desde cero, simplemente vaya a Fluent Form —> Create a Blank Form , se mostrará un cuadro de diálogo con tres formatos de formulario predeterminados y una opción personalizada para crear un nuevo formulario.

Para más detalles, vea cómo crear un nuevo formulario con Fluent Forms.

Una vez que haya terminado con el clic en Crear un formulario en blanco , encontrará un generador de formularios que aparecerá con las opciones de configuración. En la barra lateral derecha, encontrará campos de entrada que se pueden arrastrar y soltar para agregar la característica específica a su formulario.

Después de crear el formulario, ahora debe ingresar los campos necesarios en ese formulario. Para hacerlo posible, arrastre y suelte los campos deseados; por ejemplo, para su información personal, pondrá cuatro campos diferentes en el formulario.

Tiene los campos de entrada, ahora tiene que hacer clic o arrastrar y soltar cualquier campo de entrada específico para agregar cualquier función a su formulario. Una vez que haya agregado cualquier campo de entrada, cambie la etiqueta del elemento para cada parte de acuerdo con el nombre deseado. Dejo un par de capturas de pantalla para su mejor comprensión.

Agregue campos de nombre, campos de dirección , correos electrónicos según sus necesidades. Puede personalizar todos los campos de entrada y cambiar su etiqueta de campo de administrador, marcador de posición, etiqueta de elemento, etc.

Estoy agregando el campo de entrada desplegable al editor antes del campo Dirección y lo nombro como Sexo . En la sección Sexo , tienes que configurar las opciones del menú desplegable.

También puede reorganizar los campos de entrada simplemente arrastrando y soltando. Como puede ver en la siguiente imagen, estoy arrastrando y soltando el campo de entrada Género .

Agregue el campo de entrada Paso de formulario donde desea finalizar el primer paso de su formulario. Esto creará un salto de página en su formulario de varios pasos. Agregue otros campos debajo para que aparezcan en la página siguiente.

Ahora coloque el cursor sobre la sección Inicio de paginación , luego encontrará la opción Editar (un icono de lápiz). Haga clic en él y lo llevará a Personalización de entrada . Allí, debe dar un título a cada paso haciendo clic en el botón de la barra de progreso .

Escriba el nombre del título para cada paso. Por ejemplo, escriba Información personal en el campo de entrada Paso 1 . Escriba Educación en el campo de entrada Paso 2 y así sucesivamente. Ahora eche un vistazo a la sección de vista previa.

La imagen muestra una barra de progreso y un botón Siguiente como indicador en la parte superior e inferior del formulario, respectivamente.

Ahora debe trabajar en la segunda página del formulario que indica la parte de educación del formulario. Para ello, puede utilizar el campo de texto simple para la universidad y la universidad para la entrada. Debe usar el campo desplegable para la entrada de 'Título' en el formulario.

Echemos un vistazo a la captura de pantalla de todos y cada uno de los campos de entrada. Para la universidad y la universidad, primero debe personalizar las etiquetas.

Para el campo de entrada Grado , debe usar el campo de entrada Desplegable . En este caso, primero debe personalizar su etiqueta, luego debe dar opciones para la lista desplegable.

Ahora, irá a la tercera página que está relacionada con el pasatiempo del usuario. Para que esto suceda, tenemos que seleccionar nuevamente Paso de formulario para hacer un enfoque para esto.

Se creará un nuevo campo de entrada instantáneamente después de hacer clic en el campo Paso de formulario en la sección Inicio de paginación . Escriba el nombre del título para el tercer paso haciendo clic en la opción Editar de la sección 'Paso de formulario'.

Escriba el título escribiendo Hobby en el campo de entrada. Luego vaya a la tercera sección del formulario. Puede seleccionar un campo de texto simple para cada pasatiempo.

Tienes que soltarlo justo encima del botón Enviar formulario .

De esta manera, puede tomar dos áreas de Texto Simple más para dar una vista total en la tercera sección del formulario. Luego personaliza la 'Etiqueta del elemento' con el texto de Hobby One .

Tienes que personalizar el resto de los dos campos con el nombre de Hobby Two y Hobby Three respectivamente. Luego mira la vista previa de esta interfaz.

En la parte inferior de la página, puede proporcionar el campo Términos y condiciones para completar el procedimiento total. Luego, podemos revisar todo el proceso de envío del formulario.

Ahora, eche un vistazo a la última vista previa.

Así es como puede crear un formulario de varios pasos usando WP Fluent Form. Esto es bastante útil y efectivo para trabajar con WP Fluent Form , ya que le brinda las funciones más convenientes para crear un formulario de varios pasos para cumplir con sus propósitos específicos.

Para aprovechar esta funcionalidad y crear formularios de varios pasos hermosos, compactos e intuitivos, ¡descargue el complemento WP Fluent Form Pro ahora!

Suscríbase a nuestro canal de YouTube para obtener consejos y trucos relacionados con WordPress. Además, síguenos en Twitter y Facebook.