AJAX submission won't work if Contact Form resides in an AJAX-loaded content

Question

If a content loaded by AJAX contains a CF7 contact form, the AJAX submission won't work for that form.

The suggested workaround is to put this line in Contact Form template:

<script src="/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>

This will make the form working, but will cause another problem: normal CF7 contact forms, placed in parts of the page that aren't loaded by AJAX, will show multiple spinner icons when submitting.

Probably because including script multiple times will bound the form code multiple times for forms that aren't placed in content loaded by ajax.

Answer 1

Found the solution by myself. If you have both a contact form not loaded by ajax AND a contact form loaded by ajax, for the second one you'll need to modify the template adding:

<div id="ajaxform_wrapper">
    <script>
        jQuery('#ajaxform_wrapper > div.wpcf7 > form').wpcf7InitForm();
    </script>
    ... contact form fields...
</div>

Basically we're wrapping the form fields into a div #ajaxform_wrapper (random name) and we're adding a line of Javascript that will bind the CF7 code only for that form, avoiding multiple bindings on already initialized forms.

This will works and you won't see multiple spinners when submitting normal contact forms.