Enabling AJAX on Contact Form 7 Form after AJAX Load

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

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

Use the following code for version 5.4 or above:

document.querySelectorAll(".wpcf7 > form").forEach((                function(e){                    return wpcf7.init(e)                }            )        );

Put this in your ajax response. This will re-initialize all forms