Cómo crear un formulario multipasos con Elementor

Cómo crear un formulario multipasos con Elementor y Piotnet

¿Tiene formularios largos en su sitio web? ¿Tu analitycs marca visitas en las páginas de formularios y no recibes conversiones?. Los formularios largos desalentan a los usuarios y aumentan el porcentaje de abandono.

La alternativa pasa por segmentar los campos del formularios en varias páginas. Al dividir el formulario en fragmentos más pequeños, aumentarán el porcentaje de conversión. En la entrada de hoy vamos a explicar cómo crear un formulario multipasos con Elementor y Piotnet.

Índice de contenidos

Plugins con los que vamos a trabajar

Para llevar a cabo nuestro formulario multipasos necesitaremos la versión gratuita de Elementor y la versión pro del plugin Piotnet addons for Elementor.

A parte de permitirnos crear los formularios multipasos, tiene varios widgets interesante, sobretodo en relación a la creación de formularios. Podéis obtener más información o obtener una licencia clicando aquí.

Otra opción interesante del plugin es que nos permite activar solo los widgets que necesitemos. Para nuestro caso, desde nuestro administrador accederemos a Piotnet addons y activaremos los widgets Form builder (recuadro rojo de la imagen) y multi step Form (recuadro verde de la imagen).

activar modulos formulario multipasos piotnet

Cómo funciona el widget del formulario multipasos

Antes de pasar al proceso de desarrollo hay que entender cómo funciona. El formulario multipasos de Piotnet es el conjunto de unas plantillas diseñadas de forma individual. En cada una de dichas plantillas se definen de forma individual cada uno de los campos que van a formar parte del formulario y todos los campos de todas las plantillas se asocian con una ID única a un formulario.

Dicho así puede parecer muy complicado, pero ya veréis que paso a paso no es tan complicado

Creando las plantillas de los campos de texto

 A modo de ejemplo vamos a crear un formulario multipasos para que un cliente pueda pedir presupuesto para cambiar unas ventanas.

Como hemos dicho anteriormente, el formulario es un conjunto de plantillas. Para crear la plantilla del primer paso de nuestro formulario iremos a plantillas/ añadir nueva y desde la ventana emergente definiremos como tipo de plantilla una sección y le daremos título a la plantilla.

creando plantilla formurio multipasos piotnet

Ya en la pagina del maquetador buscaremos el widget «field» y lo insertaremos en el contenido. Con esto lo que pretendemos es crear el primer campo del primer paso de nuestro formulario multipasos. Desde los ajustes del widget definiremos :

  1. Form ID: Definiremos una ID única para el formulario. IMPORTANTE, todos los campos del todas plantillas de nuestro formulario deben tener la misma ID.
  2. Field ID: Definiremos el ID del campo que estamos editando.
  3. Shortcode: Se autocompleta de forma automática al definir la ID del campo, por lo que no deberemos hacer nada.
  4. Type: Definiremos el tipo de campo que va a ser. En nuestro caso lo definiremos como campo de texto.
  5. Placeholder: Definiremos el texto que va dentro del campo.
  6. Required: definiremos si el campo es obligatorio.
editando campo formulario multipasos

Desde los estilos del widget «field» personalizamos el campo según nuestras necesidades y como para nuestro ejemplo en el primer paso de nuestro formulario queremos añadir un campo para recoger el email. Duplicaremos el widget para no tener que repetir los estilos y modificaremos los ajustes.

Este proceso lo repetiremos para cada una de las plantillas de los pasos del formulario. Eso si, recuerda que la ID del form debe ser la misma para todos campos y que las ID de los campos deben ser únicas, es decir, que no se pueden repetir.

Creando las plantillas de los campos de imagen

El proceso es muy similar al de crear un campo de texto pero modificando algunos ajustes del widget:

  1. Modificamos el tipo de campo y seleccionamos Image Select.
  2. Definimos las opciones del campo como en la imagen que viene a continuación. Para su mayor compresión comentar que la primera parte de cada una de las opciones definen el nombre de la opción y la segunda parte el valor que recoge el formulario.
  3. Subimos las imágenes que van a formar parte del campo. Recuerda ponerlas en el orden correcto cuando edites la galería.
Como hicimos con los campos de texto, desde la sección estilos del widget personalizamos según nuestras necesidades. Y ya tendríamos creadas todas las plantillas que van a formar parte de nuestro formulario multipasos.

Unimos todas las plantillas del formulario multipasos

Desde nuestro administrador de WordPress nos vamos a plantillas/plantillas guardadas. Aquí encontraremos un listado de todas las plantillas que formarán parte del formulario. Cada una de ellas esta asociada a un shortcode. Pues este shortcode es el que deberemos insertar en cada uno de los pasos.
shortcodes piotnet formulario multipasos

Sin cerrar la página donde están los shortcodes, abre otra ventana en tu navegador y crea la página/entrada donde vas a insertar el formulario. Accede al maquetador de Elementor, busca el widget Multi step form y añadelo al contenido. No vamos a entrar en detalle de todos los ajustes, por lo que solo nombraremos los esenciales:

  1. Form ID: definimos la ID del formulario. Recuerda, es muy importante que sea la misma que has definido en todos los campos. De no ser así los campos no estarán asociados al formulario.
  2. Añadir elemento: Primero insertamos el titulo del paso en el formulario y luego insertamos el shortcodes de la plantilla de ese paso. Recuerda que podemos recuperar cada uno de los shortcodes desde la página que anteriormente hemos dejado abierta. Y así sucesivamente con todas las plantillas que has creado para tu formulario.
  3. Botón: Nos permite definir que tipo de botones queremos en el formulario y traducir sus textos.
  4. Actions after submit: Que acciones se deben realizar después del envío del formulario. En nuestro caso pondremos una simple redirección a una pagina de agradecimiento. La url la definiremos en la campo que en la imagen aparece con una flecha.
  5. Email: Todos los ajustes del correo. A quíen va dirigido, el asunto del correo, las meta datas, etc etc
multiformulario Elementor

Publicamos y si visitamos la página que hemos creado podremos ver nuestro formulario multisteps.

Y ya hemos aprendido a cómo crear un formulario multipasos con Elementor y Piotnet. Si quieres dar un repaso a todo lo explicado puedes ver el video que hay al final del post.

Como crear un formulario multipasos con piotnet addons for Elementor

Bien, pues ya te hemos explicado cómo crear un formulario multipasos con Elementor y Piotnet addons for Elementor. Si tienes alguna duda puedes dejarla en comentarios. 

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Cómo crear un formulario multipasos con Elementor

Cómo crear un formulario multipasos con Elementor y Piotnet

¿Tiene formularios largos en su sitio web? ¿Tu analitycs marca visitas en las páginas de formularios y no recibes conversiones?. Los formularios largos desalentan a los usuarios y aumentan el porcentaje de abandono. La alternativa pasa por segmentar los campos del formularios en varias páginas.

efectos visuales para Elementor

Cómo crear 5 efectos visuales para Elementor

En el tutorial de hoy os vamos a explicar cómo crear 5 efectos visuales para Elementor, esperamos que os gusten. Índice de contenidos Efecto post-it con Elementor Para no confudiros y no caer en errores estar atentos en los ajustes de secciones y columnas. Las

Cómo crear formularios de registro con Elementor

Cómo crear formularios de registro con Elementor y Ultimate addons

Algo que se hecha en falta en Elementor es la posibilidad de crear formularios de registro. En esta entrada os explicaremos cómo crear formularios de registro con Elementor y Ultimate addons for Elementor. Os mostraremos varias formas de mostrar los formularios de registro. Desde crearlo

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba