Enabling AJAX on Contact Form 7 Form after AJAX Load

4 Views

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?

Post Views: 4

Related posts

Leave a Reply

5 comments

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

  2. 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

  3. 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

  4. 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!

  5. Was unable to send the form via ajax with the above comments. I had to use the wpcf7.submit method vs wpcf7.init

    Example usage:

    wpcf7.submit(document.querySelector('.wpcf7-form'));