Celebrate WordCamp Europe - 30% OFF! Use coupon WC30 - View Details

Create a Redirect SelectorPRO

In this tutorial we’ll show you how to set up form redirects using conditional logic. This enables you to redirect to different web addresses depending on the choice a user makes on your form.

1. Create Form

For the purpose of this tutorial, we’ll create two different redirects for a Contact Us form. When the form us submitted it will redirect to either a Sales or Support page depending on the selection made by the user completing the form.

To create a quick Contact Us form:

  1. Click on Add New from the WS Form administration menu.
  2. Click the Contact Us template.

Create a Form Recipient Selector - Add New Form

2. Add Radio Field

Once you are in the layout editor, we are going to add a radio field to the form that will be used to select a department. You could also use a select field if you wish. To do that, we simply click or drag and drop the Radio field from the toolbox sidebar. We’ll give that field a label of Select Department, but you can label it anything you wish. Of course, the input criteria could be anything you wish but for the purpose of this tutorial we’ll use a radio field as our conditional logic criteria.

Create a Form Recipient Selector - Radio Field

3. Configure Radio Field

Next we need to configure the radio field with the departments we want to allow the user to choose from.

  1. Click on the settings (gear) icon for the Select Department field.
  2. In the sidebar, click the Radios tab.
  3. Remove the sample rows and then add as many rows as you need for each intended recipient. We’ll add Sales and Support in this tutorial.
  4. Click the checkmark on the first row to ensure the first row is checked by default. We need to do this to ensure at least radio is selected. Another option is that you could check the Required checkbox in the Basic tab to ensure at least radio is checked when the form is submitted.
  5. Click Save at the bottom of the sidebar to save your changes.

Create a Form Recipient Selector - Radio Settings

If you preview the form, it will now display two radio fields that allow the user to select which recipient they would like their inquiry to go to.

Create a Form Recipient Selector - Radio Frontend

Next we need to set up two redirect actions, one for each department.

4. Set Up Redirect Actions

To access the redirect actions, click the Actions icon at the top of the page. This will open the Actions sidebar:

WS Form Actions Sidebar

Because this is a new form, we’ll need to add two new Redirect actions. You would create as many Redirect actions as you need. To do this:

  1. Click the add icon below the action list to add a new action.
  2. Select Redirect from the Action pulldown list.
  3. We’ll rename that action by clicking on it and then enter Redirect to Sales.
  4. In the URL setting, enter the URL you want to redirect to. In this example we’ll use /sales/ as the path. This can be any URL you wish, including external websites, e.g. https://wordpress.org
  5. Repeat the above and call it Redirect to Support

Create a Form Redirect Selector - Actions

You should then end up with two actions, one called Redirect to Sales and one called Redirect to Support (or whatever department names you have chosen).

For each redirect action, configure the URL. For more information about configuring the Redirect action, click here.

5. Conditional Logic

The last step is to create the Conditional Logic. WS Form conditional logic enables you to enable and disable actions based upon the output of an IF condition.

In this tutorial, we want to enable the Redirect to Sales if the Sales radio is checked. Likewise if the Support radio is checked instead, we will want the Redirect to Support action to be enabled.

The pseudo logic for the sales condition would be:

IF Select Department ROW CHECKED IS Sales THEN RUN ACTION ON SUBMIT Redirect to Sales ELSE DO NOT RUN ACTION ON SUBMIT Redirect to Sales

To create this conditional logic:

  1. Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.
  2. Click the add icon below the conditional logic list.
  3. Enter a label for the conditional logic, e.g. Redirect to Sales
  4. Create the conditional logic (see below).
  5. Click Save at the bottom of the sidebar.

An example of how to set up the above pseudo logic is shown below:

Create a Form Redirect Selector - Conditional Logic

Create conditions for each of your redirects. And that’s it!

WS Form will now enable the appropriate Redirect action depending on which radio has been checked. Click Preview to try it or click Publish and add the form to your web site.