Cómo agregar un formulario de varios pasos en WordPress en 5 sencillos pasos

¿Sabía que convertir su formulario de WordPress de un solo paso en un formulario de WordPress de varios pasos puede aumentar su conversión en casi un 60% ? De hecho, en algunos casos, la tasa de conversión puede llegar al 300% .

Sí. Porque hoy en día, las personas están demasiado ocupadas y tienen poca atención. Además de eso, si les pide que completen un formulario largo de un solo paso, lo más probable es que abandonen su sitio web y dejen el formulario incompleto.

Sin embargo, puede cambiar este escenario utilizando un formulario de varios pasos para su sitio de WordPress. Pero la pregunta es ¿cómo?

Bueno, es por eso que estoy aquí para mostrarte una guía paso a paso sobre cómo agregar un formulario de varios pasos en WordPress.

Siga leyendo para descubrir cómo puede crear fácilmente un formulario de varios pasos en el sitio web de WordPress en solo unos minutos...

¿Qué es un formulario de varios pasos?

Bueno, como sugiere el nombre, es un formulario con múltiples pasos donde las preguntas/campos de entrada se dividen en diferentes pasos en lugar de poner todo en un solo paso. Si está buscando una definición, así es como HubSpot define el formulario de varios pasos.

Un formulario de varios pasos es un formulario largo que se divide en varias partes. Se utilizan para hacer que los formularios largos sean menos intimidantes y desalentadores.

– Hubspot

Los formularios de varios pasos son básicamente un sustituto de los formularios largos con demasiados campos de entrada. Si tiene un formulario comparativamente más pequeño, entonces puede ceñirse a un formulario de un solo paso.

Ahora que sabe qué es un formulario de varios pasos, veamos algunas de las razones por las que debería considerar agregar un formulario de varios pasos a su sitio de WordPress.

¿Por qué usar el formulario de varios pasos en WordPress?

Bueno, la respuesta simple es disparar tu tasa de conversión. Los formularios de varios pasos se están volviendo extremadamente populares hoy en día en sitios web con usos como formularios de registro, formularios de reserva, formularios de pedido de comida, etc. Algunas de las razones por las que también debería considerar usar el formulario de varios pasos en su sitio web incluyen:

• Los formularios de varios pasos funcionan mejor cuando se trata de captar la atención del usuario. Como resultado, las personas se involucran más y completan el envío de formularios con más frecuencia.
• Los usuarios consideran que los pasos múltiples son más fáciles de usar y proporcionan una mayor facilidad de uso que un formulario largo de un solo paso.
• Dado que hay una barra de navegación/barra de progreso con un formulario de varios pasos, los usuarios se sienten más animados a completar un formulario de varios pasos.
• Los formularios condicionales de varios pasos son excelentes para recopilar solo los datos relevantes que necesita.
• Como resultado de todos los aspectos positivos mencionados anteriormente, los formularios de varios pasos aumentan la tasa de conversión.

Ahora que sabe que debe usar formularios de varios pasos en el sitio de WordPress, es hora de crear la configuración perfecta que necesita para crear su formulario de varias partes.

Configure lo que necesita para crear un formulario de varios pasos de WordPress

Junto con WordPress, necesitaría dos complementos más para crear formularios de varios pasos en WordPress con facilidad. Esos complementos de WordPress son:

1. Elementor (versión gratuita)
2. MetForm (Gratis y Pro)

Elementor es el mejor creador de páginas de WordPress y MetForm es uno de los complementos de formularios de varios pasos de WordPress de más rápido crecimiento. Si necesita ayuda para instalar MetForm, puede consultar nuestra documentación sobre cómo instalar MetForm.

Una vez que haya terminado de instalar, debe crear una página con el generador de páginas de Elementor antes de poder usar Metform. Para eso, vaya a Tablero ⇒ Página ⇒ Agregar nuevo .

Ahora, proporcione un título adecuado, seleccione Elementor Full Width como plantilla, haga clic en Publis h. Después de eso, haz clic en Editar con Elementor.

Finalmente, está listo para construir su formulario de varios pasos. Entonces, pasemos al proceso principal.

