Extended WC Asia Special Offer 30% OFF! Use coupon WC30

Create a Form Recipient SelectorPRO

In this tutorial we’ll show you how to allow a user to select a recipient by enabling and disabling Send Email actions using conditional logic.

1. Create Form

For the purpose of this tutorial, we’ll create multiple recipients for a Contact Us 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 the recipient. 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.

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 send email actions, one for each recipient.  The advantage of using this method is you can set up different email for each recipient if you wish, for example you could change the subject line and/or content of each email.

4. Set Up Email Actions

To access the email 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 already have a Send Email action. Let’s rename that to say Send Email to Sales, and then add a new Send Email action that we’ll call Send Email to Support.  You would create as many Send Email actions as you have recipients and name them appropriately. To do this:

  1. Click just after the word Email in the actions list and type to Sales to rename the first action.
  2. Click the add icon below the action list to add a new action.
  3. Select Send Email from the Action pulldown list.
  4. Click just after the word Email in the actions list again, and type to Support to rename the section.

Create a Form Recipient Selector - Actions

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

For each email action, configure the recipient email address and any other settings required for that email. For more information about configuring the Send Email action, click here.

Create a Form Recipient Selector - Send Email To

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 Send Email to Sales if the Sales radio is checked. Likewise if the Support radio is checked instead, we will want the Send Email 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 Send Email to Sales ELSE DO NOT RUN ACTION ON SUBMIT Send Email 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. Send Email 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 Recipient Selector - Conditional Logic

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

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