Tips for Better Web Design Forms

No one likes filling out forms. They take too long, ask too personal of information, or just don’t work. Lately, all of us at digital-telepathy have been designing and developing forms for a bunch of different projects. Ranging anywhere from a sign up form for Champion Sound to a multilevel complex mortgage form. All of the R&D we did over here with those forms taught us a little sumtn’ sumtn’.

Quick Form Check List

• Choose a label placement and stick with it
• Choose a submit button and remain consistent through all forms
• Go with custom fields or default feilds (don’t try and meet halfway)
• Figure out where the error messages and notificatiosn go along with their style
• If you have many fields, split them up into groups

Quick Tips for giving your website form some personality

• Use larger input fields with larger fonts
• Design your fields
• Stylize your error messages and notifications
• Create an appealing OnFocus style

Form Labels
Starting into a form design you need to make an “executive decision”, and choose where your labels for the fields will go. Will they go above the field and flush left or to the left of the entire field aligned left or aligned right? It is your decision. Just make sure it works where ever a form will be on the site. I have noticed that placing the label off to the left appears friendlier and less technical. It also helps save vertical space, so for longer forms they can appear less daunting.

Form Fields
Design your input fields in your form. It will lead to a more unified and complete design and experience. Examples of a complete form design would be www.tumblr.com/register and http://virb.com/join. I am not saying these are perfect, because they are missing a few things, but they look very polished and appear inviting. A good first step in getting your form completed and submitted.

Form Error and Notification Messages
Error messages can be fun. I have a huge appreciation for websites that get this right. Having instant feedback in this time of short attention spans helps gain credibility. I am not talking about the sites that give you a huge error message after clicking the submit button saying “email address is required, password is required, link is required, year of birth is required, etc…” is the correct way to do this, but it does work. The sites that elegantly place small error notifications under each field appear less intrusive and demanding. Only having a large red box at the top of the form stating all the fields required is helpful, but why not place a small red border around the corresponding fields, so I am not having to look up and down the fields finding what is required. These small details help create a complete form.

Large Forms
Limiting the number of fields a user has to complete has proven to yield increase results. If you can cut some fat, unnecessary fields, from your form do so. If you have to keep a large number of fields, break it up and organize.

Way back, I thought forms were boring to design. All you get are these lame field styles that change depending on someone’s operating system and browser. That has all now changed. I get to design validation styles, on focus styles, the fields themselves, and an awesome submit button if I wish. Even better is that the development guys over here are some of the best and now how to make all these designs function.