If you are using Contact Form 7 plugin, then you would know that when a user submits a contact form 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 all forms. But what if you want to redirect users on the thank you page or custom page 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 analytics purposes, the site owner creates success or thank you page on the website. They add analytics code on these pages. These pages calculate the success ratio of the campaign based on how many users are redirected to these pages. Thank you page is used to track your conversions. Also, 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.

Note: If you want to store your Contact Form 7 entries in Google Sheets then check out my plugin which connects Contact Form 7 with Google Sheets. It allows you to connect unlimited contact forms with Google Sheets.

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 this redirection with the Contact Form 7 plugin.

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

The wpcf7mailsent event fires after the email is sent on successful form submission. A wpcf7submit event shoots after the successful submission of a contact form. The user can choose any event in the following JavaScript code. You can place the below code in your JS file.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = "https://example.com/thank-you";
}, false );

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

In the above code, you probably want to keep your site URL dynamic. You can do it by passing a site URL to your JS file at the time of enqueue.

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'siteurl' => get_bloginfo('url'),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

After this, fetch the site URL in JavaScript as follows.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = blog.siteurl + "/thank-you";
}, false );

Go ahead and give it a try. You should redirect to your thank you page after the contact form submission.

Handling Multiple Contact Forms

The wpcf7mailsent works globally for all contact forms. If you are using multiple forms on your website, this event fires for all forms after the email is sent successfully.

You may have different situations for different forms. For instance, you have different pages per form where the user should redirect. It can be handled easily with the below code.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'FORM_ID_HERE' == event.detail.contactFormId ) {
        // do your stuff
    }
}, false );

Related Articles

• How to Save Contact Form 7 Submissions to WordPress Database
• How to Add Country List in Contact Form 7 Plugin
• Remove Contact Form 7 CSS and JS When Not Needed

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