Redirecting to “Thank You” Pages with Contact From 7 for All Browsers

When you want your CF7 form to do something more than flash a message on the same page, you may want it to redirect to a proper thank you page for many reasons including analytics, metadata, and letting the user know that the contact process has been completed.

Normal redirects using an event listener

CF7 recommends this line of code to be placed wherever your JS will be set.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

This will work for browsers that handle multiple types of scripts well such as Chrome and Firefox. However, not all browsers were created equal.

Issues with Safari and IE when redirecting with event

Normally, when you want to redirect to any page after an action or event is made, javascript/jquery can help you with that. Yet in the cases of select browsers such as Safari or Internet Explorer, they may not take to the code as easily as other browsers can. This unfortunately happens when attempting to redirect with the event above. In some cases, the form page will refresh and clear itself even though an email has been sent. This then becomes an issue for the user, as while an email will still be sent to the intended recipient, the customer will not know unless they too receive a copy. Even still, they might re-fill the form out again and again and merely assume the form is broken if it never gives them a confirmation or thank you for submitting to the form.

There are many ways we have attempted to fix this “bug” and all scripting options either wouldn’t work or would result in an email not sending. For example, a script that listens to the click of the submit button can redirect to another page, however it must wait for the email to send before going to a new page or else the email can be skipped altogether which would be bad. So we could go through some loops in the additional scripting, or we can use a simple solution in the form of a plug in.

A plugin for your plugin

It might sound silly, but there’s no shame in a WordPress plugin asking for help from other plugins. Contact Form 7 forms never had an intention to redirect after completion, although they do suggest code to help with that they have no inherent setting or feature to make it simpler. Contact Form 7 Redirection does all the heavy lifting for you, using support code to help establish and event that will help you redirect to any WordPress page you have created or any external site of your choice by simply editing the form and going to a new tab that should be created called “Redirect Settings”. It does come with a couple extra settings and chances to add scripts if you wish, but the only step you would need to take is choosing which page to redirect to after the form is completed. We highly recommend using this plugin for anyone that has CF7 installed, as it is will make your redirections easier but also get the message across to your users that would like to know if they have completed their requests/submissions. Best of all, it works in all browsers! The plugin code has been tested and we can confirm that it is safari and internet explorer compatible.

Just remember that if your plugin is giving you trouble or having issues in select cases, there may also be a companion plugin out there to solve your troubles.