Submitted by Jonah Munro-Fenn on Wed, 2015-12-02 11:17

Conditional expressions provide the form builder with the ability to display particular form elements based on a previous selection by the end user.

There are many, many different possible combinations of components and actions that can be utilized.  Following, we'll give a very simple example of how a conditional can be applied to your webform.  The exercise will illustrate how to autofill a text field based upon an option that the end user selects.

To begin, you'll need to create a webform by going to Admin menu > Content > Add content > Webform.  Add a few fields, including a simple Textfield, and a Select options field with at least two options.

After adding your components, click on the Conditionals tab to get to the control panel.

To add the first conditional, click on the plus sign next to the Add a new condition text.

A group of form controls will appear.  The first selection you need to make in this group is the component that you want to base your condition on.  Since there are no labels on this interface, we'll call this first field the Active Component. In this example, the active component we're selecting is the What's Your Favorite Color? component.

The field directly to the right of the Case is the Operator field.  This field applies a method of comparison such as is, is not, empty, not empty, etc.  For our purposes in this example, the default operator, is, works for us, so we'll leave it alone.

The field to the right of the Operator is the Antecedent. Since the What's Your Favorite Color? case that we selected is a Select Option component type, the system will automatically provide the antecedent via a field that contains the options that we configured within the What's Your Favorite Color? component.  In this example, the different options that were configured in the component are Red, Yellow, Blue.  We selected Red as our first condition.

So, at this point, in human language, what this is saying is: "If, in the What's Your Favorite Color drop down, your end user selects the Red option..."

Now we need to tell the system what should happen if the end user selects the Red option.  This is known as a Then statement.

The first field in the Then statement is the component that will be affected by the condition, so we'll call this the Reactive Component.

In our webform, we added a Textfield component called Result, which is a simple, blank text field.  We want this to be our reactive component, so we select it.

The field next to the reactive component, in this case, is a simple switch that contains an is and an is not.  We'll use the default is value.

The field next to the switch field determines what action is taken on the value that will be assigned to the reactive component given a particular condition, so we'll call it the Action.  We selected set to in this field, as we want to set the value of the Result component based on what was chosen in the What is Your Favorite Color? component.

Once the set to value is chosen, a blank field will be provided by the system.  Type what you want to set the value to in this field.  In our example, we're setting the value to I like apples.

This simple condition will do the following:

On the webform, when your end user lands on the What's Your Favorite Color? field and selects the Red option, the words "I like apples" will automatically appear in the Result field.

All in all we added three conditions:

  • Red Option = I like apples
  • Yellow Option = I like bananas
  • Blue Option = I like blueberries

The final conditions list ends up looking like this:

Now, let's see how that translates to the webform itself.

And now, we select the Red option:

Keep in mind that conditions can get extremely complex.  The best way to learn about them is to actually get in and experiment with all of the different things you can use and affect.