Contact Form 7 on_submit is not working - wordpress

Question

I am trying to show an alert when the form is submitted.
I added this code to "Additional Settings" on Contact Form 7 plugin (Version 4.2.2)
on_submit:"alert('Submitted');"
Nothing appears.
No errors nor warnings at console
No errors nor warnings at firebug
I guess no Javascript conflict since Contact Form 7 succesfully
sends emails
I am sure that form is "submitted" because i can see Contact
Form 7 form validation errors
Any ideas how to solve or debug further this issue?

Answer 1

It is not easy to take a guess without seeing the source code but I feel happy today.
Is your form working at all?
If not, it is probable that Contact Form 7’s JavaScript is not functioning on your site.
I’ll show you a few possible causes for this.
JavaScript file is not loaded
This is the cause that I’ve been seeing the most recently. This is due to your template, which is missing calling functions for queuing JavaScript. The functions required are wp_head() and wp_footer(), and they are in header.php and footer.php, respectively, in most correct themes.
Conflicts with other JavaScript
Many plugins and themes load their own JavaScript. Some of them may have been created incorrectly and therefore conflict with other plugins. In most cases, you can find JavaScript errors with Firebug, an add-on for Firefox, when such conflicts occur.
HTML structure is not valid
Like other JavaScript, Contact Form 7’s JavaScript traverses and manipulates the structure of HTML. Therefore, if the original HTML structure is not valid, it will fail to work. You can check whether your HTML is valid or not with an HTML validator. I recommend the W3C Markup Validation Service for use in such a case.
My advice is to use CF 7 default way of implementing your idea - we'll call it:
"1. Best option".
At WP Dashboard, go to Contact (CF7) and choose your form and go to the tab called "Additional Settings".
There, you can add similar code like this:
on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"
If you set on_sent_ok: followed by a one-line JavaScript code, you can tell the contact form the code that should be performed when the mail is sent successfully. Likewise, with on_submit:, you can tell the code that should be performed when the form submitted regardless of the outcome.
On both of the actions, you can use every kind of JS code like you would in your .js file:
on_sent_ok: "some js code here"
You can use it to call functions like this:
on_sent_ok: "your_function();"
Or write some code (this one redirects to thank you page):
on_sent_ok: "document.location='/thank-you-page/';"
2. And another option is to handle it with jQuery:
Contact Form 7 is keen to emit a number of Javascript events that bubble up to the document object. In version 4.2 they can be found in contact-form-7/includes/js/scripts.js. If you're using jQuery you can access those events like this:
$(document).on('spam.wpcf7', function () {
console.log('submit.wpcf7 was triggered!');
});
$(document).on('invalid.wpcf7', function () {
console.log('invalid.wpcf7 was triggered!');
});
$(document).on('mailsent.wpcf7', function () {
console.log('mailsent.wpcf7 was triggered!');
});
$(document).on('mailfailed.wpcf7', function () {
console.log('mailfailed.wpcf7 was triggered!');
});
EDIT:
Some of these jQuery options are used but somehow deprecated so if you encounter problems, try using eg. 'wpcf7:mailsent' instead of 'mailsent.wpcf7'.
The same format goes for other option, actually all the options are observable in the mentioned file:
wp-content/plugins/contact-form-7/includes/js/script.js

Answer 2

do you have any link for us to further check this? It's pretty hard like this.
But: "I am sure that form is "submitted" because i can see Contact Form 7 form validation errors" -> is it server-validation or frontend-validation? Maybe it is NOT send?
All the best

Answer 3

I think something is blocking your popup.
Try debugging using "console.log", so you can eliminate this as a potential issue:
on_submit:"console.log('Submitted');"