Contacto
Gracias por visitar mi blog.
Hoy veremos cómo crear un formulario multi pasos con Elementor, Contact Form 7, Contact Form 7 Widget For y Multi Step for Contact Form 7 Elementor.
Estos tres elementos nos ayudarán a tener un formulario multi-step y a su vez poder insertarlo donde queramos usando el editor visual de Elementor y darle estilos.
Comenzaremos con instalar Contact Form 7.
- Contact Form 7 puede ser instalado directamente desde el repositorio de plugins de WordPress. Si buscas «contact form 7», podrás encontrar el plugin junto con una variedad de add-ons.
- Una vez instalado el Contact Form 7, pasaremos a instalar Contact Form 7 Widget For Elementor.
- Instalamos Multi Step for Contact Form 7.
Realizado los paso anteriores vamos a crear nuestro primer formulario multi step.
Nos dirigimos a la sección de contact form 7.
Escritorio–>Contacto–>Añadir nuevo.
Como se muestra en la imagen tendremos nuevas funciones, la cuales nos ayudarán a darle forma a nuestro formulario.
Las funciones gratis nos sirven muy bien para comenzar, en caso de querer mostrar la barra de progreso o nombrar cada paso, habría que comprar la versión pro.
En cada paso (Step) colocamos los campos que nos gustaría que aparecieran, y si necesitas añadir otro paso solo presiona el botón de +.
Por defecto contact form 7 no tiene integración con el constructor Elementor.
Para incorporarlo sería mediante el módulo de code y colocando el shortcode que genera Contact Form.
Vamos a utilizar un plugin que nos ayudará a incorporarlo de forma sencilla y nos ofrece la posibilidad de estilar los campos, botones y mucho más desde el constructor de elementor.
Instalamos Contact Form 7 Widget For Elementor Page Builder & Gutenberg Blocks
Una vez instalado, nos dirigimos a la página donde queramos colocar nuestro formulario y desde los bloques de Elementor buscamos HT Contact Form.
Selecciona el formulario que desees colocar y dale estilos tal cual lo harías con los bloques de Elementor
Hasta este punto ya tendrias tu formulario con multipasos (step Form), y con la posibilidad de darle estilos.
