How do I break apart large forms into sections

I have a pretty large form, roughly 50 inputs. I want to break those up into different groups.

For example, Details, Names, Places etc…

All of this information will be saved to and posted on the “project” page.

How do I split it up so that there are only 10 inputs in a section and that a person could switch between sections if they want to?

I have the first section done and working.

Use different groups, and show them based on states.

So I’d use a common state for navigation. You change the state value when the User is progressing/going back through the form… so different groups would show.

Hope that makes sense!

Tal
Learn Bubble @ Nocodify

How do you hide the current group, so you can build the other groups?

In your elements tree, you can click the “eye” icon to hide it.

1 Like

just know that if you do this, any hidden inputs that are marked as required will not be validated

Just a few friendly idea/s suggestion/s.

Have you thought about splitting your form up into segments via a multi-step wizard which can be controlled via conditional logic and custom states? If I saw a 50 input form form hit me I’d probably abandon ship within secs so breaking it down eases form flow.

Also and as an added note, ensure that your data-type does not carry all 50 options as this could really impact your apps performance on save and data retrieval.

1 Like

For what i am doing, the 50 you would be ok with :slight_smile:

I will look into what you mentioned, it is all pretty over my head at the moment. haha

Oh sorry mate, you’ll soon get the gist of things. Best of luck.

I’m running into this issue right now. Do you know if there’s a way around this? I have a form set up with inputs on a few different hidden groups that are shown when the user clicks the next button. I want to validate that the user has selected an input option before moving on to the next group, but so far I haven’t found any solutions.

I’m thinking I could set a state for each group as well as create a button for each group that becomes ‘clickable’ when the groups custom state is a certain value, but that just seems really messy.

Hey there :wave:

I was just thinking about it this morning and I think you could get it to work. When clicking the next button you can ‘make changes to the thing’ you have saved in a set state (or passed along each group/page). Since you are saving these inputs into your thing each time, if you have the input as ‘required’, it will not allow you to press the next button and it will highlight your inputs that are marked as ‘required’.

Does that make sense? Let me know if I am not understanding your issue correctly.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Help me understand how to switch between “create new thing” and “make changes to thing”

Right now Everytime I want to make up update it “creates a new thing”

Sure. :blush: after the first button you press will be the ‘create a new thing’.

Every step after that, you would just ‘make changes to a thing’ which would be the first thing you created in the first step. Here is how to access that thing you created already:

To access it throughout your page, you can ‘set a state’ right after the first step when you ‘created a new thing’. Just do the ‘set state’ on the page itself. Make sure the type of the set state is the same type as the thing you just created. Then you will have access to it no matter where you are on the page.

Does that make sense?

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

i ended up with a condition on the submit button that said only when field A is isnt empty and field B isnt empty, and field C isnt empty etc.

Thanks @J805 and @alexd.ramirez for your responses. I ended up doing something similar to what Alex suggested.

In my workflows, I hide my next button when the page loads and only show the start button. Since my first question has multiple checkbox inputs, I created a condition on the next button which says “when checkbox a is checked, show the next button” and I added multiple OR statements to include all of the checkboxes in that condition.

Ex: when checkbox a is checked or when checkbox b is checked…

Then I added another workflow, this time to my next button, that included an action to hide that button whenever it is pressed. That way, when the user advances to the next question, they would have to select an option first before moving on. In my case, I had several more “pages” of radio button options. For each button I added a workflow with an action that shows the next button when it is pressed. Not a great method if you have 50 inputs like @timlcooley but it works for me.

Here are some resources for best practices when designing long forms.

https://blog.prototypr.io/seven-best-ux-practices-for-designing-long-online-forms-6a670e488bad

https://uxmovement.com/category/forms/

2 Likes