Soporte » WordPress Avanzado » Formulario de contacto en ventana modal Bootstrap

  • Resuelto noexitwp

    (@noexitwp)


    Hola!

    Creo que esta duda si se resuelve puede ser muy útil para todos, es algo bastante genérico y reutilizable.

    He empezado hace poco con el desarrollo de plantillas para WP y me he quedado un poco atascado en este punto que paso a comentaros. Se trata de un «simple» formulario de contacto en una ventana modal de Bootstrap usando un Shortcode.

    Pongo la estructura de la plantilla resumida por si eso ayuda.

    header.php
    ==========

    <head>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>
    <?php
    do_shortcode(‘[contact_form]’);
    ?>
    <div class=»…»>

    page.php
    ========

    <?php get_header(); ?>
    <!– Page Content –>
    <div class=»container»>
    <div class=»row»>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php the_post_thumbnail(‘des’,array( ‘class’ => ‘img-fluid rounded’ )); ?>
    <!– The content –>
    <?php the_content(); ?>
    <?php endwhile;?>
    </div>
    <!– Sidebar Widgets Column –>
    <?php get_sidebar(); ?>
    </div>
    </div>
    <!– /.container –>
    <?php get_footer(); ?>

    footer.php
    ==========

    </footer>

    <?php wp_footer(); ?>
    </body>

    functions.php
    =============

    function html_form_code()
    {
    <div class=»row justify-content-end»>
    <div class=»col-auto»>
    <button type=»button» id=»send» class=»btn btn-primary contact-margins»
    data-toggle=»modal» data-target=»#dialogo1″>Contact</button>
    </div>
    </div>

    <form action=»<?php echo ‘send.php’; ?>» method=»post»>

    </form>

    <!– Modal –>
    <div class=»modal fade» id=»dialogo1″>
    <div class=»modal-dialog modal-lg modal-dialog-centered»>
    <div class=»modal-content»>

    </div>
    </div>
    </div>

    }

    function ms_contact_form()
    {
    ob_start();

    html_form_code();

    return ob_get_clean();
    }
    add_shortcode(‘contact_form’, ‘ms_contact_form’);

    send.php
    ========

    Vacío aún.

    Cuando se pulsa en el botón (id=»send») se muestra la ventana modal correctamente, al pulsa en «Enviar» parece que se llama a «send.php» pero ahí me quedo. El flujo que he construido es el siguiente:

    1) En la cabecera llamo al Shortcode que crea la ventana modal al pulsar en el botón con id=»send»

    2) En esta ventana modal al pulsar en Enviar llamo al fichero send.php (al cancelar parece que todo funciona bien, se cierra la ventana sin hacer ninguna llamada). Esto lo que hace es mostrar la cabecera, pie y una pagina en blanco.

    ¿Cómo capturo en send.php el flujo del sitio, valido el formulario para enviar un correo si está todo correcto y mostrar los campos que no en el mismo formulario?

    Esto que en PHP «a pelo» es muy sencillo con WP no lo veo claro.

    Es la clásica validación de formulario -> es correcto envío correo. Hay errores los indico en el mismo formulario con algún mensaje de aviso.

    Un saludo y gracias!

    • Este debate fue modificado hace 6 días, 19 horas por noexitwp.
    • Este debate fue modificado hace 6 días, 19 horas por noexitwp.
Viendo 3 respuestas - 1 de 3 (de 3 total)
  • Hola noexitwp,
    Yo te recomendaría una llamada con AJAX al fichero send.php y de hay sacar la respuesta que necesitas para validar el formulario.

    Puedes añadir un action al botón enviar y realizar esta validación por AJAX para comprobar la información que necesites.

    Un saludo.

    Muchas gracias Víctor! Ahora mismo estoy siguiendo este enlace que parece bastante bueno.

    https://www.sitepoint.com/build-your-own-wordpress-contact-form-plugin-in-5-minutes/

    Un saludo.

    Bueno, con lo expuesto en el primer post y en enlace posterior casi he acabado la tarea. Cualquier persona con estas dos cosas y un poco de paciencia podría hacer este simple plugin.

    Aunque todo parece estar correcto (de hecho no se muestra ningún error ni nada parecido) el correo no llega, pero eso sería para otro post.

    Muchas gracias a todos!

Viendo 3 respuestas - 1 de 3 (de 3 total)
  • Debes estar registrado para responder a este debate.