Nota: En este tutorial, le mostraré cómo agregar un formulario de varios pasos a una página. Pero también puede agregar fácilmente formularios creados con MetForm en una ventana emergente modal.

Cómo crear un formulario de varios pasos en WordPress

En este blog, aprenderá a crear un formulario de varios pasos de aspecto moderno desde cero en solo 5 sencillos pasos:

Paso 1: Arrastra y suelta MetForm

Una vez que esté en el modo Editar con Elementor , busque MetForm y arrastre y suelte en el lugar donde desea que aparezca el formulario.

Paso 2: Crear un nuevo formulario

Haga clic en la sección del formulario para ir a las opciones de Editar MetForm . Haga clic en el botón Editar formulario .

Una vez que aparece una nueva ventana

• Seleccione Nuevo (crear nuevo formulario)
• Proporcione un nombre de formulario para el formulario
• Elija la plantilla en blanco,
• y haga clic en el formulario de edición

Paso 3: Cree un formulario de varios pasos desde cero usando MetForm y el generador de páginas de Elementor

Una vez que haga clic en Editar formulario, obtendrá acceso a otra ventana nueva con el generador de páginas de Elementor para crear su formulario desde cero. Para crear un solo paso de un formulario de varios pasos, debe seguir estos cuatro pasos:

Agregar una nueva sección

Arrastre y suelte los campos de entrada según los requisitos

Arrastre y suelte el botón Anterior/Siguiente/Enviar dependiendo de la frase del formulario

Proporcionar un nombre propio a la sección.

Para este blog, voy a crear una demostración de un formulario de múltiples pasos de reserva de hotel de 3 pasos utilizando los pasos mencionados anteriormente. Los tres pasos del formulario incluirán información personal, información de reserva e información adicional

Formulario de reserva Paso uno - Información personal:

• Para la sección Información personal, haz clic en el icono de Elementor + y elige una estructura con dos columnas iguales .

• Busque el campo de entrada de texto y arrastre y suelte el campo de formulario en la columna izquierda.

• Ahora, para editar el atributo de este campo de entrada, haga clic en el signo de edición, vaya a Contenido ⇒ contenido y edite las siguientes opciones:
  • Mostrar etiqueta: Active esta opción para mostrar la etiqueta del campo de entrada.
  • Posición: puede elegir colocar la etiqueta en la parte superior o izquierda.
  • Etiqueta: Dale un nombre a tu etiqueta. Voy a usar "Nombre de pila".
  • Nombre: El campo de nombre es obligatorio y debe ser único. Por lo tanto, asegúrese de dar un nombre diferente a cada campo y reemplace el espacio con guiones bajos o guiones.
  • Marcador de posición: Proporcione un texto de marcador de posición.
  • Texto de ayuda: en caso de que desee proporcionar un texto de ayuda para los usuarios, puede hacerlo aquí.

• A continuación, ve a Contenido ⇒ Configuración para modificar las siguientes opciones:
  • Obligatorio: para que este campo de formulario sea obligatorio, active esta opción.
  • Tipo de validación: puede establecer diferentes tipos de validación para el campo de texto según la longitud del carácter, la longitud de la palabra y la expresión.
  • Mensaje de advertencia: aquí puede configurar el mensaje de advertencia que aparecerá si no se cumple el requisito.

Nota: Usaré la función de lógica condicional en el segundo paso de este formulario.

Al igual que el nombre, agregue otro campo de entrada de texto para el apellido. Como parte del paso de información personal, aquí agregaré dos campos más; Correo electrónico y número de móvil.

Una vez que haya terminado de modificar la configuración del campo Correo electrónico y Número de móvil. Busque y arrastre y suelte el botón Siguiente paso . Puede cambiar la configuración de diferentes botones, como la etiqueta, la alineación del botón, el icono, la posición del icono, etc.

• Ahora la sección para el primer paso está lista, para darle un nombre propio al primer paso.
  • Haga clic en el icono de seis puntos para abrir la opción de configuración y vaya a diseño ⇒ varios pasos .
  • Proporcione un nombre en la opción Título de la pestaña de varios pasos
  • Elija un icono de la biblioteca o cargue un SVG.
  • Haga clic en actualizar para guardar.

