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
- Single Choice element shows as selected
- How do we hide the field at the bottom of our form?
- I'm trying to have people answer one question at a time and it looks like I'm messing up the conditioning function.
- Header is not showing up
- Progress bar widget question
- Form is aligned to the left, how can I center it?
- How can I duplicate multiple fields?
- Show headers and text not working?
- Im having like the same problem please help
- A lot of existing conditions on the form have disappeared
Show or Hide Multiple Fields at Once Using the Form Collapse ToolLast Update: March 19, 2017
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.
In V4, it's now called Section Collapse, it's under the PAGE ELEMENTS section.
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.