Redirect To Thank You Page After Contact Form 7 Submission

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

This is a usual flow for most of the forms. But what if you want the user should redirect to the thank you page or any custom page of a website after Contact Form 7 submission? If you are the one who is looking for it then keep reading.

Why Need to Redirect on Another Page?

For the analytics purpose, the site owner normally keeps a success or thank you page on the website. How many users are redirected to these pages calculates the success ratio of the campaign. Thank you page is used to track your conversions. Plus, 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.

Depending on your website 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 to the page. You may display anything that can help you.

Redirect to Thank You Page After Contact Form 7 Submission

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

The Contact Form 7 plugin provides a different DOM events which can be utilized for various reasons. For this tutorial, we can use either ‘wpcf7mailsent’ or ‘wpcf7submit’ events.

The ‘wpcf7mailsent’ event fires when email is sent on form submission. A ‘wpcf7submit’ event shoots on submission of a contact form. The user can choose any event in the following JavaScript code. You can place below code in the footer.php after a wp_footer() call.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = "<?php echo get_bloginfo('url'); ?>/thank-you";
}, false );
</script>

Here, I am assuming your page slug is ‘thank-you’. Adjust this slug as per your pages.

Go ahead and give a try. You should redirect on your thank you page after contact form submission. I would like to hear your thoughts and suggestions in the comment section below.

Related Articles

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

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

  1. solution which i looked for redirect to different pages depending on forms input data. Google send me on this website, so, maybe it’ll be useful for someone:
    add_action( ‘wp_footer’, ‘my_wpcf7_wp_footer’ );
    function my_wpcf7_wp_footer() {
    echo ‘

    document.addEventListener( \’wpcf7mailsent\’, function( event ) {
    var inputs = event.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {
    if(\'form-input-name\' == inputs[i].name.toLowerCase()) {
    if(\'form-input-value\' == inputs[i].value.toLowerCase()){
    location = "' . get_site_url(). $redirect-page .' ";
    }
    }
    }
    }, false);

    ‘;
    }

  2. Hi, I have a form and field of 4 answers. I want the user, after choosing the right answer, to be transferred to the website. Each response should have a different website.

  3. 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.