Ahora que la primera sección está lista, construyamos el segundo paso.

Formulario de reserva Paso dos - Información de reserva:

• Para el segundo paso, debe elegir una nueva sección. Elegiré una nueva sección con una sola columna y luego agregaré una nueva sección interna con dos columnas iguales.
• Después de elegir la columna, arrastre y suelte el campo de entrada de 2 fechas para las opciones de entrada y salida.

Regla obligatoria: debe elegir una nueva sección para comenzar el nuevo paso ; de lo contrario, cualquier campo de entrada que agregue se agregará al paso anterior. Por lo tanto, recuerde siempre que los nuevos pasos requieren una nueva sección, incluso si tiene el mismo diseño.

• Junto con la opción de configuración mencionada para el campo de texto, obtiene la siguiente configuración para el campo de entrada Fecha en Contenido ⇒ Configuración
  • Establecer la fecha actual como fecha mínima: Active esta opción para establecer la fecha actual como fecha mínima.
  • Establecer la fecha mínima manualmente: si no desea establecer la fecha actual como la fecha mínima, también puede establecer la fecha mínima manualmente.
  • Establecer fecha máxima manualmente: Aquí puede establecer la fecha máxima.
  • Deshabilitar lista de fechas: puede usar esta opción para deshabilitar algunas fechas. Para deshabilitar cualquier fecha, haga clic en el botón +AÑADIR ARTÍCULO y seleccione la fecha.
  • Entrada de fecha de rango: al activar esta opción, puede habilitar a los usuarios la opción de seleccionar un rango de fechas. Pero para este formulario, dejaré esta opción desactivada.
  • Entrada de año: Active esta opción para tomar un año como parte de la entrada de fecha.
  • Entrada de mes: para habilitar el mes como parte de la entrada de fecha, active esta opción.
  • Entrada de fecha: active esta opción para tomar una fecha (día) como parte de la entrada de fecha
  • Formato de fecha: establezca aquí el formato de la entrada de fecha.
  • Localización: Elija la ubicación del menú desplegable según su preferencia.
  • Quiere ingresar el tiempo con él: active esta opción para tomar el tiempo junto con los datos como entrada. Si activa esta opción, obtendrá otra opción que es Habilitar tiempo 24 horas. Con esta opción puede habilitar el formato de 24 horas.

Ahora, finalmente, vamos a utilizar la función de formulario condicional para el campo Check Out. Para hacer que el campo de check-out sea visible solo cuando el campo de check-in está vacío,

• Copie el valor del campo Nombre del campo de entrada Registro.
• Luego vaya a Contenido ⇒ Condicional , active la opción habilitar
• Elija Y en el menú desplegable Criterios de coincidencia de condición.
• En las opciones desplegables de Acción, elija Mostrar este campo .
• Haga clic en + AGREGAR ARTÍCULO , en el campo de entrada si, pegue el valor del nombre del campo de registro que copió.
• Elija " no vacío " en el menú desplegable de Coincidencia (comparación).

Ahora haga clic en el botón de vista previa para ver. El campo de salida solo debe estar visible una vez que elija una fecha de entrada.

Agregue una nueva sección interna para que el formulario no se vea mal cuando la opción condicional oculta el check-out inicialmente. Arrastre y suelte el campo de formulario Número dos veces para crear dos campos más para el número de habitaciones y el número de Personas.

Y dado que es el paso intermedio, debemos incluir los botones Anterior y Siguiente .

Una vez que haya terminado de editar la configuración de todos los campos agregados para esta sección, cambie el nombre de la sección/paso de diseño ⇒ multipaso tal como lo hizo con la primera sección. Lo estoy nombrando Información de reserva.

Ahora el segundo paso está listo, pasemos al tercer paso

Formulario de reserva Paso tres: información adicional

Para el tercer paso, agreguemos una nueva sección con una sola columna. Y agregue un campo de texto y asígnele el nombre Información adicional.

