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 replace on_sent_ok with Contact Form 7 DOM events for:

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:

  1. Contact Form 7 Custom DOM Events
  2. DOM events (Wikipedia)
  3. Basic understanding of coding in PHP / WordPress / JavaScript

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.

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.

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.

on_sent_ok in action

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.

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

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.

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.

Embedding Google Analytics using Contact Form 7 Controls

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.

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.

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!

Automatic redirect using Contact Form 7 Controls

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
}

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.

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

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 CF7 Skins Pro or any of our add-ons, we provide Premium Email Support to help with your questions and problems.

%d bloggers like this: