¿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).
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.
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 :
- Form ID: Definiremos una ID única para el formulario. IMPORTANTE, todos los campos del todas plantillas de nuestro formulario deben tener la misma ID.
- Field ID: Definiremos el ID del campo que estamos editando.
- Shortcode: Se autocompleta de forma automática al definir la ID del campo, por lo que no deberemos hacer nada.
- Type: Definiremos el tipo de campo que va a ser. En nuestro caso lo definiremos como campo de texto.
- Placeholder: Definiremos el texto que va dentro del campo.
- Required: definiremos si el campo es obligatorio.
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:
- Modificamos el tipo de campo y seleccionamos Image Select.
- 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.
- Subimos las imágenes que van a formar parte del campo. Recuerda ponerlas en el orden correcto cuando edites la galería.
Unimos todas las plantillas del 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:
- 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.
- 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.
- Botón: Nos permite definir que tipo de botones queremos en el formulario y traducir sus textos.
- 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.
- Email: Todos los ajustes del correo. A quíen va dirigido, el asunto del correo, las meta datas, etc etc
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.
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.
