How To Use Bootstrap Modal (Dialog Box) To Show Contact Form 7

Last updated on: July 27th, 2015

The current Bootstrap version 3.3.5 comes with javascript Modal (dialog prompt) that can be used to show any HTML output. However, showing it in a PHP file of wordpress theme can be a bit challenging for those who are learning wordpress themes or custom php framework development.

In this tutorial we going to learn how to show a contact form 7 plugin generated form in a bootstrap modal when clicking a link.

I assume you already have a contact form created with Contact Form 7 and have some knowledge of how WordPress theme files work. Also, i assume that you have already integrated bootstrap css, js and jQuery files in your WordPress themes files.

To begin with create a new file called model.php (you can name it whatever you want) in your WordPress theme folder, and paste code below in this file:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Make Reservation</h4>
</div>

<div class="modal-body">
<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
</div>

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

Note: In the code above, replace the contact form 7 shortcode with your own code.

Now, call the modal.php file in your page or post template file or wherever you want it. We’ll test it with a WordPress page type, so open the page.php file and paste the code below where the loop ends:

<?php get_template_part( 'modal' ); ?>

Take a look at my example page.php file with the code (See line 19):

<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'template-parts/content', 'page' ); ?>

<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>

<?php endwhile; // End of the loop. ?>

<?php get_template_part( 'modal' ); ?>

</main><!-- #main -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now go to wp-admin and create a new page and test it with a modal link. Here is an example:

<a href="#" data-toggle="modal" data-target=“#myModal">Click Me To Load Modal</a>

That should be it. You will hopefully see the contact form 7 in a modal prompt. If you get stuck somewhere, comment below i’ll be happy to help. You can also checkout our Rentster theme’s page to see it live it action.

Go to http://demo.lnthemes.com/rentster/explore-cars/ and click on “Book Now” to see how modal prompt appears.