Enabling AJAX on Contact Form 7 Form after AJAX Lo

Question

I've tried searching but this only returns results on how to AJAX load a page/form. What I am doing is loading a form via AJAX (Contact Form 7) and I would like to know how to re-enable AJAX submission on that form. Is this a possibility with CF7?

Answer 1

this behavior changed with version 4.8 of wpcf7. since then the call would be

wpcf7.initForm( jQuery('.wpcf7-form') );

while it does not require jQuery anymore, you could also pass a node.. somehting like this (capable of multiple forms..)

var wpcf7_form = document.getElementsByClassName('wpcf7-form');
[].forEach.call(wpcf7_form, function( form ) {
  wpcf7.initForm( form );
});

it is still written in jQuery, but it does not have to be active (i.e. jQuery.ready()) in your function to operate. plus it got rid of jQuery.form

Answer 2

I spent the last three hours looking for a solution to this and I only have found questions without answer, but I think I found a solution and hope this will help you and other people with this problem.

In my case, i was trying to embed a CF7 form in an inline lightbox with PrettyPhoto (but I think this is the same with others like Fancybox). My problem was that these inline lightboxes works generating the content inside the lightbox via AJAX, and the CF7 scripts were loaded before that content, so the AJAX submit of the form wasn't work.

What I did was getting the CF7 scripts via jQuery.get on the event triggered when a prettyphoto lightbox is opened. In your case, I think you should do this just after generating the content via AJAX, something like:

jQuery.get("/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20");
jQuery.get("/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.1");

Make sure that your paths and versions are the same, otherwise change them.

This will refresh the form and re-enable the AJAX submit.

Hope it helps!

Answer 3

Contact Form 7 calls an init function, which executes on page load. If your form is loading using AJAX, you should make sure that the function gets called after your form is loaded.

Look into:

plugins/contact-form-7/includes/js/scripts.js

for the definition of the function wpcf7InitForm.

Edit: Calling this function inserts a new loading logo each time. Unfortunately, I couldn't find a better solution than deleting the duplicate loader from DOM using jQuery:

function initContactForm() {
    jQuery('div.wpcf7 > form').wpcf7InitForm();
    jQuery('form.wpcf7-form')
        .each(function() {
            $j(this).find('img.ajax-loader').last().remove();
        });
}