A continuación, agregue una sección interna de dos columnas dentro de la sección. Después de eso, arrastre y suelte un botón anterior y luego un botón de envío para enviar el formulario.

Nota: Puede agregar tantas secciones internas como desee. Pero para crear un nuevo paso, debe agregar una nueva sección.

Para dar un nombre a la tercera sección, vaya a diseño ⇒ varios pasos y agregue el título " Información adicional " y agregue un icono.

Por fin, hemos terminado de construir nuestro formulario de varios pasos de WordPress con 3 pasos. Ahora haga clic en actualizar para guardar y cerrar la ventana para pasar a la configuración de varios pasos.

Paso 4: habilite la opción de formulario de varios pasos de MetForm

Ahora que tenemos nuestro formulario, es hora de convertirlo en un formulario funcional de varios pasos. para hacerlo

• Ir a Contenido ⇒ Configuración de varios pasos
• Active la opción Habilitar varios pasos para activar las opciones de varios pasos.
• Habilite Mostrar navegación de varios pasos para que el menú Sección aparezca en la parte superior. También puede editar las diferentes configuraciones como Altura del contenedor de formulario adaptativo, Habilitar desplazamiento hacia arriba, etc.
• Después de realizar todos los cambios, haga clic en actualizar para guardar

Paso 5: configure la confirmación, la notificación y otras configuraciones para completar

Ahora que ha diseñado su formulario de varios pasos. Configuremos todos los ajustes de formulario que MetForm tiene para ofrecer. Para modificar la configuración de MetForm desde el panel de control de WordPress, vaya a MetForm ⇒ Formularios ⇒ Haga clic en la opción Editar del formulario que acaba de crear.

Nota: Aquí también encontrará el código abreviado del formulario que creó, que simplemente copie y pegue para agregar su formulario en cualquier lugar del sitio web. También puede acceder a la configuración del formulario desde la opción Editar formulario .

Aquí encontrará los siguientes ajustes:

General:

Como parte de la configuración general, puede modificar el título, el mensaje de éxito, el inicio de sesión requerido, el recuento de vistas , etc. También puede establecer cualquier URL personalizada a la que desee que lleguen los usuarios después de enviar el formulario.

Confirmación:

Puede enviar un correo electrónico de confirmación a sus usuarios con una copia de su formulario enviado con este complemento de creación de formularios. Active la opción de confirmación y luego puede configurar el Asunto del correo electrónico, Correo electrónico de, Del correo electrónico, Respuesta de correo electrónico a y Mensaje de agradecimiento.

Configuración de las notificaciones:

También puede enviar correos electrónicos de notificación de formulario al administrador con MetForm. Habilite la opción Correo de notificación al administrador. Luego configure el Asunto del correo electrónico, Correo electrónico para, Correo electrónico de, Nota del administrador , etc.

Después de realizar todas las ediciones, desplácese hacia abajo y haga clic en Guardar cambios para actualizar la configuración.

Además de la configuración, que he cubierto en este blog, también obtiene Integración como REST API, Mail Chimp, Google Sheet , etc. Además, integración de pasarela de pago como PayPal, Stripe. Integración de CRM que incluye HubSpot, Zoho, etc. También obtiene opciones de autenticación como inicio de sesión y registro . Para obtener más detalles sobre estas configuraciones, consulte nuestra documentación de MetForm.

Si ha seguido los pasos mencionados correctamente, debería obtener un formulario de reserva de varios pasos como el siguiente:

Envolver

Allí, acaba de crear su formulario de varios pasos de WordPress en unos minutos. Si crees que este formulario es simple, no te preocupes. El propósito principal de este blog fue mostrar cómo puede crear un formulario de varios pasos en WordPress usando MetForm.

Ahora que sabe cómo crear un formulario de varios pasos de WordPress, puede crear su propio formulario y lógica personalizados. Espero que utilice las funciones de MetForm para crear maravillosos formularios de varios pasos. En caso de que tenga algún problema en el camino, comparta con nosotros, nuestro equipo le responderá lo antes posible.

No olvide revisar todas las increíbles características que MetForm tiene para ofrecer.