Contact forms and web site usability

It’s one of the most frustrating design problems for users: you’re browsing a web site, find the information, service or product you are looking for and proceed to make contact with the company or organization through their web site’s contact page. Unfortunately, the site only has e-mail links and phone numbers listed, and you don’t want to contact them by phone.

Some readers may not see a problem with this scenario. When a user clicks an e-mail link, their default e-mail client, whether it be Outlook or some other e-mail application, opens with a new e-mail ready to be composed and sent to that address. Sounds convenient enough, but what about the large number of users who use Hotmail, Yahoo or another web-based e-mail account? Their experience is quite different. To these users, clicking a link that opens an e-mail application they never use, nor have need of, can be annoying to say the least. If one of these users is determined to make contact, they must copy the e-mail address, browse to their web-based e-mail account, log-in and type or paste that address into a new e-mail before they can write their message and send it off. Most likely, that user will just browse on without making contact, opting to contact a competitor instead, whose web site provides better usability.

The other major downside to listing e-mail addresses in the HTML code of a web site is the amount of exposure these e-mails are providing to SPAM spiders. No one wants to have an e-mail inbox fill up with spam everyday, and the first thing someone can do to prevent this is to keep e-mails private and off the web. Creating a contact form solves both of these issues. A user doesn’t have to experience the hassle of leaving the web site to type their message and when built properly, a contact form will protect the provider’s e-mail address from getting picked up by SPAM spiders.

Contact forms should be designed to follow web standards and be accessible to all users. This means designing a form that isn’t dependent upon client-side languages and technologies such as JavaScript and CSS in order to be functional. It should also be designed with appropriate and semantic HTML so that users viewing the site without CSS enabled or using screen-readers can easily interpret the form.

In addition to the design of the form fields and other inputs, a contact form should include a few extra measures to be considered safe from spammers. First of all, a number of fields should be required for the user to fill in; it isn’t helpful to get a message from a user who has failed to provide their name or a phone number and/or e-mail address to respond to. Additionally, all fields should be validated to ensure that the input content is actually relevant information and not malicious code or scripts.

While client-side validation using a language such as JavaScript may provide a certain amount of protection, a number of users have JavaScript turned off or uninstalled, and those seeking to do harm can simply turn JavaScript off and bypass any such validation measures in place. The most effective way to forestall spam attempts is to use a server-side language such as PHP or ColdFusion to validate that the input content is relevant (for example that a field for an e-mail address actually contains a valid e-mail address) and also strips any characters or content that doesn’t fit the parameters for that field, or could possibly be part of malicious code (such as certain characters or strings).

By taking these measures when designing a web site, you can ensure a convenient and user-friendly experience for your visitors and help keep your e-mail address and your web site safe from spammers.

Posted on October 17, 2007 by Michael Olson in Web Site Design, Web Site Usability.