1. Technology

How to Create User-Friendly Forms

Tips and Tricks For All Portions of a Web Form


Forms are fairly easy to learn how to build, and while the back-end might be more tricky, it's still not terribly difficult. But creating a form that your readers will want to fill out and not get frustrated with is harder. It's more than just a matter of laying out your HTML in an accessible fashion. It's a matter of thinking about all aspects of the form and the purposes behind it.

The Layout of the Form

  • Line up the entry fields.
    It's really easy to create a form that just has the form elements right up next to the field names. (example)

  • Align the field names.
    Lining up the entry fields is not the only part of the layout you should look at. As you can see above, if you don't align the field names it can be difficult to tell which label goes with which form entry. I prefer to align the field labels right up next to the form entry fields. (example)

The Content of the Form

  • Tell your readers what will be required.
    A user-friendly Web form will most likely include required fields. These are fields that they must fill out for the form to work. But don't make those fields a surprise to your readers. (example)

    Make sure that each field that is required is clearly labeled, and not just color-coded. Color-coding does not show up in a screen reader or text browser.

  • Don't ask too many questions.
    You might have 50 questions you would like to ask your readers, but chances are they won't want to answer them all. If your form is too long, they will get bored before they finish and you won't get any results. I have found that a good rule of thumb is no more than 7-10 questions per page, and no more than 3 pages per form.

  • Don't ask your readers to type.
    If it is at all possible, use a drop-down form. This will insure that your data is consistent, and your customers won't have to type as much. (example)

    This form is much easier and faster to fill out than a text field.

  • Put common answers at the top or selected.
    When you're using a drop-down field, be sure to use either the selected option or put the most common answers at the top. Don't forget that it's okay to repeat answers within the form field, and don't stay married to alphabetical order if it doesn't make sense. For example, if you're asking people to fill in what country they live in, the most common countries of your readers should be at the top. (example)

©2014 About.com. All rights reserved.