Hide and Display Groups of Form Fields with this Simple Technique


Driving yourself nuts trying to work with large numbers of fields + Conditional Logic?

Making individual fields hide or display based on a user’s input is pretty darn easy. If you’re trying to hide and display groups of form fields though, things appear to get trickier.

Maybe you’ve tried writing out conditional statements for every field in the group that you want to display? That’s a major time sink.

Broken your form into a multi-part form and relying on users to skip past the sections that aren’t relevant? That’s asking for users to abandon your form.

Tried redirecting users to different follow-up forms based on their answers in the first form? Definitely not the best user experience either.

You’ve got to be wondering if there’s not a better way. So is there?

Yes, there’s a faster, easier way!

You can pull this off with a lot less time and effort than applying conditional statements to each field. If your form is long enough that you’re considering breaking it into sections anyway, Multi-Part Forms may already be on your radar. By breaking your field groups out into Multi-Part sections and applying Conditional Logic to the sections, once tedious conditional operations become far less tedious to set up.

All you need is…

We’ll be breaking field groupings into sections using Multi-Part Forms, then applying Conditional Logic to those sections rather than individual fields. The results are the same: a user indicates what they need, and sections seamlessly appear to meet those needs. Done right, the user doesn’t even realize the form wasn’t tailored specifically to them in the first place!

How to Hide and Display Groups of Forms Fields

We’ll use a simple example to illustrate how to pull this off, and you can replicate it easily with your specific use case. Let’s say you’re hosting a dinner event where each invitee may bring additional guests, up to a maximum of 3.

You’re going to want to allow the invitee to register, get their order, and then take an order for each of their guests. Pretty straightforward, but if you’re laying this all out on one page and not hiding fields, that’s a seriously long and unpleasant form to have to scroll through. If you plan on hiding each unneeded field conditionally, it’s a major time sink on your end.

Here’s the solution!

Step 1: Break your form into sections using Multi-Part Forms

We have 4 key things that need to happen in this form:

  1. collect info on the invitee including number of guests
  2. collect the invitee’s food order
  3. collect the guests’ food order
  4. allow the invitee to register

We’ll break each of these 4 things out into its own section, or part. There will be a variable number of guests: 0-3. We just want to display order info for the number of guests that the invitee has indicted they’re bringing. To accomplish that we’ll have each guest food order on its own part and hide or display groups of form fields based on the number of guests the invitee has indicated they’re bringing.

Here’s what the form will look like broken into parts:

Now that we have our field groupings/sections in place, we need to apply Conditional Logic.

Step 2: Use Conditional Logic to show the user only the form parts that they need to see

We want the Registration, My Food Order, and Register sections to be present for each user, no matter what. The 3 Guest Food Order sections are variable though, depending on the “How many guests will you be bringing?” question found on the first page of the form.

If an invitee is only bringing one guest, we don’t want to show order part options for two or three!

We’ll need 4 total conditional statements based on the value of the “How many guests will you be bringing?” field: None, One, Two, or Three.

Conditional Logic can be applied to entire parts of a multi-part, so we’ll display or hide each guest part of the multi-part based on that value.

Here’s an example conditional that will hide Guest 2 Food Order and Guest 3 Food Order parts if the invitee selects one guest:

Your form will now hide and display groups of form fields (parts) based on user input!

Following the steps above just reduced the number of conditional statements you had to write from 60 to 12!

Without the ability to hide and display groups of form fields, you would have had to apply 4 separate conditional statements to 15 different fields. With Multi Part Forms, we’re applying 4 separate conditional statements to just 3 sections. 60 statements vs 12… seeing the benefit yet? 🙂

That’s a ton of time out of your day that you now have back to go on and do more productive things.

How can we make this better for you? Please let us know in the comments below! Feel free to fire away with any questions as well!