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.