Better online forms

I’m currently working on a web application that involves a lot of form fields. Thought of putting it out here as notes to myself and to anyone who may also find it useful.

*Rather than taking this as general rule, do remember that context is everything. Here’s a recommended reading if you want to learn or need a refresher on the basics.

1. On page or screen load, automatically set autofocus on the first input form element if it’s a text field.

Why? Encourage the person filling up your form to go straight to typing. That’s reduced time and effort spent on selecting the field — whether it’s positioning the mouse cursor then clicking on it or tapping it on a touch-enabled device.

How? The simplest way - add the attribute autofocus to the input tag:

<input type="text" autofocus />

Focus input field on load

It may not sound much, but it’s something that makes the user’s life easier and complete the form faster. One task less to do for the person = plus points for a positive experience.

2. Use the 'for' attribute for accessible checkboxes and radio buttons.

Why? There are tons of tutorials out there on how to customize checkbox and radio buttons. They are small, thus requiring more precision to select compared to other form elements like text fields.

How? You can definitely add some extra CSS styling to make them easier to click, but never forget the fundamentals — make sure that there’s a for attribute on the <label> referring to the checkbox:

<input type="checkbox" id="accessibleChoice" >
<label for="accessibleChoice">Check me!</label>

3. Tooltips / Popovers for helper text

Why? First things first —the general rule is do not hide helper text. Place them appropriately, near the field to which it is referring to.

Now what if you have a rather complex form, like it’s necessary that each field have their helper text in the label?

Helper text for context? Check. Proper usage of color, size, and spacing of form elements for contrast? Check. How many fields are left for me to fill up again? Why are there so many words?

Look, you should eliminate helper text if a label will suffice. Break down a form into sections if it’s too long. Those are general recommendations. But in case that those won’t be enough, how about using tooltips or popovers to prevent the person from getting overwhelmed with all the content in front of him or her?

Show one helper text at a time. Display it when the field is on its focused state.

How? Here’s a nice way of implementing tooltips using CSS. If you really need Javascript, then by all means do it as long as you can justify that it’s necessary.

Note: Ensure that the design works well on whatever screen size, too. For smaller screens, it is perhaps best to go simple — no tooltips on focus, just permanently display the helper text.

So far these are what stuck with me. Will update the list if I get to discover more tricks. I would love to hear your comments and ideas, too!