One of the most commonly asked questions about Contact Form 7 is how to send visitors to a “thank you” page after they submit a form.
By default, the plugin simply shows a confirmation message beneath the form, which is fine for simple sites but not ideal if you want to track conversions in Google Analytics or Google Tag Manager, or if you want to offer the visitor a next step such as a booking link or a download.
Older tutorials suggest using the on_sent_ok additional setting, however this was deprecated in Contact Form 7 version 4.x and has since been removed, so it no longer works.
The correct approach today is to listen for the wpcf7mailsent DOM event, which Contact Form 7 fires in the browser once a submission has been successfully sent.
The snippet
Add the following JavaScript to your theme’s main script file, or enqueue it as a separate file:
Replace 123 with the ID of your form, which you can find in the shortcode, e.g. [contact-form-7 id="123" title="Contact form 1"].
Replace /thank-you/ with the URL of your own thank you page.
How it works
The wpcf7mailsent event only fires when the form has passed validation and the email has been sent successfully. That means visitors who make a mistake, or whose submission is flagged as spam, will not be redirected.
It is also worth knowing that Contact Form 7 fires other events, such as wpcf7invalid, wpcf7spam and wpcf7mailfailed, that you can use for other behaviour.
Checking the contactFormId matters. Without it, every Contact Form 7 form on your website would redirect to the same page, which is rarely what you want if you have a newsletter form in the footer as well as a contact form on the contact page.
Tracking conversions
Having a dedicated thank you page makes conversion tracking much simpler.
You can set a goal or trigger in Google Analytics or Tag Manager that fires when the thank you page is viewed. Remember to stop search engines indexing the page, either with a noindex meta tag or your SEO plugin’s settings, so people cannot land on it directly and skew your figures.
If you need to track events without leaving the page, my post on adding an event listener for a Contact Form 7 form covers the basics of working with these events.