Form design is tricky. Sometimes designers don’t understand all the complexities of a given form and misjudge the time needed to properly design them. Your web site’s form is essentially the heart of any transaction. It is of the utmost importance to design the form correctly.

A frequent question on form design is how to handle error messages?

My typical response is to build the form to do the “heavy lifting” so that the majority of errors can be eliminated.

Create the form to handle varied inputs. For example don’t force a user to figure out how you want a phone number. If they enter with dashes (periods or parenthesis) don’t fire an error message and force the user to correct the problem simply strip out the extraneous characters on the backend and move on.

Clearly indicate what is required, best practice is to use an *

Since no matter how well the form is built there is going to be errors make sure the errors are clearly indicated as well as instructions on how to correct the problem. For long forms it is a good idea to indicate the errors at the top of the page and also by the field. This eliminates the need for users to scroll up down trying to find the errors. The standard for error messages is red. I’ve used a combination in the past of a yellow alert box with red text. This really stands out against a white background.

In some instances I’ve seen live validation work well for, instance when passwords don’t match, or password strength indicators. Other times it can become rather intrusive. Whereby it fires an error before I’ve even finished typing my response.

If the form is of the complex nature (i.e. mortgage applications, claim reporting, etc.) contextual help along side of the forms can prove to be a good idea. A good example of this can be seen at Wufoo

These points only scratch the surface on error messages and form design however should get you pointed in the right direction. It is important to think through your form making it as easy as possible for your users to complete.