Conditional Formatting

Summary Conditional formatting makes a form element appear only when an earlier answer calls for it. In the element's Conditional Logic tab, you switch the logic on, then add a condition: the element it depends on, a condition such as Equals or Contains, and a value. Two examples follow: a further-questions box that appears only when someone answers Yes, and a Please Specify box that appears only when Other is chosen.

Steps

Introduction. You can conditionally format the elements of a form: when a user fills out the form and the specified conditions are met, the conditionally formatted element is displayed.

Why use it. With conditional formatting you can design decision trees, from straightforward to intricately detailed, guiding users through an intuitive data collection path that adapts dynamically to their input. It lets you create elegant and sophisticated data collection forms that accommodate a wide range of variables and requirements. As a result, the quality of the data collected is substantially better than with traditional forms, which can't adjust their questions based on previous answers.

Setting a condition

Step 1

In SD Form Builder, find the element you want to create conditions for on the Canvas. Click its edit button: the green pencil, second of the four small buttons at the top right of the element. The Edit form field box opens.

Step 2

Click the Conditional Logic tab, the fifth tab along the top of the box.

Step 3

Switch on Conditionally show or hide field, the toggle at the top of the tab, so it reads YES. The Conditionally show / hide fields section opens below it.

Step 4

The first box in the section, Hide / Show, is already set to show. This means the element you are conditionally formatting will display when the specified conditions are met.

Step 5

To add a condition, click the + at the left end of the table's header row, next to Reference Link. A new condition row appears. If you add more than one condition, the Join below conditions with box above the table decides how they combine: OR shows the element if any of the conditions are met, and AND only if all of them are.

Step 6

Click the Reference Link dropdown on the new row, and select the element you want this one to be conditionally formatted against. The list shows each element of the form with its type. For a text box that should appear when someone answers Yes to the question "Do you have any further questions?", choose that question's Yes/No buttons.

Step 7

Click the Condition dropdown, to the right, and select a condition from the options, such as Has any value, Equals, Contains, Does not contain, Is greater than or Is less than. For the Yes/No question, choose Equals.

Step 8

In Value, type or select a value. If predefined values are available, they appear in a dropdown: for the Yes/No question, select Yes. Then click the green Save & Close button at the bottom right of the box.

Step 9

Back on the canvas, a yellow eye icon now shows at the top of the element, just left of its four buttons. It means the element is conditionally formatted and will only display when the specified conditions are met.

Testing it in the preview

Step 10

To test it, click Preview, the green button at the top left of the form builder. The Preview (Emulated Size) box opens.

Step 11

Select No: nothing appears, because the conditions have not been met.

Step 12

Now select Yes.

Step 13

The Further Questions text box appears, because the conditions have been met. Conditional formatting keeps your forms tidy and ensures only relevant information is shown to the user. It also reduces form clutter, improves the user experience, guides users through a more personalised workflow, minimises errors by only presenting applicable fields, and makes forms faster and easier to complete.

Second example: a Please Specify box

Step 14

A dropdown asks "How did you hear about us?" with a list of predefined options. If none of them apply, the user can choose Other, and conditional formatting can then display a Please Specify text box for their own answer. On the canvas, click the edit button on the Please Specify text box.

Step 15

Fill out the Conditional Logic settings the same way as in the first example: choose the dropdown element as the Reference Link, select the condition Equals, set the value to Other, then click Save & Close.

Step 16

Click Preview again.

Step 17

In the dropdown, select Other.

Step 18

The Please Specify box appears.