I have a form with more than 20 fields to fill and this is in a popup dialog. What is the best way to handle this?
2
-
Do you really need that many fields? The first step to Good Design - is to reduce the number of elements; Keep only those that are really required ! – spetzz Nov 21 '14 at 13:07
3
Seeing you are already using categories, and what I understand is you don't want to have scrolling inside your popup?
If your user does not need to see all the information filled into your form, depending on the process I see two options where the form fields are divided into smaller blocks (for example your categories?), tabs or wizard style process.
Many Windows applications use tabs to group settings into smaller blocks.
Example of form split into tabs: http://dhtmlx.com/docs/products/dhtmlxForm/samples/05_integration/05_split.html
2
What platform would this be in? For mobile devices? For desktops?
If it is just for desktops, a box with a scroll-able region should suffice. Or if there are so many fields, then it probably deserves its own page.
For mobile devices, I think it would be preferable to group the fields into logical categories and separate them into pages
For example, a user details form could have the following categories
Basic Info
- Name
- Gender
- Age
Contact Info
- Mobile number
- Email Address
- Home Address
-
The app runs in desktops. The logical categorization is already in place. We don't want the user to come out of the calling screen that's the reason for choosing a popup dialog. – Sachux Nov 20 '14 at 6:00
1
If the type of some fields depends on previous choices/answers you can populate the form accordingly (= based on previous choices) using a framework like jQuery of plain old JavaScript. But if I understand it correctly the only elements in the form are 20 fields? If so, you could try grouping similar fields and use -for example- collapsible divs? So users can finish the form group by group.
-
-
Personally I'd go for the divs because -in my opinion- users can be guided to the next step. For example: fill in the fields in the first div and have some sort of call to action to open the next one(s). While tabs -again in my opinion- don't oblige you to activate them. – Ziepe Nov 21 '14 at 8:22
