Contact Form 7 (CF7) is one of the most popular contact form plugin options for WordPress-based businesses. However, Contact Form 7 users should know that the process for sending users to a thank you page after a successful form submission has changed. According to the developer’s documentation, they deprecated/removed that functionality at the end of 2017.
Table of Contents
The updated contact form doesn’t impact the ability for users to submit forms (and for you to receive those submissions), but it can have a dramatic impact on your ability to accurately track these submissions in Google Analytics and other analytics programs.
Below is a quick guide on how to update your Contact Form 7 forms so that they still redirect to the proper thank you pages.
Please Note: The new method will require you to edit your theme’s functions.php file. Please make sure you’re familiar with the best practices of editing functions.php files – a single typo could make your site inaccessible.
The Old Method: What Changed?
Before the update, you would configure a form to redirect using the Additional Settings field of the given contact form. In that field, you’d place a code similar to this:
on_sent_ok: "location = 'http://www.example.com/thank-you-page'";
This piece of code is essentially JavaScript – it’s just that the plugin is doing most of the work for you by creating the rest of the code surrounding what you enter.
However, citing potential security risks, the developer plans to remove this functionality from the plugin. If and when this happens, your forms will no longer send users to thank you pages upon successful submissions.
New Method: One Thank You Page
Most businesses, you’ll have a single thank you page that acts as the confirmation for all your forms. The good news for you is that I have a code you can (more or less) copy and paste.
Ultimately, we’re still doing exactly what the old method did; we’re just doing it manually this time. Let’s get started.
Copy and paste the following code at the bottom of your functions.php file:
Before you save your file, change https://www.example.com/thank-you/ (in the fifth line) to your thank you page URL.
That line of code should look familiar – it’s exactly what we had after on_sent_ok in the old method.
Essentially, this code will add a script to the footer of your WordPress pages that ‘listens’ for successful form submissions (or, in this case, that a form submission has been emailed to you). When that criteria is met, the form redirects to the URL you’ve provided.
Again, this is exactly what the old method did – we just have to draw it out a bit more.
New Method: Multiple Forms, Unique Thank You Pages
If you have multiple forms that each go to a unique thank you page, the process becomes a bit more complicated. With the old method, you could specify an on_sent_ok on a form-by-form basis. Unfortunately, the code above will send submissions from every form to the same thank you page. This can still impact your tracking.
The good news is: there’s a work around for that, too. This will, however, require some extra work.
Start with pasting this code into your functions.php file:
Like before, we’re creating a ‘listener’ to fire a specific code when someone submits a form. This time, however, we’re using conditional if…else JavaScript statements to further specify our criteria.
Now, we’re saying: “If a form is submitted. check the form’s ID. If that ID is x, submit it to thank you page y. If that ID is w, then submit it to thank you page v.”
Now comes the work on your end.
For each form, you’ll need to identify the form ID and then use that as the conditional criteria.
You can find this in the shortcode you’d use to place that form on a page or post. For example, the shortcode for the first ID in my example would look like this:
[contact-form-7 id="947" title="General Contact Form"]
The highlighted portion is the form’s ID. Copy that number and replace it with the ones in my example.
For reference, this is the bit you’re replacing:
if ( '947' == event.detail.contactFormId )
You’ll need to update this on every form that has a unique thank you page.
Note: Additional criteria in JavaScript if…else statements should start with else if instead of just if. For more information, check out W3School’s documentation on conditional JavaScript statements.
You might notice that the final statement is just else, followed by another line of code that redirects users to a thank you page. Technically, if…else statements are supposed to end with something happening if none of the specified conditions are met. In this case, we’re saying: if the form ID doesn’t match any of the specified IDs, then send users to a third thank you page.
You have two options here:
- Omit this portion of the code (it’s not best practice, but the code should still function properly)
- Create a generalized thank you page and use it here on the off chance that there’s a form ID you haven’t accounted for.
New Method: One Form, Multiple Thank You Pages
If you’ve got a single form that goes to multiple thank you pages based on how the form is filled out, then either:
- You’re not using Contact Form 7.
- You’re using a plugin that likely has redirection solutions built into it.
- You’re already familiar with JavaScript.
Unfortunately, this solution doesn’t work very well for forms with conditional fields and thank you pages. While it can be accomplished through JavaScript, the code would have to be customized heavily towards how your form is set up, which means you’ll likely need to consult a developer.
That said, the last section of this article will cover plugins that might be able to help.
Tracking Using Google Analytics Events
This guide focused on getting Contact Form 7 to redirect users to thank you pages. However, you’ll also need to update your implementation if you track submissions through Google Analytics events.
The process is the same as above, you just need to swap out any instances of on_sent_ok: "location = 'http://www.example.com/thank-you-page'"; with on_sent_ok: ga( 'send', 'event', 'Contact Form', 'submit' ); (or whatever you currently have after on_sent_okay in the Additional Settings field).
This will then fire the event in Analytics once the form is successfully emailed to you.
Using a Plugin
In general, I recommend avoiding plugins that add functionality you can achieve with a little custom code, but if you’re not comfortable editing JavaScript/PHP and can’t work with a developer, there are plugins that can make redirecting to thank you pages more user-friendly.
The most common example is the Contact Form 7 Success Page Redirects plugin. This is a free plugin that adds a new tab to your Contact Form 7 editor allowing you to select thank you pages from a dropdown list on a form-by-form basis.
It’s worth noting here that this plugin only lets you redirect to pages, not posts. That’s probably not an issue for most people but could create limitations if you’ve got a complex lead funnel. You also can’t redirect to non-WordPress pages (whereas with the examples in this guide you can redirect to any page on the internet).
This plugin will also not allow you to send events to Google Analytics.
I’ve tried to write this in as non-coder-friendly language as possible, but, at its core, this solution is built on JavaScript. If you still have questions, feel free to reach out to me at @jdegbau on Twitter. Otherwise, you can create a thread on the plugin’s official support form.
I think the url needs to be set on the location property of the window object rather than just ‘location’. So:
window.location = ‘https://www.example.com/thank-you/’;
Otherwise this looks like it would be assigning the url to an undeclared variable called ‘location’.
Hey Kim!
I believe they both will work. Typing in ‘location’ and ‘window.location’ in the console both return the same results.
Have you had an issue with getting this to work with just ‘location’ in the script?
I have tried this method but it doesn’t work for me
Hello Tim,
Can you clarify which of the methods in this post you tried to use?
Thanks,
Josh
Yes, location on its own didn’t work for me but window.location did.
Hmm… Can you tell me what browser you’re using? I tested in Chrome, but it might be a browser-specific issue.
Ultimately, adding window.location shouldn’t stop it from working either, so I’ll probably just add it in to the code anyway to ensure it works for everyone.
Thanks for the heads up!
Wow what a mess this new way is. What if I have multiple sites pointing to the same theme? Gods help you debug if both sites have a form 1070!
Hey James,
Agreed – it’s definitely not as convenient as having a form-by-form redirect feature.
That said, there are other ways to write this code that could look for more specific things about the form outside of the ID, but this is the way the developer recommends doing it.
Alternatively, for niche cases like that, a plugin might be the way to go. I don’t have much direct experience with it, but Contact Form 7 Redirection seems to get good reviews.
This all makes sense, however my website disagrees. I’ve tried several itterations of this code and haven’t had any success. I’m trying to detect the status of a button and then redirect accordingly. Here is the modified code I’m using. The part in the middle which contains the input names is what I was using before with the on_sent_ok: before it. Now it no workie. See below.
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘12489’ == event.detail.contactFormId ) {
if( $( “input[name=’payment’]:checked” ).val() == “Pay online now – $50” ) { location.replace(‘https://www.paypal.com/cgi-bin/webscr?&cmd=_xclick&[email protected]¤cy_code=USD&display=1&amount=50&item_name=Waitlist Application’) } else if( $( “input[name=’payment’]:checked” ).val() == “Additional Sibling – $25” ) { location.replace(‘https://www.paypal.com/cgi-bin/webscr?&cmd=_xclick&[email protected]¤cy_code=USD&display=1&amount=25&item_name=Waitlist Application’) }
}
}, false );
Hi Tom,
This is probably a bit outside of my expertise in regards to JavaScript, but I’ll take a look tonight and let you know if I have any ideas for you!
Otherwise, if you find a solution, I’d love to hear it!
Thanks,
Josh
Hey Tom,
Can you expand at all on what the issue you’re having is? Does the form not redirect at all or is there some other issue?
I just tried a very similar version of the code on my personal site and it seemed to work fine.
The only things I changed on my end:
– Didn’t use :checked in the input conditional (This might depend on how exactly your form is set up though. I was using just a generic text input for my test.)
– I changed the value for the first if statement to just check for my email address (which is what I then put into the form).
I did, however, still use your PayPal links. After submitting my form, it did take me to PayPal, but I was redirected to a 404 page.
My only other thought would be: When I first copied the code, it had ‘smart’ quotes (and single quotes) that might be messing up the JavaScript – but I’m guessing that’s just due to WordPress converting the quotes in your comment. Might not hurt to double check, though.
Thanks,
Josh
I have the plugin “Scripts n Styles” installed. I embed the snippet suggested in “https://contactform7.com/redirecting-to-another-url-after-submissions/ ” to the tag of that plugin, on the page of the form, like this:
—————————————————————————————–
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘http://…..the other page…../’;
}, false );
It worked like a charm.
Hello Ary – thanks for your comment!
Yup! That does effectively the same thing. What my version does is adds the code to the footer of the site via a functions.php call, rather than relying on a plugin to handle that. Either option should work, I just prefer not to rely on plugins if I don’t have to.
Thanks again!
Nice post here. I just used it on one of my client’s website. Contact form 7 Latest version has this unable to find jquery json.php error. returns 404.
So had to roll back to 4.7 version.
Can you let me know as how to fix the error in the newer versions?
Hey Debashish,
Very strange – I’m actually not familiar with the error you found – can you provide any more context on the issue?
Also can you clarify what you rolled back to version 4.7 – your Contact Form 7 plugin or WordPress itself?
I’m wondering if there’s a plugin conflict somewhere.
Thanks,
Josh
my contact form not redirect next page
Hello Deepak,
Can you provide more context for the issue? Otherwise, if you send me a link to the page the form is on, I can take a look at it.
Thanks,
Josh
On one paticular CF7, i wish to display a shortcode [bws_pdfprint] in the success message, after the form is sent. Is there a way to do this?
At the moment if i add this shortcode in the custom message, it just displays it as plain text.
Thanks for your help.
Hello Zmier,
Unfortunately, I don’t think this is possible. Shortcodes are typically handled server-side through PHP, so I’m not sure there’s anything to be done about that via JavaScript.
One thing you could try is using this in the success message:
However, I can’t say for sure if this will work or not – and it might depend on how you have it implemented.
Hello again Zmier,
If I get a chance tonight, I’ll look into this a bit more. I have an idea that might work.
Thanks,
Josh
Hi Joshua, Many thanks for this.
I tried using but unfortunately it did not work.
It display the message within the green success message box as plain text.
I was wondering if there was a way to display it outside the green success message box, perhaps that may work? I would highly appreciate if you could look into this further. Thank you!
Hello Zameer,
Would it be possible for you to shoot me a link to the page with the contact form?
I have a way to display it outside the success message, but I’ll need to see what the HTML around the form is like – and I still don’t know for sure if the PHP will output correctly.
Thanks,
Josh
Hi Josh,
It’s still on a development site. Is there a way for me to send you the credentials privately?
Cheers!
Hi Josh,
It’s still on a development site. Is there a way for me to send you the credentials privately?
Cheers!
Thanks a lot for share this trick
Have a nice day
Thank you for the detailed article Joshua.