0

my website is using bootstrap so its a responsive not the adaptive one.

I want to make a form that has many fields->i already breakdown as a section and cut down unnecessary fields, for example one section has 17 fields.The amount of fields must be the same for mobile and desktop browser.

When i tested on desktop, user isnt overwhelmed with the amount of fields in one section, but when it comes to mobile, user has a long scroll to reach button(next-> to next section or prev-> to previous section).

Anyone know from experience what is best practice for form like this? Like how many max fields that i should have.

Improve this question
1
  • Are "Previous" and "Next" only buttons on the screen? Where would Next lead to? Is this 1 form with 17 fields OR a part of a bigger data collection process?
    – Chandan
    Commented Nov 22, 2018 at 4:39

3 Answers 3

Reset to default
1

A) Use multiple pages. Instead of a single page with 17 fields use e.g. 3 pages with let say 6 + 6 + 5 fields. Split fields by similarity. E.g. one page can contain person name, other the address, etc.

B) If you prefer to keep all your 17 fields on a single page:

  1. Do not collapse them Do not use accordion or something similar. Give your user a good overview of all fields that need to be filled or resp. that are filled so far.
  2. Provide visual anchors like section titles, icons, scroll bar to help user to understand his current position on the page.
Improve this answer
-1

If the page only contains a big form in it then you can use collapsible tab in it for a mobile device. See there must be a set of data you are collecting for say if its a shipping address you will be collecting its personal information, shipping information, payment information, contact information right. So you can hide the titles in desktop view and can show title in mobile view with accordion in it one section at a time. Right now I don't have an example with me but I hope you got the logic I am trying to make.

Improve this answer
1
  • 1
    Accordion is bad for filling multiple fields, because user has no overview of the fields.
    – mentallurg
    Commented Jun 24, 2018 at 15:07
-1

Instead of displaying all the fields of input form in mobile view you can present your form in drop-down list way like below.

enter image description here

You have to do categorize your main input form field wise. The user will click fields one by one and insert their data easily. This approach is very user friendly.

Improve this answer
1
  • This is bad because it is not clear how many fields need to be filled and how many of them are already filled.
    – mentallurg
    Commented Jun 24, 2018 at 15:05

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.