2

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?

Improve this question
1
  • 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

Improve this answer
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
Improve this answer
1
  • 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.

Improve this answer
2
  • Thanks Ziepe! collapsible divs or tabs which one is better?
    – Sachux
    Nov 21 '14 at 7:38
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.