In this article, we will try to explain how to set up Conditional Redirect for Contact Form 7 with the help of our Pro Addon “Contact Form 7 Conditional Redirect”.
What is Contact Form 7 Conditional Redirect?
One of the common features of a form is to redirect the user to a thank you page after form submission. But what if you want to redirect to different pages based on each user? With the Contact Form 7 Conditional Redirect feature, you can guide users to a designated page based on their choices after they submit the form. For instance, if a user chooses “Yes” from a dropdown, they’ll be taken to a specific page, while selecting “No” redirects them to a different one. In this tutorial, we will try to show how to create such a Contact Form 7 redirect on submit.
What’s needed
These are the list of things we need to do to create a Contact Form 7 condition-based redirect:
- Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
- Download & Install Ultimate Addons for Contact Form 7 Pro and Redirection Pro Addon from our Client Portal.
- After installation of the plugins, you need to add your license key for the pro version. Once you do that, it should look like this:
- Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Redirection checkbox. Then click the Save Changes button. This will enable the “Contact Form 7 redirection” settings.
Conditional Redirect for Contact Form 7 – Live Example
In this tutorial, we will create a Contact Form 7 form which will redirect to different pages based on condition (like the example below). You can, for sure, create your form following the same steps. In this form, if a user selects “Yes” from the dropdown, they will be redirected to a Specific page, if they select “No”, they will be redirected to another page.
[Note: the redirection page will open in a new tab]
Check our main demo to see all the features of our Conditional Redirect for Contact Form 7 addon.
Let’s Create Our Condition-based Redirection
In some cases, you’ll want to redirect users to a thank you page or a page with another service once they submit a form. You may also want to redirect them to another URL depending on the value they write in a particular field. Using such redirections conditionally can help the user experience or push them to use more of your services. Now, here is what you need to do: Go to Contact -> Add New in your WordPress Dashboard to create a new form. You will find a UACF7 Redirection option available above your admin panel of the Contact Form alongside Form, Mail, Messages, and Additional Settings.
Setup your Conditions & Fields
Before going to the redirection tab, stay on the form editor, and add all your necessary fields. Then add your conditional field based on which the redirection will take place. For example, on the above form, we added a dropdown menu with simple Yes/NO answers.
Setup Conditional Redirections
Click on the UACF7 Redirection. On this tab, do the following:
- You will find there is a setting called Enable redirection. Below that you will find another setting called Conditional Redirect. Enable both of the options by clicking them.
- Then click the “+Add Condition” button. If you want to set 1 condition, click the button once, if 2 conditions, then click the button twice and so on.
- Now, on the conditions field:
- If Dropdown: Select the field based on which you want to set conditions.
- Value: Add the answer you expect the user to put on the field.
- Redirect to: Add the URL where the user will be redirected if they add that value.
Here is how we set it up:
- The Open page in a new tab checkbox makes the redirection happen on a new tab. This box is optional. Click this box if needed.
- Tags support to redirect URL: This option is useful if you want to pass your data to WhatsApp or another platform which supports tags. This is another Pro feature. You can learn more about this from here.
Thats it! Now, hit the Save Changes button and your task of Contact Form 7 redirect to the thank you page is achieved 🙂
Copy the Shortcode
Once u hit save, copy the Contact form shortcode.
Time to Publish
Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.
Watch Complete Video
If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of Contact Form 7 Conditional Redirect:
Still Not Clear? Please contact us. Open a ticket from here.