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!

Chubby

Hi - just a note that the accepted answer is no longer the working solution, if you're able to change it that would be helpful for new visitors – Misguidance

Answer 1

This code works since 5.8.x version:

$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {  
   // your code here
});

Shoreward

Answer 2

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

Penitence

I wish this was in the documentation proper, rather than just the changelog. I scratched my head for a while on this one in the past! – Kuska

Thanks Vicente! I too have been scratching my head over this for some time! I'll check this as soon as I'm back at my machine and mark as correct :) – Chubby

@Kuska I agree, the documentation about this is very limited. – Penitence

Info on these Contact Form 7 JavaScript events / hooks should go in the docs - I agree on that :-) – Elspet

I have tried this, and the :submit is the only one working for me, even though it is running in ajax-mode with the CF7. – Klutz

Same here @MartinKlasson - as these are STILL undocumented features I'm not sure if they even still exist. But the example above doesn't work. – Misguidance

idk what I am doing wrong but none of these is working for me, is it because i have multiple forms in one page ? – Phrixus

Answer 3

Given the variety of responses on this topic the plugin developer seems to change their mind about how this should work every 5 minutes. Currently (Q1 2017) this is the working method:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );

And the valid events are:

• wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
• wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
• wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.
• wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.
• wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

Sauce: https://contactform7.com/dom-events/

Misguidance

Just in case anyone lands on this answer... I didn't have the function wp_footer() called which prevented these events from firing. Simple oversight, but it may help to check it's in your theme! – Speakeasy

Thanks, it worked but what if I want to perform some manual validations on form fields? As I can see the list above or on plugin's website does not provide any event before form submission. Any idea about it? – Foul

@Foul you probably finished this like two years ago, but I started down this path by adding an addEventListener to the submit button. If you're careful with the event processing order, I think you could accomplish this. You probably already did though... – Stigma

Today a client asked for a fix for INTERNET EXPLORER :( It doesn't work for IE =( – Witling

Answer 4

Sometimes it may not work, as Martin Klasson pointed out, only 'submit' event works, most probable because it's triggered by a form and bubbles up to the selected object. Also as I can understand, now events have other names, like "invalid.wpcf7", "mailsent.wpcf7", etc. In short, this should work:

jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
    // your code here
});

More detailed explanation here: How to add additional settings on error in Contact form 7?

Schwarz

Still nothing for me; none of these events seem to work (and I can't find any proper documentation for them…) – Misguidance

Based on the version 3.3 - change log, @Schwarz solution should work. – Stupa

I can confirm this is the right way after v3.x and before v5.x (I'm using version 4.4.1). Thank you @smesh! – Interatomic

Answer 5

I had quite a go at this, and I found that when only the Submit event works, it means that there is a js problem / conflict in your theme.

If it's a custom theme you built, make sure jQuery and jQuery migrate are both loaded, in this order, and that the Contact form 7 js is also loaded in the footer.

Make sure you have wp_head, and wp_footer in your php templates.

For DOM events to work, your form must be in Ajax mode. If the page reloads upon submission, forget about DOM events. If you have the form ID showing up in the URL, same thing. My form was initially not in Ajax mode because the Contact Form JS was not loaded, and jQuery Migrate either.

The form must behave exactly like shown on this page for the DOM events to be fired properly. Once you have that, it should be working.

I've tested this with jQuery 3.3.1 and Migrate 3.0.1 and the following event listener worked:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false ); 

To check if your theme is the culprit, test your form using Wordpress' default theme, if it works, you know the issue is on your end and not so much in the dev's doc!

Synectics

Answer 6

I tried to implement the dom event behavior in wordpress contact form 7 plugin as described here, but after trying numerous methods which are given as fixes in different forums I implemented a method of my own.

I m describing the method here below. The method involves some steps which are listed below:

1. Creating the contact form
2. Scripting for the contact form to capture event triggers and form data
3. Loading the script

1. Creating the contact form

<label> Your name
    [text* cform7-name id:cform7-name autocomplete:name] </label>

<label> Your Number
    [tel* cform7-contact id:cform7-contact] </label>

<label> Course You are interested (Press Ctrl + Select to select Mutiple)
    [select* cform7-courses id:cform7-courses multiple "JAVA" "Python" "C#" "Others"] </label>

<label> Your message (optional)
    [textarea cform7-submit id:cform7-message] </label>

[submit id:cform7Submit "Submit"]

Above is a sample script with ids so that we can easily retreive those elements from DOM tree using JS. [You can modify the field ids as your need]

2. Scripting for the contact form to capture event triggers and form data

document.addEventListener('DOMContentLoaded', function() {
   var frmButton = document.getElementById('cform7Submit');
   
   frmButton.addEventListener( 'click', function( event ) {
   var data = {
        name: document.getElementById('cform7-name').value,
        contact: document.getElementById('cform7-contact').value,
        courses: document.getElementById('cform7-courses').value,
        comment: document.getElementById('cform7-message').value
   };
        event.preventDefault();
        console.log('Event Data ', event);
        console.log('Data ', data);

   }, false );

}, false);

Save the above script in wordpress deployment directoty. In my case I placed the script in the root deployment directory itself(<worpress-root-directory>) and saved the file as cform7.js. Ex: /var/www/wordpress-site/cform7.js

After finishing this we need to load the script.

3. Loading the script

function cform7_script() { 
    wp_enqueue_script( 'cform7-js', '/cform7.js'); 
} 
add_action('wp_enqueue_scripts', 'cform7_script');

Place the above code in the <worpress-root-directory>/wp-includes/functions.php file

That's done! On clicking the form submit button(cform7-submit) you must see the data logged in the console.

Downdraft