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?

  • 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
    Commented Nov 21, 2014 at 13:07

3 Answers 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


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
    Commented Nov 20, 2014 at 6:00

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.

  • Thanks Ziepe! collapsible divs or tabs which one is better?
    – Sachux
    Commented Nov 21, 2014 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
    Commented Nov 21, 2014 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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