Bootstrap modal window contact form

  • Resolved noexitwp

    (@noexitwp)


    4 years, 12 months ago

    Hello!

    I think this doubt if it is resolved can be very useful for everyone, it is something quite generic and reusable.

    I started recently with the development of templates for WP and I got a little stuck in the next point. This is a “simple” contact form in a modal window of Bootstrap using a Shortcode.

    I put the structure of the template summarized in case that helps.

    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
    ========

    Empty yet

    When the button is pressed (id = ?send?) the modal window is displayed correctly, it seems that ?send.php? is called but I stay there. The flow I have built is as follows:

    1) In the header I call the Shortcode that creates the modal window by clicking on the button with id = ?send?

    2) In this modal window, by clicking on Send, I call the file send.php (when canceling it seems that everything works fine, the window closes without making any calls). What it does is show the header, footer and a blank page.

    How do I capture the site flow in send.php, valid the form to send an email if everything is correct and show the fields that are not in the same form?

    This only with PHP is very simple with WP I do not see it clearly.

    It is the classic form validation -> mail delivery is correct. There are errors indicated in the same form with a warning message.

    Greetings and thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You are missing alot, you shouldn’t echo ‘send.php’;

    Here’s a tutorial to get you started:

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

    Thread Starter noexitwp

    (@noexitwp)

    Amazing help!

    From what I have seen I was on the right track (I think). In addition, this solution is done through a plugin that was the next task that was pending. I will do!

    A million thanks!

    Thread Starter noexitwp

    (@noexitwp)

    Well, with the exposed in the first post and later link I have almost finished the task. Anyone with these two things and a little patience could do this simple plugin.

    Although everything seems to be correct (in fact no error or anything similar is shown) the email does not arrive, but that would be for another post.

    Thank you very much to all!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Bootstrap modal window contact form’ is closed to new replies.