Enabling AJAX on Contact Form 7 Form after AJAX Load

PavKR picture PavKR · Mar 4, 2015 · Viewed 30.1k times · Source

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

Anuj Kumar picture Anuj Kumar · Jun 10, 2015

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();
        });
}