Conditional Logic

Conditional Logic allows you to build dynamic forms that show or hide entire rows - and all the fields within those rows - based on user responses to other fields in the form.

Note:

If all rows on a form screen are hidden as a result of Conditional Logic, that screen will be skipped for the user.

Creating Conditional Logic

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.

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”.

Creating 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.

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.

Opening the Conditional Logic Window

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

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.

Please Note:

To avoid cyclical errors, nested Conditional logic is not available in the form builder. If you need nested Conditional logic, please send your JSON file, form and request to support@hipaatizer.com.

Editing Conditional Logic Fields

Open the Form Builder and go to the Conditional Logic Element you would like to edit. Click on the Conditional Logic icon, then change the “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

Click on “Preview” in the Form Builder to see what the form will look like for a respondent. In the preview, the respondent initially sees only one question. 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).