Beginning January 2018, on_sent_ok has been deprecated in Contact Form 7 (version 5.0). If you have been using on_sent_ok in your Contact Form 7 forms, your forms may no longer work as expected.
Contact Form 7’s author, Takayuki Miyoshi, now recommends you use Contact Form 7 DOM events to achieve the same result.
This article shows you how to replace on_sent_ok with Contact Form 7 DOM events for:
- Running Google Analytics tracker
- Redirecting to another page after submission
- Targeting a specific form
Tip: If you have been using on_sent_ok in your Contact Form 7 forms, your forms may no longer work as expected.
Before you begin
If you’re comfortable coding and are planning to use the code examples given here, there are a few things you need to know before we get started:
- Contact Form 7 Custom DOM Events
- DOM events (Wikipedia)
- Basic understanding of coding in PHP / WordPress / JavaScript
By the end of this article you should be able to use Contact Form 7 DOM events to perform some action when mail is sent via your Contact Form 7 form.
Tip: If you’re not comfortable coding, do not worry. There is an alternative option for you. You can also use the Contact Form 7 Controls plugin to achieve most of this work.
What is or was on_sent_ok?
In Contact Form 7, there are several Additional Settings available to add extra functionality to your forms. One of these additional settings was on_sent_ok.
Tip: In this image, you can see two typical usages of on_sent_ok: Displaying a prompt message and redirecting to another page.
If you set on_sent_ok: followed by a one-line of JavaScript code, you could tell the contact form the code that should be performed when the mail is sent successfully.
It was often used for the purpose of tracking form submissions with web analytics services or redirecting to another page after a form submission. It was also popularly used for resetting the form.
The recommended alternative to on_sent_ok is using DOM events.
Why on_sent_ok was removed
While using on_sent_ok is not itself unsafe, it does open up the possibility of vulnerabilities being introduced to Contact Form 7 or the entire site it is installed on.
It also poses a lot of potential problems of JavaScript conflicts, particularly if the user utilizing the option is not very proficient in JavaScript. There were also issues of users experiencing delays when using on_sent_ok.
The plugin author, Takayuki Miyoshi, had seen several such significant problems due to this setting and decided to replace it with a much safer alternative.
Tip: While one option to keep using on_sent_ok is to not update Contact Form 7 beyond version 4.9.3, this leaves you site open to future security vulnerabilities & is heavily discouraged.
CF7 Custom DOM Events
If you have been using on_sent_ok in your Contact Form 7 forms, you will now need to use Contact Form 7 DOM events to trigger some action when mail is sent via a Contact Form 7 form.
Contact Form 7 provides several types of custom DOM events that you can use:
- wpcf7invalid — When a form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
- wpcf7spam — When a form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
- wpcf7mailsent — When a form submission has completed successfully, and mail has been sent.
- wpcf7mailfailed — When a form submission has completed successfully, but it has failed in sending mail.
- wpcf7submit — When a form submission has completed successfully, regardless of other incidents.
You can utilize the events within your JavaScript code to run a function in a specific situation.
The DOM event to use instead of on_sent_ok is the wpcf7mailsent . This fires when a form submission has completed successfully, and mail has been sent.
A simple use of wpcf7mailsent would be as follows:
document.addEventListener( 'wpcf7submit', function( event ) {
alert( "Submission successful!" );
}, false );
Tip: As mentioned earlier in the article, you have an option of using the Contact Form 7 Controls plugin if you do not want to or are not comfortable with working with code.
Replacing on_sent_ok with DOM events
There are several things that you could do with on_sent_ok additional settings. Let’s look at the few popular ones and how we can now do the same using DOM events.
1. Running Google Analytics tracker
Previously using on_sent_ok
You may have something like the following line in the Additional Settings tab:
on_sent_ok: "ga( 'send', 'event', 'Contact Form', 'submit' );"
This setting tells Contact Form 7 to run the ga() (Google Analytics tracker) function when a form submission completes and mail has been sent successfully.
Using Contact Form 7 Controls
Using Contact Form 7 Controls, the task becomes fairly simple. Once you install and activate the plugin, a Customize tab will appear in each one of your Contact Form 7 forms. Then all you have to do is simply check the option for Google Analytics at the very bottom.
Now using DOM Events
To do this using DOM events you can add the following code:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>
<?php
}
Add your code in functions.php if you are using child theme or you can use a plugin like Code Snippets.
Tip: Don’t add the code to your WordPress theme’s functions.php file as any changes will be lost if you update your theme.
Remove the “on_sent_ok” line from the Additional Settings tab and save the contact form.
2. Redirecting to another page after submission
Previously using on_sent_ok
Using on_sent_ok, you may have something like the following in the Additional Settings tab:
on_sent_ok: "location = 'www.yoursite.com/thank-you/';"
Previously his would redirect the user to the www.yoursite.com/thank-you/ page after submission.
Using Contact Form 7 Controls
Again, it is fairly simple to do this using the Contact Form 7 Controls plugin. In the Customize tab, simply enter the URL of the page to which you want to redirect and save the form. That’s it!
Following the removal of the on_sent_ok hook from CF7, I’ve tried several plugins to perform redirection following form submission, and this is the only one I’ve found that works reliably with all browsers – Great addition to CF7
Using DOM Events
To redirect to another page after your form has been submitted, you can use the following script that redirects the user to another URL when the wpcf7mailsent event occurs:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
<?php
}
Add your code in functions.php if you are using child theme or you can use a plugin like Code Snippets.
Tip: You will want to replace
http://example.com/in the code to the actual URL you want to redirect to.
Targeting a Specific Contact Form
If you have several contact forms and want to run the function only for a specific contact form, check the ID of the contact form like the following:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '123' == event.detail.contactFormId ) {
ga( 'send', 'event', 'Contact Form', 'submit' );
}
}, false );
</script>
<?php
}
In this case, the ga() function will be executed only if the ID of the contact form event.detail.contactFormId is ‘123’.
You can find the ID of a contact form by looking for the id attribute in the contact-form-7 shortcode. For example, if the shortcode looks like this:
[contact-form-7 id="1234" title="Contact form 1"]
The ID of this contact form is ‘1234’.
Note: Using the Contact Form 7 Controls plugin, you generally define the options for each specific form. There is no need to do anything differently.
Other uses of DOM events
There are a host of other uses of custom DOM events in Contact Form 7, like:
- Hiding a form after it has been submitted
- Partially or completely resetting the form
and so on.
Tip: You can now use DOM events to replace any other action you performed using on_sent_ok by similar process as shown in this article.
Further reading
- on_sent_ok Is Deprecated
- Contact Form 7 Controls
- Overview of Events and Handlers (MDN)
- Document Object Model (DOM) Level 2 Events Specification
Have questions or need help?
If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.
If you are using any of our CF7 Skins Add-ons, we provide Premium Email Support to help with your CF7 Skins questions and problems.
