Form Builder Part 2: How to add conditional logic and repeatable sections

In this video we’re going to learn how to add conditional logic to show and hide certain fields on a form based on the answers a user provides. We’ll also learn how to create a repeatable section so that users can duplicate a section as many times as needed.

Let’s take a look at what the finished form is going to look like.

As part of the initial incident report, we’d like to know if anyone was injured in this incident. If the user answers Yes then we’d like to display a subsection that asks the user to provide some details. And if there was more than one person injured, we’d like the user to be able to add another injury details section so that they can provide information about that second person.

Let’s start by editing the incident report form we built in part 1.

To add in the question if anyone was injured, we’re going to use one of the more advanced widgets called an Inspection Question. We’d like this question to show up directly underneath the Description of Incident text field. So we select it, then click add form element and go to Widgets.Here we’ll click on the Inspection Question widget. A new element is now inserted under the Description of Incident field.

Highlight the new element and type the question into the field label. Then choose what type of response options you’d like the user to have. In this case, we’re going to go with a Yes No response. You’ll notice that you can also create your own response options by changing the button labels and setting the colors for each button.Next we’ll add some instructions to the user that tells them what to do if more than one person was injured. We’ll add a header and in the header text, we’ll add in some instructions. Next we’ll add a subsection and change the title. Then we’ll add a short text field for the name of the injured person, change the label, and make it a required field. We’ll also add a phone number field, a long text field for the description of injuries, and Lastly, a field for the user to attach photos of the injury. We’ll change the column width of these last two fields to four so that they span across the full width of the form. We also want to make this section repeatable. To do so,set it’s Maximum number of groups to twenty, that way the user can add up to twenty people on this form. Lastly, we want to make the header and subsection only display if the question is answered as Yes.

Start by selecting the header and at the bottom of its properties click plus to add a condition.In the Condition Parameter select the Inspection Question Field that reads “Was anyone injured. Set the Comparison operator to Equal, value of Yes, And set the action to Visible. Now this element is hidden until someone answers Yes to the question. Repeat these steps for the Injured Person Subsection by clicking on it, adding a condition, selecting the field the condition is based on. Set the operator to Equal, the Value to Yes, and the Action to Visible. This form is now ready to be saved and published.

Let’s give it a try.

If we are filling the form out and select yes, you’ll see the subsequent questions automatically appear. If we need to add an injured person, we simply click the plus button.

That’s it for now. Be sure to tune into the third video in this series where we learn how to add multiple workflow steps to this form.