In this tutorial, we will be learning how to hide or show multiple form fields based on a single conditional logic – using Section Collapse field/element. Before to proceed, we must get acquainted with Section Collapse field first.
What is a Section Collapse you ask?
Well, according to this JotForm article about form fields:
Section Collapse hides/shows a section of your form, and splits your form into expandable parts
In this case, we will be using the Section Collapse to split the form into sections, and we’ll be using conditional logic to hide or show them according to end-user action.
1. Insert a section collapse at the beginning of each groupings you want to separate.
This will mark the start of the section that you want to conditionally hide/show. Insert as many fields as you want on this section. In this sample form, I will group fields related to each section of a guest, I will have “Guest 1”, “Guest 2” and “Guest 3”, all having their own full name and email fields.
Section Collapse Properties
There are two important settings here, the “Section Visibility” and the “Button Visibility“.
Section Visibility => This allows you to set the collapse field to open or close on default. Open meaning the section or the contents of it is visible. Close meaning the contents are hidden.
Button Visibility => This allows you to show or hide the actual collapse bar or button. Set it to hidden if you don’t want the bar/button to be displayed, set it to visible if you want your users to see it. Note that if the button is visible, then your users can open and close the section visibility in the live form.
An arrow pointing downwards in the section collapse means this section is set to “Open” or “VISIBLE” by default.
In my case, I don’t want to display the section collapse button so I set the button visibility to hidden and then set the section visibility to visible. This is to make my setup cleaner as I will use conditional logic later.
2. End your section using yet another Section Collapse field.
A Section Collapse encompasses all succeeding fields, except another Section Collapse. Unless your form section is followed by another one (i.e., multiple consecutive sections), you will need to place a stopper to end this section.
We can accomplish this by adding another Section Collapse that is configured as [Section: Visible] and [Button: Hidden].
3. Add a condition to hide or show a section.
Now that your sections are defined, you can start adding rules to the Conditions builder.
You may then formulate your conditions to hide or show the corresponding section collapses. Check out the sample forms below and feel free to clone them to your account to learn how exactly this solution was implemented.
Here’s a simple form that shows each section for a guest depending on the number of guests entered: https://form.jotform.com/53531501583955. Below are the steps on how the conditions are setup for the section collapse field.
a. First, I setup the rules or the “IF” statement to when the action will be triggered.
b. I will choose “Show Multiple” in this case to display the section collapse field for “Guest 1”, “Guest 2” and “Guest 3”, depending on the number of guests added.
Important note: It is best to use the same “DO” statements on a form field that is related to multiple conditions. In my case, I will use “Show Multiple” on all section collapse fields. To select more than one field to show, press CTRL+Mouse click (Left click for Windows) or Command key+Mouse Click (Mac).
c. Repeat the same process on how to add the condition for “Guest 2” and “Guest 3”.
d. This is how the list of my conditions looked like for all the “Guest” sections that uses the section collapse field:
e. Save the changes and test your form. You now have a form with groups divided in section and will only display based on a certain input.
Here’s another simple form that hides the Previous Employment Details section when the user chooses “Yes” in the question “Previously Employed”: http://form.jotformpro.com/form/23089335801958
As always, feel free to ask for assistance via the JotForm Support Forum if you encounter difficulties while implementing this solution.