Show/Hide Multiple Form Fields Based on User Responses in DropForm

DropForm's section collapse feature lets users easily show or hide form fields based on user responses.

### Using Section Collapse for Conditional Fields in Jotform
* 📅 This tutorial demonstrates how to use Jotform's **section collapse** feature to show/hide fields based on user responses, using an RSVP scenario as an example.
* 🧑‍💼 The process begins by creating a form with basic fields like name, email, and a dropdown for the number of guests (0-3).
* 🗂️ Multiple sections are created for guest details (name and email), each enclosed within a **section collapse** element, initially set to hidden.
* ⚙️ A crucial additional section with a submit button is added and set to be visible, ensuring a submit option even without guests.
* ➕ Conditional logic is implemented using Jotform's **show/hide field** conditions.  If the number of guests is 1, Guest 1's fields are shown; if 2, Guests 1 & 2's fields are shown; and if 3, all three guests' fields are shown.
* ✅ The tutorial concludes by testing the form, showcasing how different guest counts dynamically reveal the appropriate fields.  "Super simply!"
* 💡 This method effectively manages multiple conditional fields, ensuring a clean and user-friendly form experience.
* 🙋‍♀️  The video encourages viewers to ask questions if they need further assistance.

Have you been wanting to show or hide multiple fields based on how someone answers one of your questions? Let me

show you how with section collapse. [Music] Hey everyone, welcome to DropForm! I'm Kimberly, and for this example, we're

going to walk through kind of like an RSVP-type situation. So we want to know how many people the person that we're

sending this form to is going to bring. So first, we want to do is we want to create the form. So I'm going to go up

here to the top left, the 'Create Form' button, and from here I'm going to go ahead and start from scratch and use the classic

form. Now, first and foremost, I want to know what their name and email is, so I'm going to go ahead and come up to the 'Add'

form elements' and I'm going to choose their full name and their email. And then let's go ahead and do a drop

down, and this is going to be the number of guests. Let's edit the options. We want to give them an option to bring no

one, so zero, and then one, two, and let's say three is going to be the max. Okay, so now that

we've given them the option to invite up to three people, that means we're going to need at least three sections with

names and emails. So I'm going to go ahead and go back up to the top and I'm

going to add a full name and an email, and then we're going to make this one section. So I'm going to go

down to the bottom where it says 'Section Collapse,' and I'm going to go ahead and drag this right

where I want it, in between the number of guests and this first guest's name. Now we can go ahead and edit this and

name this 'Guest One,' just so it's easier to identify whenever we get to the show/hide fields. I'm gonna go ahead and change this to

Guest one, perfect. So let's take a look at this section collapse. I'm going to go ahead and click

on the properties for this, and we can see we can edit the section heading right here as well. But then we

have section visibility and button visibility. So the section visibility is either hidden or visible. So, do we want this entire section

not shown on the form? So let's go ahead and let's say it's visible, and the button visibility is visible. So let's

just look at the form and see what that looks like. So we can see here that it's visible; we have the dropdown,

that we can collapse it and we can bring it bigger. But for us, we do not want it visible at all. So I'm

going to go ahead and choose hidden, and the button visibility is hidden as well. Now, this is what we're going to want for

every single guest. So I'm going to go ahead and just click the duplicate field; we'll drag it down, and we'll just change

this one to Guest number two. Then we can come back over to the basic elements; we can add a full name and an

email, and we can make this Guest number two. We can come back up here, duplicate for the last one,

Guest number three, perfect. And let's add their name and email. Now, one thing that we do have to take

into consideration is what happens if they say, "You know what? I don't want to invite anyone." So let's look at the form

right now. How we have it set up is it's completely hidden; all of these fields are underneath the section collapse, so we

have an issue: we don't have a submit button because it's included under Guest number three. So what we need to do here

is we need to add another section collapse, and for this one we don't need a button. So I'm going to go ahead and

choose that as hidden, but we do want that section visible, so I'm going to go ahead and choose visible. So this will

allow them to answer the top section, and if they don't have any guests, they can go ahead and click the submit button.

Okay, now let's get into the fun part of the conditional formatting of showing and hiding different pieces of this form.

So up at the top, under settings, I'm going to go ahead and choose conditions. Now, from here we're going to do the show

hide field. This first one, so we're going to be working with the number of guests. Now, if they choose zero, there is nothing

more that we have to do; they're just going to submit, like I mentioned. So we need to show/hide fields if it's over

zero. So we're looking at the number of guests. So if the number of guests is equal to

let's say one, what do we want it to do? We want it to show the multiple fields we need for it to

show Guest 1's name and email. Perfect. So let's do one more condition: show/hide field if the number of guests is equal to

two. We need for it to show multiple fields again, and we're going to show Guest 1's name and email and Guest 2's

name and email. Save. Perfect. One more condition: show/hide field if the number of guests equals three. We're going to show multiple fields again,

and we're going to show all the guests, Guest 1 down to 3. And save. Perfect. Okay, so let's go ahead

and let's preview this form and let's give it a test. All right, so if it's just

me, I'm going to fill this out: my name, my email, and let's say I don't have any

guests. Perfect. Submit. But let's say I do want to invite one guest. Let's go ahead and see what happens when I choose one.

Want to invite one guest? We see the guest's name is now available and the email. Let's say we want to add two.

Now we have guest one and guest two. And let's say we're going to add three guests; we have guest one, guest two, and

guest three. And then we can submit. Super simply! If you have any questions about how to utilize the show/hide fields with

the section collapse, please let us know. And I'll see you next time.

How to Use Section Collapse Field in Jotform

Jotform

Explains the purpose of section collapse for showing/hiding fields based on user input.

Describes the goal of determining the number of guests.

Starts creating the form by adding name and email fields.

Adds a dropdown for the number of guests (0-3).

Adding and Configuring Section Collapse Fields

Explains the need for multiple sections for guest names and emails.

Adds sections for guest details using 'Section Collapse'.

Positions the section collapse fields and names them 'Guest One', 'Guest Two', etc.

Shows how to initially hide the guest sections using section and button visibility settings.

Duplicates the section collapse fields for additional guests.

Addressing the Submit Button Issue and Adding a Final Section

Highlights the problem of the submit button being hidden if no guests are added.

Adds another section collapse for the submit button, keeping the section visible but the button hidden.

Explains how this setup allows submission even without guests.

Begins explaining the conditional logic for showing/hiding fields based on the number of guests.

Sets conditions to show guest fields based on the selected number of guests (1, 2, or 3).

No action is needed if the number of guests is zero.

Details the conditions for showing Guest 1, Guest 1 & 2, and Guest 1, 2 & 3.

Previews the form and demonstrates the functionality with different guest numbers.

Shows the form's behavior when selecting 1, 2, or 3 guests.

Offers to answer further questions about show/hide fields and section collapse.