Browse Article by Topicsmultiple fields form collapse hide show show/hide condition
- Smart Forms Using Conditional Logic
- Adding a license agreement to a form
- Creating a scrollable Terms & Conditions
- How to Send Email Based on User's Answer
- How to Create a Basic Multiple Payment form
- Hide or Show Multiple Fields at Once
- How to Remove Field Labels in a Form
- How to Post Answers to Thank you Page
- How New "Conditions For" and "Order by" boxes work in conditional logics
- How to Manage Multiple Fields
Related Forum Questions
- Form Not showing up on phone
- How to create conditions around a promo code field?
- Forum: Search results are not accurate when sorted by date
- Email Notification: Empty Fields display in email
- Page skip not working properly with the conditions on my form
- Paypal Form: How to hide options until checked
- My form is not showing up on mobile.
- Duplicate conditional email causing multiple submission email sent
- Form Builder V4: Ability to reorder options of a Radio Button and Check Box field
- Why isn't my test registration showing up on google docs?
Show or Hide multiple fields at once using form collapse toolLast Update: December 20, 2015
In this tutorial, we will be learning how to hide or show multiple form fields based on a single conditional logic - using form collapse bars. Before to proceed, we must get acquainted with Form Collapse bars first.
What is a form collapse you ask?
What is a form collapse you ask?
Well, according to this JotForm article about form fields:
Form Collapse hides/shows a section of your form, and splits your form into expandable parts
In this case, we will be using the Form 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 form collapse at the beginning of each section
This will mark the start of the form 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.
Form Collapse Configuration
Form Collapse Status will either (by default) collapse or expand the bar that contains the form fields. Visibility applies only to the Form Collapse bar, and not to the fields under it.
Faded form collapse text means Visibility is set to "Hidden"
An Arrow pointing downwards in the form collapse means this section is set to "Open" by default.
Important note: You can set Form Collapse Status and Visibility to any combination, EXCEPT [Status: Closed] and [Visibility: Hidden]. Such configuration would just not make sense ;)
2. End your section using yet another Form Collapse
A Form Collapse encompasses all succeeding fields, except another Form 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 Form Collapse that is configured as [Status: Open] and [Visibility:Hidden]
3. Add a condition to hide or show a section
Now that your form sections are defined, you can start adding rules to the Conditions builder.
a. Simply click the "Conditions" button
b. Select "SHOW / HIDE FIELD" .
You may then formulate your conditions to hide or show the corresponding (form collapse) section. 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 for that shows each section for a guest depending on the number of guest entered: https://form.jotform.com/53531501583955
c. First, I setup the rules or the "IF" statement to when the action will be triggered.
d. I will choose "Show Multiple" in this case to display the form collapse tool for "Guest 1", "Guest 2" and "Guest 3".
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 form collapse tools. To select more than one field to show, press CTRL+Mouse click (Left click for Windows)
Repeat the same process on how to add the condition for "Guest 2" and "Guest 3".
This is how the list of my conditions looked like for all the "Guest" sections that uses the form collapse tool:
This simple form hides the Previous Employment Details section when the user chooses "Yes" in the question "Previously Employed"?
As always, feel free to ask for assistance via the JotForm Support Forum if you encounter difficulties while implementing this solution.