Redirect To Thank You Page After Contact Form 7 Submission

If you are using a Contact Form 7, then you probably know that when a user fills a contact form and hit Submit button they will not redirect to any page. Instead, plugin submits the user’s data through Ajax and keep the user on the same page where contact form is displayed.

But what if you want to redirect a user to the thank you page of a website after Contact Form 7 submission?

Why Need Of Thank You Page?

Thank you page is used to increase your conversions. Apart from showing content like ‘Thank you for your inquiry. We will get back to you soon.’, you can do a lot more things on the same page.

Depend on your website culture you would do the following tactics on the thank you page.

  • Display a Promotion
  • Add Links to your Best Content
  • Ask Readers to do a Survey
  • Participate in your Community
  • Display Testimonials
  • Ask them to Share your Site
  • Show a Video
  • Ask for Feedback
  • Ask them to follow you on Social Media

These are some tips you can apply. If you wish you think for something extra that can help you.

Redirect To Thank You Page After Contact Form 7 Submission

We hope you are convinced with the use of thank you page for your website. Next, let’s see how to do this redirection in the Contact Form 7 plugin.

Some of the users who already done this in past but using the on_sent_ok and on_submit settings should note that these 2 settings are about to deprecated by the end of 2017. One can read about this on their official documantation.

If you are using the latest version of this plugin, then under Additional Settings page you will see the red border and message about deprecated settings.

Contact Form 7 Deprecated Settings

You should remove above settings now. Else, your redirection to thank you page will stop after depreciation of these settings.

Author of this plugin replaces this redirection using the DOM event. All you need to do is place the below JavaScript code in the appropriate place.

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

Make sure you replace dummy location above with your actual URL of a page.

Above code will go in the footer.php before the closing of body tag or in custom JS file if you have created for your website. Of course, if you are writing this code in JS file you don’t need to include the script tag. It’s up to you where to place this code.

Related Articles

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

2 thoughts on “Redirect To Thank You Page After Contact Form 7 Submission

  1. Hello,

    I’m reading your article but if I have more than one contact form, where I need to put the code in the header, and I would loke to know how can I do if I have a lot of contact form.

    Could you help me, please?

    1. wpcf7mailsent is a listener which trigger when Contact Form 7 email is sent. It works with one or multiple contact forms. You don’t need to do additional code. Just put this code in the footer after wp_footer().

Leave a Reply

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