0

I’m currently designing a template for forms on a governmental website. This kind of template can contain lots of input fields so I don’t want the user to scroll a lot. Also, the forms are in a slide-out pane (not on the full-screen, as you can see from the image I attached), so I have limited space. How many input fields should I put in one row? Right now I set “ID num”, “First Name” and “Last Name” aligned to the same row.

What do you think? Do you have any article or resource that talks about that?

1
  • If this is for a mobile view, then probably one. For desktop there isn't a straight forward answer but there are guidelines you can use to determine what the optimal amount might be (and then test it).
    – Michael Lai
    Apr 1 '20 at 22:15
1

If you really want columns in your forms

Here is a quick rule to follow when designing forms with multiple columns:

double your font size and enter the largest realistic value that input would need to accept, if it fits then your input is large enough.

The reason for this is that a lot of people will increase the font size in their browser and WCAG 1.4.4, although not entirely clear, suggests that this should allow up to a 200% increase in size.

I say not clear as it says as long as the page can be zoomed and this has always been a point of contention as to what the rule actually means.

Even if this point isn't clear it is a good practice.

Assuming your are using rem or em units at 1rem / 1em, just set font-size: 200% on your HTML and enter the longest realistic information you can think of (i.e. for email address enter 'thisisalongemailaddress@alongdomainname.com'), if it fits you are golden.

As font size is complex with rems, ems etc. you could just set the font size to 32px manually on each input as that would be the equivalent. Don't forget your labels as well to check they work.

If you find you end up with lots of space left over, then add another input to the row if it makes sense.

A couple of additional considerations

Also as this is marked 'accessibility' make sure that the border of your inputs has at least a 3:1 contrast ratio with the surroundings, it looks ok at a glance but it is borderline.

One final thing to consider is do items belong together? First Name and Last Name do but is ID Number related? I would be tempted to have ID Number on a different line.

Should you design forms with more than one column?

With all of the above being said.....put one input on one line.

The second you start adding error messages the above will all fall apart (as error messages tend to be longer).

Error messages still need to work at larger font sizes and tend to become unclear when they are 2 or 3 columns.

Also don't worry about vertical scrolling, it is convention nowadays and as a form will be ended with a submit button people will know when they have reached they end of your form (so you don't need to worry about people missing fields.)

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.