Creating User-Friendly Web Forms

Web forms are where you interact with customers the most directly but they seem to be one of the places web designers forget about on websites. Many websites is meticulously designed, but the web form is just plain HTML. Forms are fairly easy to build, while the back-end might be more tricky, it's still not terribly difficult. Creating a form that your readers will want to fill out and not get frustrated with is more difficult. 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.

• Align the field names.

Lining up the entry fields is not the only part of the layout you should look at. If you don't align the field names it can be difficult to tell which label goes with which form entry.

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. 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 your readers to type.

If it is at all possible, use a drop-down form. This will ensure that your data is consistent, and your customers won't have to type as much.

• 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.

• 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.

Programming a User-Friendly Form

• Validate the form data before you send to the CGI.

Use JavaScript to validate your forms before you send it to the CGI. This is usually faster than CGI validation, and gives your readers immediate feedback.

• Validate the form data within the CGI.

This may seem like wearing a belt and suspenders, but it insures that the data is correct before you store it. And some people have JavaScript turned off.

• Don't make your readers go back to fix errors.

This is one of the most common usability problems with forms. There are errors and the reader is expected to remember them all and hit the back button and hope that the cache hasn't cleared or she'll have to fill in the form all over again. Take the extra step of rebuilding the form, and you will get more completely filled out forms.

• Show your readers what they submitted.

On many feedback forms, the reader submits her entries and they disappear into a void. She might receive a thank you note, but she has no record of what she sent. A well-crafted form will either send the data that was submitted to the reader or display it on the screen (for printing or saving).

If you follow these hints you will create a form that is easy to read and fill out and your customers will thank you by filling it out, and not just leaving or ignoring it.