¿Te gustaría saber cómo crear un formulario en varios pasos con Elementor ?

¿Conoces Typeform? El es un creador de formas popular plataforma en línea conocida por su estilo interactivo. En Typeform puedes crear un formulario juego en línea interactivo de varios pasos para una amplia gama de propósitos.

Si tiene un sitio web basado en WordPress impulsado por Elementor, puede integrar sin esfuerzo su formas Typeform usando complementos esenciales.

Ver también: Cómo agregar una cuadrícula de precios en Elementor

Pero desde la versión 2.9, Elementor en sí mismo tiene una característica que puedes usar para crear formas en varias etapas. En este artículo te mostraremos cómo hacerlo con la ayuda deElementor.

Un formulario Los pasos múltiples en sí son una gran idea para ahorrar espacio en su diseño (ya sea una página o una plantilla de creación de temas). Le permite acortar un formulario largo a uno más simple.

Cómo crear un formulario de varios pasos en Elementor

Antes de comenzar, asegúrese de haber actualizado su Elementor a la versión pro en caso de que no lo haya hecho, ya que el widget Form (el widget Elementor para crear formularios) solo está disponible en Pro.

Lea también: Cómo crear un formulario de contacto en Elementor

En este artículo, pasaremos directamente a agregar el widget de formulario. El formulario de varios pasos que vamos a crear consta de los siguientes tres pasos:

  • Paso 1: nombre y género
  • Paso 2: teléfono y correo electrónico
  • Paso 3: botón de opción

Primero, arrastre el widget Formulario al cuadro de edición de Elementor.

Vaya al panel de configuración en el lado izquierdo para realizar la configuración. En el bloque Campos de formulario sous la pestaña Contenido, defina los campos según sus necesidades. En nuestro caso, los campos son los siguientes:

  • Nombre
  • Género
  • Teléfono
  • Mensajería electrónica
  • afición

crear un formulario en varios pasos

Una vez que haya terminado de agregar y definir los campos de formulario que necesita, agregue otro campo y establezca el tipo de campo en paso.

Ver tambien Cómo crear una imagen redondeada en Elementor

Este paso agrega automáticamente un nuevo campo en el orden superior y un nuevo campo en la parte inferior. Puede establecer la etiqueta del campo superior en algo como paso 1.

Luego, arrastre el campo inferior y colóquelo justo encima del campo del segundo paso (el campo Teléfono en este caso).

Agregue otro campo y establezca el tipo de campo en el paso. Arrástrelo y colóquelo justo encima del campo en el tercer paso (el campo Hobby en este caso).

crear un formulario en varios pasos

Listo. Puede obtener una vista previa del resultado antes de personalizar el formulario. De forma predeterminada, el tipo de paso se establece en número y texto.

Puedes editar desde el bloque Parámetros de paso debajo de la pestaña Contenido.

Puedes acceder a la pestaña Estilo para personalizar su formulario. Hay 5 bloques de ajuste que puede abrir.

crear un formulario de varios pasos con Elementor

  • Formulario de Contacto : puede abrir este bloque para definir el espacio entre las columnas y las líneas del formulario, la tipografía (familia de fuentes, tamaño de fuente, estilo de fuente, etc.) de las etiquetas del formulario y el color del texto de este último. .
  • Terrenos : Puede abrir este bloque para definir la tipografía de los campos del formulario, el color del texto de los campos, el fondo, el ancho del borde, el color del borde y el radio del borde.
  • Botón: Puede abrir este bloque para personalizar los botones. Ya sea el botón de enviar, el botón anterior o el botón siguiente. Puedes definir elementos como la tipografía del texto, el color del texto, el color de fondo, etc.
  • Mensaje: Puede abrir este bloque para definir la tipografía de los mensajes así como el color del texto.
  • Pasos: Puedes abrir este bloque para definir la tipografía de los pasos, el color, el ancho del separador, el espacio del separador, etc ...

Una vez que haya terminado de editar su plantilla, puede publicarla o actualizarla.

Lea también: Cómo crear una sección de miembros del equipo con Elementor 

Si desea insertar el formulario que acaba de crear en una página de Gutenberg (o tal vez desee insertarlo en una publicación de blog), puede guardar el widget de formulario como un widget global. Luego puede importar el widget usando el complemento Bloques Elementor para Gutenberg.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo crear un formulario de varios pasos con Elementor.  Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...