Creating Better Web Forms

Posted by on Apr 25, 2011 in Articles | No Comments

You work hard for your clients. You create ad campaigns, speak at conferences, blog about new technologies, spend countless marketing dollars, all in an effort to send more clients to your site and garner their business. All your efforts may be in vain if your conversion point is a poorly developed form on your website or landing page.

There is no greater buzz-kill than going through a frustrating search process (type, click, click, narrow, type, click, click, narrow etc.) and once you’ve finally found the result you were searching for, you discover that the form is 6 pages long, with invasive, meaningless fields that are *required, no privacy policy, no assurance that your information won’t be sold to a 3rd party, or worse that the site is not secure.

What will your customer do? That’s right, BOUNCE, and fast!

A form that doesn’t work the way you expect, is too long, or too invasive will send your valued customer running to the awaiting arms of your competition. So here are few best practices to ensure your forms are the best they can be:


1. It’s a form, make it look like one – Keep it simple

Many sites crowd the page with too many distractions. It’s important to remember to keep it simple. Do not overdress form fields by adding a lot of design elements. Do not blend design elements like photographs or illustrations with the form fields as this tends to camouflage the form.  Make the form standout by using simple areas of color and contrast.


2. Stay focused – Ask only what is necessary

We are all naturally cautious about giving out personal information. Your form should focus on obtaining only the information that is absolutely necessary. If forms ask too much from a user, it sends the signal that you may be more interested in spamming them, or selling their information to a third party.

In the case of a large forms, like those for your taxes or any that require a lot of information from the user, do not show all the fields at once. Rather only show fields that are applicable based on previous entries. If it’s a really complex form it may be worth turning it into an application.



3. How long is this going to take? – Keep ‘em posted on progress

Time is valuable and users like to know what they are in for when beginning a new process. If it’s a complicated form, it’s important to inform the user how long the process will take; a time scale, ie 2 – 5 mins, or a half-hour to complete the process. And if it’s going to take a while, offer them the ability to save their information and come back and finish the form later which can done using code like Ajax.

In addition, it’s important to tell the user where they are in the process. If it’s a multi-page form, a progress bar can be used to tell the user that they are on “step 4 of 5″ and nearly complete. Reassuring the user where they are in the process acts as an incentive for the user to complete the process.


4. Don’t frustrate – (pre)Populate

This plays into the above point of keeping it simple but in addition it’s important to make the experience user-friendly. Don’t make the user think. Make fields and functions operate the way they should. Allow tabular navigation instead of point and click navigation, and pre-populate fields with the user’s information whenever possible. Also use field sets for different types of content (as in the case of separating personal information from billing information, etc.) so it’s easy for a user to understand.

It’s also a good idea to make the first field of the form active, denoted with a blinking cursor so that the user can immediately begin entering their information rather than clicking the field to enter the information. Airline and hotel search engines do a good job of this as they know a lot of people do comparative searches for the best travel deals. Users want to search a few sites very quickly so having the destination field or date fields active and pre-populated as needed allows them to get results quickly.

Have you ever filled out a form and clicked submit, only to be warned that you haven’t entered all the required fields and realize that all the information you just entered has been erased? It’s a big deal breaker. So make sure the form is coded properly to retain the users information, as well as make it extremely obvious what field is needed. Use color or circle to call out the required field.


5. Show them you are legit – Offer assurances

Reassure your users that they are on a secure site by signing with a security service and displaying the appropriate seal of approval. Include and link to your privacy policy, the BBB logo, and display security seals and certificates in subtle but obvious ways near the conversion button.


6. Know your audience – Make your forms accessible

It’s important to consider that your form is accessible and usable by everyone, including people with disability, so be sure that the page is coded with these standards in mind.

It is also important to consider the users’ location when asking for certain types of information. Imagine a user from the U.K. filling out a form from a U.S. based company and being asked for a mandatory zip code. The user would either make one up, or worse leave the process completely. In either case you’ve lost that client.

Follow these steps and watch your conversions start rolling in. And remember, if you don’t plant a seed, you won’t get a crop. : )


Some additional resources:

Web Design Tuts – How to Design the Perfect Form

ParticleTree – 10 Tips to a Better Form – Web form creation service

Simply – technical information on creating form fields