Using and Managing Conditional Logic

How to Create Conditional Logic

Conditional Logic allows a form creator to build a dynamic form that is customized to a particular respondent and their responses.

Step 1. Choosing the Form Element

Conditional Logic can be created by using one of these three form elements: “Dropdown Select”, “Single Choice”, “Multiple Choice”, and “Checkbox”. Just drag and drop the element into a row:

Step 2: Creating the “If” question.

Conditional Logic uses “if-then” logic to dynamically reveal fields in a form. As an example, using the “Single Choice” element, we’ve created the question “Are you allergic to any kind of food?”. This question has two potential answers: “Yes” or “No”.

Step 3. Adding a New Row and Choosing the “Then” Element 

Conditional Logic applies at the “Row” level. Therefore, you must click “+ Add Row” before choosing a conditional “Then” element.

Choose an appropriate element that should be filled-in or actioned, depending on the response to the “If” question from Step 2. In this example, we’ve chosen the “Input Field” element. Drag and drop this element as shown in the screenshot.

In this example, we used “Input Field” because we would like to know what kind of food the respondent is allergic to. Depending on the use case, any other appropriate element could be used.

Step 4. Customizing the “Then” Element

When you drop the element, its settings window will open. In this window, you can adjust the “Label” to pose the “Then” question. In this example, the new “Label” becomes: If yes, please specify.

Step 5. Opening the Conditional Logic Window

Just above the border of the “Then” or “Input Field” element row, click on the “Conditional Logic” icon.

Step 6: Creating Conditional Logic and Linking Elements

Upon clicking on the “Conditional Logic” icon, the settings window opens to create the conditional logic. The following four fields must be completed to ensure the proper display and linkage of the elements. 

• Actions – what action do we want to result from a given answer to the “If” question. In a dynamic form, we have two options, either “display” a field or “hide” a field.  

      For the form in the example, the default setting for the “Then” question is that it is hidden. Therefore, we only want to “Display” the “Then” question, if the answer to the “if” question is “Yes”. To do so, choose “Display” in the settings.

• Condition Component – Choose the “If” question or element that triggers the conditional logic.

      For the form in this example, we only have one element or field, “Are you allergic to any kind of food?”.

• Condition – Choose “equal” or “not equal” (in case of the “Dropdown Select”, “Single Choice”, and “Checkbox” conditional components) or “equal” or “contains” (in case of the “Multiple Choice” conditional component) to the “If” question to initiate the “Display” or “Hide” “Action”. 

      For the form in this example, we’ve chosen “Equal”, since we want to “Display” the “Then” question if the answer to the “If” question is “Yes”.

• Component State – Choose the desired answer to the “If” question that we’ve linked to above in order to complete the Conditional Logic process.

       For the form in this example, we want the Conditional Logic process to display an additional field when a respondent answers “Yes” to the “If” question.

If the answer to the “If” question is “No”, the “Then” question will remain hidden.

Once these fields have been completed, select “Save Changes”.

Upon Clicking “Save Changes”, you are returned to the Form Builder and the Conditional Logic has been created. The screenshot below shows how an element that is subject to Conditional Logic “Display” appears in the Form Builder.

Editing Conditional Logic Fields

Step 1. Open the Form Builder and go to the Conditional Logic Element you would like to edit.

Step 2: Click on the Conditional Logic icon:

Step 3: Change “Actions” field to “Hide”.

After choosing “Hide” instead of “Display”, click on “Save Changes” and you will be returned to the form builder.

The “Conditional Logic” element is now visible and ready for editing.

Previewing and Testing Conditional Logic

Step 1: Previewing in the Form Builder

Click on “Preview” in the Form Builder to see what the form will look like for a respondent: 

Step 2: Only a single question is visible.

In the preview, the respondent initially sees only one question.

Step 3: Conditional Logic triggers display of an additional field

You can see how the response to the first question of “yes” (1) leads to the displaying of the additional field “If yes, please specify” (2).

Finished! Press “Save”, then “Publish” to share or embed the form.