Redirect to a Thank You Page with WordPress Contact Form 7

Contact Form Seven is a great plugin, but it is missing one essential feature when it comes to tracking conversions. That is redirecting to a thank you page on form submit.

This tutorial will explain how to redirect to a Thank You Page with WordPress Contact Form 7

Solution #3 (Best Answer):

Option 1: Global Thank you Page Redirect (all forms)

If you want to redirect all pages to the same thank you page just copy and paste the code below into your themes functions.php file.

Code:

//This function prints the JavaScript to the footer
function add_this_script_footer(){ ?>

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://yourdomain.com/thank-you';
}, false );
</script>

<?php }

add_action('wp_footer', 'add_this_script_footer');

Obviously, you need to replace the http://yourdomain.com/thank-you in the code to the URL you want to redirect to.

Option 2: Multiple Thank you Page Redirects (individual forms/pages)

Okay, so Option 1 works if you want to redirect all Contact Form 7 forms to the same thank you page, but what if you just want a single form like the one on your contact page to redirect? Or maybe you want multiple forms to redirect to different thank you pages.

Fix A: Use this plugin
https://wordpress.org/plugins/contact-form-7-success-page-redirects/

I have tested this plugin and it seems to work well. It’s using the “wpcf7_mail_sent” action hook to fire the redirect. Hopefully this hook is not deprecated any time soon by the Contact Form 7 author because this plugin seems to be the best redirect solution.

Fix B: Add this code

If you don’t want to depend on some unknown authors buggy plugin (see support forum) you could just pop the code below in your footer.php or a page template file for any given page the form is on. I placed the code just after the wp_footer(); function in my themes footer.php file.

Code:

<?php
//Redirect to Thank you Page if page name is "contact"
if ( is_page('contact')) {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/thank-you';
}, false );
</script>
<?php } ?>

Again, you need to replace the http://yourdomain.com/thank-you URL and the “contact” page name in the code.

Solution #1 (Deprecated): Simply put this code in the “Additional Settings” area of the Contact form 7 Admin:

on_sent_ok: "location = 'http://www.yourdomain.com/thank-you/';"

Solution #1 was the recommended solution until recently for Redirecting to a Thank You Page, but the Contact Form 7 developer has stated that the method of using on_sent_ok hook is no longer recommended. Don’t ask me why he would do such a thing, but the function is scheduled to be abolished by the end of 2017.

See: https://contactform7.com/redirecting-to-another-url-after-submissions/

Solution #2 (Old hacky solution):

Step #1: First thing is to create a Thank You page in your WordPress admin. Name it “Thank You” with a permalink of “thank-you”.

Step #2: Go to your WordPress root directory and open up the script.js. (should be /wp-content/plugins/contact-form-7/script.js)

Step #3: In the scripts.js search for: if (1 == data.mailSent)

then add the following code after the jquery code: location.href=”http://www.yourdomain.com/thankyou/”;

so the final code will look something like this:

if (1 == data.mailSent) {
                  $(data.into).find('form').resetForm().clearForm();
                  location.href="http://www.yourdomain.com/thank-you/";
                  ro.addClass('wpcf7-mail-sent-ok');

or this depending on the Contact 7 version you are using:

if (1 == data.mailSent) {
                  jQuery(data.into).find('form').resetForm().clearForm();
                  location.href="http://www.yourdomain.com/thank-you/";
                  wpcf7ResponseOutput.addClass('wpcf7-mail-sent-ok');

Obviously you will have to change the http://www.yourdomain.com to the url of your website.

Save the file on your server and you’re done.

Solution #3 used to work, but the code has changed a lot and probably won’t apply to your version of Contact Form 7.

Let me know if you have any questions.

Shawn

Share Web Design

Featured Posts

Top

Almost there! Please complete this form and click the button below to gain instant access.

Get The Full Guide & Example Files:

It makes setting up your AJAX code super simple!