Search code examples
jqueryajaxwordpresscontact-form-7

Enabling AJAX on Contact Form 7 Form after AJAX Load


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?


Solution

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