How to Show/Hide Multiple Sections Using Conditional Logic

Written by Formstack on May 13, 2011

Posted in Form Hacks

A common support question I get is how to add extra fields or sections to a form based on conditional logic.  This is useful if you need information about each person registering on an event registration form, for example, but you don’t want to display all those fields on the form unless they are needed.

In the simple form below, you can choose to register 1 to 5 people for an event and 5 registrant sections are displayed by default.  We don’t want to display all 5 sections though, only the number needed for the the number of registrants the user selects.  This is where conditional logic comes into play.

registration1

registration2

Conditional logic needs to be based on a multiple choice or number field, so we’re good there, since we have a select list field for choosing the number of registrants.

The next step is to edit the Registrant 1 section and click on “Use conditional logic”.

registration3

We want the Registrant 1 section to show up if they pick any number from 1 to 5, so we add 5 logic statements to the section.  Show this section if ANY of the following match:  Number of people you’re registering is 1, 2, 3, 4, 5.  It’s important to choose ANY instead of ALL here.

We don’t have to put any logic on the Name field inside of the Registrant 1 section, because any logic applied to a section is applied to all fields inside that section as well.

registration4

So now we’ll edit the Registrant 2 section and say Show this section if ANY of the following match:  Number of people you’re registering is 2, 3, 4, 5.  Notice we left out 1, because we don’t want to show this section if the user chooses 1.

registration5

For section 3, Show this section if ANY of the following match:  Number of people you’re registering is 3, 4, 5.

registration6

For section 4, Show this section if ANY of the following match:  Number of people you’re registering is 4, 5.

registrant7

For section 5, Show this section if ANY of the following match:  Number of people you’re registering is 5.  Because we only want this field to show if the user chooses 5, not if they choose 1, 2, 3, or 4.

registration8

The resulting form displays the correct number of sections based on what the user selects.  I have embedded the form below so you can try it out for yourself: