Cómo crear un formulario de contacto multi-step o de varios pasos.

Crear Formulario multi pasos. Step Form usando Contact Form y Elementor.

Contacto


    [cf7mls_step cf7mls_step-1 "Siguiente" ""]


    [cf7mls_step cf7mls_step-2 "Anterior" "Step 2"]

    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.

    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.

    Contact Form 7 Widget For Elementor Page Builder

    Selecciona el formulario que desees colocar y dale estilos tal cual lo harías con los bloques de Elementor

    Stilos con Elementor

    Hasta este punto ya tendrias tu formulario con multipasos (step Form), y con la posibilidad de darle estilos.

    Francisco
    Francisco

    👀 Me interesa... Seguir aprendiendo y colaborando en nuevos proyectos
    🌱 Actualmente estoy aprendiendo... Desarrollo de Plugin,GitHub, React y NodeJs.
    💞️ Busco colaborar en ...programación web, Aplicaciones
    📫 Como contactarme... francisco@calymayor.dev

    Artículos: 50
    0 0 votes
    Article Rating
    Subscribe
    Notify of
    guest
    0 Comments
    Inline Feedbacks
    View all comments
    0
    Would love your thoughts, please comment.x
    ()
    x