You may want to redirect users to a thank you page after they submit a Contact Form 7 (CF7) form on your website.
Before the end of 2017, you could do this using the on_sent_ok hook. However, the hook has now been deprecated and you cannot use it anymore to redirect users to a thank you page.
This article will show you how to redirect users to a thank you page after submitting your Contact Form 7 form.
Why to redirect users to the thank you page
Redirecting users to a thank you page after form submission may provide the following benefits:
- Keep users engaged in your website.
- Provide a richer personal experience.
- Acknowledge that you received the submitted data.
Recommended plugins to redirect to thank you page
We recommend the following plugins to redirect to the thank you page:
1. Redirection for Contact Form 7
Redirection for Contact Form 7 provides a method to redirect visitors to success pages or thank you pages after the form is submitted. If no message is sent, or if there is an error with the form, the user will not be redirected.
Contact Form 7 Redirection uses DOM events to perform redirection without disabling AJAX, as recommended by the Contact Form 7 plugin author Takayuki Miyoshi.
Redirecting to Thank You page using Redirection for Contact Form 7
To redirect users to the thank you page after form submission:
1. Go to Contact >> Contact Form.
2. Select the Redirect Settings tab.
3. Choose the page where you want to redirect the users from the drop-down menu.
Tip: You can also redirect users to an external page by selecting the Use external URL checkbox and providing a URL in the External URL field.
4. Click Save.
Tip: Using Redirection for Contact Form 7, you can also:
- open the thank you page in a new tab
- pass specific fields of the form as query parameters
- and configure a delay before redirecting the user.
Additionally, you can provide custom scripts which will be executed once the form is successfully submitted.
2. Controls for Contact Form 7
Controls for Contact Form 7 (Analytics & Tracking) provides multiple features for customizing a Contact Form 7 form, including a feature to redirect users to the thank you page after submitting the form.
Controls for Contact Form 7 provides various other features such as storage of form entries, disabling AJAX, and analytics tracking in addition to redirection.
Redirecting to Thank You page using Controls for Contact Form 7
To redirect users to the thank you page after form submission:
1. Go to Contact >> Contact Form.
2. Select the Customize tab.
3. Add the URL of the thank you page in the Redirect to URL on Success field.
4. Click Save.
Tip: Using Contact Form 7 Controls, you can also disable:
- AJAX from this form
- the default CSS
- automatic paragraph formatting
- or HTML5 input types.
Additionally, you can configure analytics tracking with Google, Matomo, or Facebook Pixel.
Code based solution
You can also use a code based solution to redirect users to a thank you page by using Contact Form 7 DOM events. To do this, use the following script:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
</script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
<?php
}
Tip: Replace http://example.com/ with the URL of a thank you page.
Add your code in
functions.phpif you are using child theme or you can use a plugin like Code Snippets.
You can add a delay to the redirect for Contact Form 7 by using JavaScript. You can use the setTimeout function to add a delay before redirecting the user to the desired page.
For example:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
setTimeout(function(){
location = 'http://example.com/thank-you';
}, 5000);
}, false );
</script>
<?php
}
This will redirect the user to “http://example.com” after a delay of 5 seconds (5000 milliseconds).
You can change the delay time and the redirect URL to whatever you want.
Further reading
- Contact Form 7 Redirection
- on_sent_ok not working in Contact Form 7
- Redirecting to another URL after submissions
- on_sent_ok Is Deprecated
Have questions or need help?
If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.
If you are using any of our Add-ons, we provide Premium Email Support to help with your questions and problems.
