Proper Redirect After Form Submission in WordPress | Custom & Manual Redirect | 3 WordPress Plugins

In this video we will cover contact Form 7 redirect after submission, contact form 7 redirect after submission without a plugin, contact form 7 redirect after submission with WordPress plugin, after form submit redirect to another page in WordPress and such situations. If contact form 7 redirect after submit not working then this tutorial is for you.

After successful form submission in WordPress, usually user stays there looking at a form submission success message that says, like: 'Your email has been sent.' As a business or business WordPress website owner you can engage user further and take him to success page to show him some useful information or give him some free goodies to download or just redirect to a custom beautiful thank you page to provide a richer experience. There are multiple ways to redirect to another WordPress page after successful form submission in WordPress.

You can redirect user to another page manually or by using custom JavaScript code or via WordPress redirect plugin. To redirect user in WordPress after form submission manually edit theme files and add a code in footer. Add script tag. Add event listener on contact form 7 mailsent event, add timeout for 2 seconds to add a 2 seconds wait before user redirects. After that just redirect user to a WordPress page that is already built.

But this script will target all WordPress Contact Form 7 forms in your site so I will change it a bit. I will target the exact form by using its id so that only that form may redirect the user and not every form in WordPress site built with Contact Form 7 plugin.

We will first check in JavaScript if the element exists. If element exists then we will declare a variable and keep it's value as the same element. Then we will add event listener to that element rather than for whole document. Then we will add 2 seconds delay before redirecting user to the success page or thank you page. Here we are checking if the element exists at the page. If, yes, add event listener to it. And if mail is sent, then wait for 2 seconds and redirect to page.

You can read more about 'Contact Form 7' related DOM events at 'Contact Form 7' docs.

That is one way... if you have to redirect user to a custom thank you page after email is sent in WordPress manually. We can also use a WordPress Plugin to redirect to a thank you page or success page after email is sent successfully in WordPress by using contact form 7.

We will delete the old custom redirect script that was in footer. Go to plugins and search for 'Contact Form 7 Success Page Redirects'. Install it and go to contact form 7 and edit the form for which redirect is required. We can select a page where user will be redirected. But this form redirected the page and did not use Ajax. So I will show you two more plugins to do similar task. Try 'Controls for Contact Form 7 (Analytics & Tracking)' plugin and 'Redirection for Contact Form 7' plugin. These plugins offer extra options for redirect. You can choose to use custom external page redirect or you can use internal page redirect and select a page that is already in WordPress. And these two use Ajax to send email and then redirect user.

If you are new to the channel, subscribe to learn more about web development, web application development, editing wordpress source code, how to create a website using wordpress, developing landing page in wordpress, working with child theme wordpress, how to build a website with wordpress, create website with wordpress and related web development areas.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#WebStylePress #WordPress #WordPressTutorial #WordPressTraining #WordPressPlugin #WordPressTips #webdevelopment

[kamranm]

Very informative and helpful video. Thank you for taking the time!

[kelvinlatouche]

How to redirect to the page you were on prio to registration. For example some gets a regeral link uses it to access your site and need to regiter, after rehistering they should be redirecred to the page they were on?

[erasmuscoursescroatia]

How to do it if we dont have theme editor option in appearance menu

[kamandekimiti]

why not automatic download or automated email

[badposture]

how would you redirect to a different website