javascript - Contact Form 7 AJAX Callback

Question

Been searching around on this for a while and can't come up with any documentation to outline what i want to achieve.

I'm using wordpress and the Contact Form 7 plugin, all is working perfectly, what i want to achieve is to run some particular javascript upon form submit, i know we can use "on_sent_ok:" in the additional settings, but this only performs if the form is actually submitted.

What i'd like to do is to do some other javascript when the form doesn't submit ok, which throws the user back to the section which didn't validate.

I can use the following code to run after 1.7s of the form submit being clicked, however it's a bit sloppy as if the user was running with a slow connection, there's potential this could run before the form is submitted properly.

 $('.wpcf7-submit').click(function() {
setTimeout(function() {
    if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
        $('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
        $('.form-step').hide();
        $('.fs1').show();

    }
    if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
        alert('error on page 2 - take user back to the area with issues')
    }
}, 1700);
});

Is there any particular function or hook i can use to run JS when the form AJAX has completed?

Thanks!

Answer 1

In version 3.3 new jQuery custom event triggers were introduced:

New: Introduce 5 new jQuery custom event triggers

• wpcf7:invalid
• wpcf7:spam
• wpcf7:mailsent
• wpcf7:mailfailed
• wpcf7:submit

You can use wpcf7:invalid like the example below:

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});