Contact form 7 – redirect after ajax submission

The code to redirect to a ‘Thank You’ page after the form submission in Contact Form 7.

For those of you who don’t know what is Contact Form 7, its a great wordpress plugin for contact forms, and you probably shouldn’t be here.

The Problem:

I am using ‘Contact Form 7’ plugin and everything works fine. But instead of displaying the message ‘Your email sent successfully’, i want the visitor to be redirected to a ‘Thank You’ page that i’ve created.

The Solution:

You can have different forms redirecting to different url’s after successful submission. So for example if you want form1 to be redirected to one url and form2 to be redirected to other url, you can do that easily!
Here’s what you need to do:

  1. Go to edit the desired contact form in wp-admin ( yourdomain.com/wp-admin/admin.php?page=wpcf7 ) and add a hidden field in the form’s html. Here’s what you should add:
    <input type='hidden' id='wdw_redirect_to_url' value='http://webdeveloperswall.com/wordpress/contact-form-7-redirect-after-ajax-submission' />

    change the url here to the url you want.
    So initially if the form’s content looked like the image below:
    wpcf7-before

    After adding the hidden field, it should look like the image below:
    wpcf7-after

    You can set different url’s in different forms, just make sure that you dont change the id of the hidden field!

  2. Next, add this little javascript in any of your theme’s(or plugins’) javascript file:
    <script>
    jQuery(document).ready(function($){
        $(".wpcf7").on( 'mailsent.wpcf7', function(){
    	var redirect_to = $(this).find('#wdw_redirect_to_url').val();
    	if( typeof(redirect_to)!=='undefined' && redirect_to!='' ){
    	    window.location.href= redirect_to;
    	}
        });
    });
    </script>

    And you are done!

If you would rather open the url in a new tab, in the code above, replace

window.location.href= redirect_to;

with

window.open( redirect_to );

Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

8 thoughts on “Contact form 7 – redirect after ajax submission”

  1. Thank you! that helped a lot and it’s the only solution that worked for me after hours of trying all the others out there like “on_sent:ok”… etc.

    any chance you’d know how to make this redirect dependent on the form?
    e.g. have form 1 redirect to target URL 1 and form 2 redirect to targetl URL 2?

    Cheers,
    Tobias

    1. Hi Tobias,
      Nice to hear that it worked for you, and I’ve updated in the post that how to redirect different forms to different urls!
      It was easy, and the new code is actually better as you can set the url from wp-admin itself rather than hardcoding in javascript.

  2. Hi Chandan!

    I actually switched to the Visual Form Builder and it worked perfectly – no other plugins needed, but I will definitely hold on to your email!  Could be useful for future clients.  Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *