How to Redirect to Another Page on Contact Form 7 Submission

Listen to this article
Contact Form 7 Redirect on Send
Contact Form 7 Redirect

For a majority of sites, (or for that matter, even our site), you must have noticed, that the contact form is on a dedicated page, ‘Contact Us’ page. Considering that you use the Contact Form 7 plugin, to display the contact form, a successful submission of the form, displays a success message, on the same page. The reason why this is the default functionality of the plugin, is because the purpose is served for most number of people. But there are a certain few (who would instead of a message being shown), want to be redirected to a different page, say a ‘Thank You’ page, (or any page on the site).

It makes sense. You have a ‘Contact Us’ page, add a separate ‘Thank You’ page. In fact, this works well, when your form is not on a dedicated page. May be it is in a sidebar, or some other place. You can use, the redirected page to convey more information to your visitor. For example, you could display a thank you message, and add additional information, such as certain service policies, or provide some answers to frequently asked questions, or share links to other pages on your site (‘You might also be interested in’, ‘Our Upcoming Events’, etc).

Redirect using Additional Settings Option in Contact Form 7

The Additional Settings field, is an option provided for each contact form. This field can be used to add any javascript code, which will be executed on a specified javascript hook. Contact Form 7 provides ‘on_sent_ok’ hook, which will be used on successful submission of the form.

You will need to add the following, in the Additional Settings field in Contact Form 7, to redirect a visitor to another page, on successful form submission.

[pre]on_sent_ok: “location = ‘//’;”[/pre]

Do note, that everything you write after on_sent_ok, should be on a single line, included between quotes.

Contact Form 7 Additional Settings
Contact Form 7 Additional Settings

The on_sent_ok function can also be used to track form submission in Google analytics. If you wanted to add the tracking code here as well, you would have to write something like this in Additional Settings:

[pre]on_sent_ok: “wdm_contactform_submit();” function wdm_contactform_submit(){ _gaq.push([‘_trackEvent’, ‘Contact Form’, ‘Submit’]); location.replace(‘//’); }[/pre]


Did You Know?

Since you are already using Contact Form 7, we feel this SEO tip would help you. By default, the Contact Form 7 plugin, loads three javascript files, in the header of every page, (which means they will be loaded on every page, whether the page has a contact form or not). While these files are necessary for AJAX, you would not need them on every page. This could affect your page loading time. To reduce the load time for each page, you would want to load these files only on select pages.

Add the following line in wp-config.php file, this will disable loading of the files altogether.

[pre]define (‘WPCF7_LOAD_JS’, false );[/pre]

Then you will have to load these files, for the pages where the form is present, by using the wpcf7_enqueue_scripts function, on the wp_head hook.

Akshaya Rane

Akshaya Rane

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads