WordPress Contact Form 7: Send button does not submit, redirects to same page (jquery / anchor navigation)

Question

I am developing a WordPress page that uses a jquery.slideto.js navigation system and html anchors. I am using the Contact Form 7 plugin

When pressing the "send" button, the form does not submit, and the included jQuery validation script does not fire. Instead, it just reloads the current page without submitting.

I have included the form on another page without all the extra code and the form DOES send, but none of the jQuery validation works, and it navigates to a new page by appending "#wpcf7-f1-p93-o1" to the current URL

I'm using the following code in my template file

         <?php
     global $wpcf7_contact_form;
     if ( ! ( $wpcf7_contact_form = wpcf7_contact_form( 1 ) ) )
     return 'Contact form not found!';
     $form = $wpcf7_contact_form->form_html();
     echo $form;
     ?>

The url of the problem page is: www.beattrainsoundsystem.com/home#contact (or click the "Contact" link in the nav)

the url of the working but buggy page is: www.beattrainsoundsystem.com/test

I've disabled all wordpress plugins except for contact form 7, and all scripts except jQuery to narrow down the source of the problem. I do need to continue developing on Monday, so for the next 24 hours (starting Sunday @ 1:48am EST) it will be in debug mode. Thanks so much for your help!

Let me know if you need me to make any changes to the page to help you help me debug.

Answer 1

Alot of issues here, but here is the main issue that was the solution problem:

The PHP that I quoted in the above question was flawed. I think it's important (at least in my case with so many other scripts/plugins/variables etc...) with contact form 7 to stick with the tag they give you in the editor ("[contact-form 1 "Contact form 1"]"). So my solution was to create a post called "contactForm" in a category called "contactForm" and retrieve that post from the home page:

            <?php $contact_drop = new WP_Query('p=109'); while ($contact_drop->have_posts()) : $contact_drop->the_post(); $do_not_duplicate = $post->ID; ?>
            <div id="contact-slide">
                <?php the_content(); ?>
            </div>
        <?php endwhile; ?>

I would recommend that solution for anyone having a similar problem.