Contact Form 7 Not Working Inside Bootstrap Modal

Question

Been struggling with this one for hours, any help is greatly appreciated.

I'm using WordPress, with a custom theme I created and the Contact Form 7 plugin.

I'm trying to make a landing page where the user clicks the first button, is brought to a form inside a modal and after successfully completing the form, is directed to the download link.

The form itself works perfectly when it is outside the modals or on a different page.

However inside the modals, the form fails to redirect the user to the PDF file after completion.

Upon submission, the modal is closed and the page refreshes with the link http://example.com/landing/#wpcf7-f188-o1 instead of going to the PDF file.

I have a feeling it could be fixed with JS but I've never dabbled in it, and don't even know which file to investigate or frankly where to begin.

Thanks for any help in advance.

PS. Here's a link to the live site: http://goo.gl/XBaOs3

    <div class="vertical-center">
        <div class="container">
            <div class="row text-center">
                <div class ="col-md-offset-3 col-md-6 opt-modal cta-container-center">
                    <h1 class="headline">7 Must-Have Tools for Real Estate Companies</h1></br>
                    <button type="button" class="btn btn-primary btn-lg btn-block cta-link" data-toggle="modal" data-target="#myModal">Download Now</button>
                    <!-- Modal -->
                    <div id="myModal" class="modal modal-vcenter fade" role="dialog">
                        <div class="modal-dialog">  
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <img class="modal-header-image" src="http://beltadigital.com/wp-content/uploads/2015/10/leadbox-header-image-placeholder.png">
                                </div>
                                <div class="modal-body">
                                    <div class="landing-form">
                                        <?php 

                                            $landing_form = new WP_Query('pagename=landing-form');
                                            $landing_form -> the_post();

                                            the_content(); 

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

EDIT

Contact forms don't seem to work well on modals when inside Wordpress.

Only workaround I could think of was to hard code it and upload to FTP server.

Answer 1

Have you try this

<?php echo do_shortcode('contact form 7 shortcode'); the_content(); ?>

Instead of

<?php 
    $landing_form = new WP_Query('pagename=landing-form');
    $landing_form -> the_post();
    the_content(); 
?>

is there a specific reason why you are doing it that way?

Answer 2

I had this problem. I forgot to include wp_head(); before closing head tag and wp_footer(); before closing body tag.