Designing effective forms

 

The following guidelines will help you to design forms that are easily understandable and effective.

1. Mark elements that have to be filled in, e.g. with a red star in front of them:

   * Your name:

2. Put explanations right next to the field. For instance:

   * Your password: must be 6 characters, alphanumeric

   If the explanations are too long you'll have to put them in a separate help file or part of the page and link to them. But it's better to keep them short and put them right where they're needed.

3. Ask for feedback and comments -- either via a <TEXTAREA> box or a mailto: link. The <TEXTAREA> box is preferable since people feel that they're giving their comments right on the form, instead of writing separate email.

4. Put the form in a table to get exact layout. Most forms look better when laid out so that text boxes or radio buttons fall underneath each other; checkboxes and radio buttons are clearer when their labels are centered underneath them rather than next to them. You can only do this by putting the form in a table or even in nested tables. Compare the examples in our lessons on forms with this:

   What do you want on your pizza:

   Onions	Tuna	Olives

   Similarly, you can use different-colored backgrounds in different parts of your table to tie related areas together.
   

5. If you have several forms on your site, develop a consistent style for all the forms. This is really just part of the general need to develop a consistent "look and feel" for the whole site.

 

If you don't know what all that is about, go back to the first tutorial on forms.

 

---

Written by J. Koren for Unesco
©1998