How to

In this tutorial, we'll be learning how to hide or show multiple form fields based on a single conditional logic - using form collapse bars.

Before proceeding, we must get acquainted with Form Collapse bars first. What is a form collapse? Well, according to this article about JotForm fields [],
[quote] a Form Collapse hides/shows a section of your form, and splits your form into expandable parts.[/quote]

In this article guide, we will be using the Form Collapse to split the form into parts, but not expandable ones, and we'll be using conditional logic to hide or show those parts.

1.  Insert a form collapse at the beginning of each section

This will mark the start of the form section that you want to hide. Insert as many fields as you want on this section.

Form Collapse Configuration

Form Collapse Status will either collapse or expand the bar that contains the form fields. Visibility applies only to the Form Collapse bar, and not the fields under it.

You can set Form Collapse Status and Visibility to any combination, except [Status: Closed] and [Visibility: Hidden]. That just wouldn't make sense ;)

2.  End your section using another Form Collapse

A Form Collapse incorporate all fields under it, except another Form Collapse. Unless your form section isn't followed by another one (i.e., consecutive form collapse sections), you will need to place a stopper to end the section.

We can accomplished this by adding another Form Collapse that is set 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.

Select the Setup & Embed tab > Click Conditions > Select Show / Hide a form field then click Next

You may then formulate your conditions to hide or show the corresponding (form collapse) section.

In this example,

Send Comment

Browse Article by Topics