Place this code inside the header.php file of your child theme. For best results find the following function in your header.php file and place the code right before it:
wp_head();
Make sure you include the “script” tags otherwise it won’t work.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://google.com/';
}, false );
</script>If you want to redirect multiple forms to different pages check out this tutorial. You can also redirect people based on what they selected in your form.
More Contact Form 7 Tutorials you may want to check out after this one:
- Contact Form 7 Multiple File Upload Functionality Quick and Easy
- Contact Form 7 Redirect Multiple Forms To Different Pages After Submission Without A Plugin
- Create A 2-Column Responsive Contact Form with Contact Form 7
- Get Value From URL Parameter To Pre-fill Contact Form 7
- Contact Form 7 PayPal integration To Accept Payments
12 thoughts on “Contact Form 7 Redirect After Submission Without A Plugin”
I saw the video and i really appreciate your efforts to make this kind of tutorial. Kindly share more wordpress tutorial like this which will help to grow more. Again thank you so much for this tutorial.
You’re welcome for the tutorial. I have lots of CF7 tutorials and others on the WPLearningLab YouTube channel. Check it out over here: https://www.youtube.com/c/wplearninglab Make sure you subscribe so you don’t miss anything 🙂
What if I only want to add this function to a specific form on a specific page? I have other forms that I do not want this function on
Hi Freddy,
If you add it just to a specific page then it won’t fire on other pages and other forms.
I hope that helps and thanks for stopping by!
I’m using this script to give a .pdf e-book when the user completes the form. Is there a way to direct the URL to another tab or as a downloadable file?
Hi Wayne,
Instead of having a webpage URL in the Javascript you can put a link to the PDF. In some browsers, it will open that PDF in a new tab and in other browsers, it will download the PDF instantly after successful form submission.
I hope that helps and thanks for stopping by!
Hi.
I’m trying to intergrate a courier service api into a checkout page, so that whenever the customer buys a product, there is an option for them to have it delivered to their door step.
using wordpress of course, how do i make that happen or what steps should i take?
Please help..
Thanks.
I assume you’re using WooCommerce. If you are, the easiest (and smartest) thing to do is look in the WooCommerce marketplace to see if they have a plugin for that courier already. If they don’t then you’ll have to go through the courier’s API documentation. If they have an API they must have sample code helping you integrate it into your checkout process.
I hope that helps and thanks for stopping by!
Hi Bjorn,
How to redirect submission based on conditional field? For example a dropdown has option A and B, if user choose A they will redirect to URL_A after submit, if choose B redirect to URL_B after submit.
Your video is very helpful. Thank you
Hi Rizky,
This is a little bit tricky. You’ll have to use the code from this post (https://wplearninglab.com/contact-form-7-redirect-multiple-forms/) for your Javascript.
Combine that with what is on the CF7 help page here: https://contactform7.com/dom-events/
This is the code you need from the help page:
document.addEventListener( ‘wpcf7submit’, function( event ) {
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'your-name' == inputs[i].name ) {
alert( inputs[i].value );
break;
}
}
}, false );
In that sample code "your-name" is the name given to your input field inside the CF7 builder. Change it to the name of your conditional field. Then use the If statement to determine if the input matches option A or option B. Then redirect in the If statement.
Does that make sense? This may be a good tutorial video.
Thank you for the video.
When I paste the code in the header.php as you have shown in the video I get this error message:
Your PHP code changes were rolled back due to an error on line 59 of file wp-content/themes/Vela-child/header.php. Please fix and try saving again.
syntax error, unexpected ‘<'
I'm not sure what I'm doing wrong.
Thanks.
Hi Juliet,
The specific error is that a less-than-greater-than sign (pointy bracket) “<" was in the wrong place. My feeling is that you tried to paste the code inside a