Contact Form 7 on_submit is not working

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?

Solution

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

Comments

[Nick W]

No luck, nothing on console