WordPress Contact Form 7 Plugin behaves strange when it is part of AJAX-loaded content

Question

I am currently trying to implement the WordPress Contact Form 7 Plugin into a WordPress-site I created. The theme uses jQuery to overwrite the default link behaviour and AJAX to load the requested page without actually reloading the whole page.

The problem is: The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX, there are two strange behaviours: The Google reCAPTCHA widget is not showing up and after submit, instead of showing the div with the success-message, I am redirected to the themes "404" page. The mail gets sent successfully though. I use the plugin/contact-form in AJAX mode - so it makes an AJAX call itself to submit the data and handle the response without page refresh.

I am a bit overwhelmed where to start to solve this problem. Just for testing, I tried to hardcode all scripts from the direct pageload to the theme, so that they are also there when the contact-page is loaded via AJAX. Unfortunately, this didn't have any effect at all. I also tried to call the wpcf7InitForm() function of the plugin, as it was suggested in another question here - also with no success.

This is my ajaxload-script:

jQuery(document).ready(function($) {
    // Targeting all internal links
    $(document).on('click', 'a[href^="http://' + top.location.host.toString() + '"]:not([href*="wp-admin"])', function(event) {
        event.preventDefault();

        var url = $(this).attr('href');

        $.ajax(url, {
            beforeSend: function() {
                if ($('#ajax-loader').length == 0) { $('body').append('<div id="ajax-loader"></div>'); }
                $('#ajax-loader').fadeIn();

                // Dimming static elements during loading
                $('#mainbar').animate( { opacity: '0.5' } );
            },
            success: function(data) {
                var data = $('<div />').html(data);

                window.history.pushState('...', '...', url);
                document.title = $(data).find('title').text();

                $('#mainbar').html($(data).find('#mainbar > *'));

                // Undoing design modifications to static elements
                $('#mainbar').animate( { opacity: '1' }, 150 );

                $('body').triggerHandler('reflow');
            },
        });
    });
});

Help on this topic would be really appreciated and thanks in advance!

Well with this JS you're catching click, not form submissions. — vard, Dec 16 '15 at 14:02

score 0 · Answer 1 · edited May 23 '17 at 12:31

Couple ideas after reading through some stuff:

Might be a bug with the recaptcha - looks like the latest version specifically fixes recaptcha problems (not sure if they are yours though): http://contactform7.com/2015/11/23/contact-form-7-431/#more-16357

The div not showing up should be easy to debug by using absolute paths. In Wordpress, I usually use the bloginfo(); function. Try putting something like this in your form submit success callback to test path visibility between the AJAX and non-AJAX pages:

<?php 
   $pathCheck = bloginfo('template_directory');
   echo $pathCheck;
?>

The problem with the div not showing up could also be how you are structuring the callback. From this question, it appears that the plugin has specific callback hooks you have to use that aren't in the documentation:

$(".your-form-class").on('wpcf7:mailsent', function(event){
  // Show success div code would go in here
});

Great question btw. You used proper english and clearly explained your problem, pretty rare on S.O. Hope some of this gets you going.

WordPress Contact Form 7 Plugin behaves strange when it is part of AJAX-loaded content

1 Answers1