Pressplaymedia’s Blog

Tips for making a good contact form

Posted on: November 9, 2007

Contact forms are a must for practically any type of website. Most likely, the first contact you will have with a potential customer will be through the contact form on your site, thus it is one of the most important parts of the website. Here are a few tips and guidelines for making a good contact form.

1. Use as few input fields as possible

The only fields you really need are for the visitor’s email address (so you can reply to them) and for the message body. Since it’s nice to reply to the visitor using their real name, you should also add the name field. However, do not have separate fields for first name, last name, middle name, etc.. Just use one simple field: Your Name. If you are logging each inquiry to your database you can separate their name into parts using server-side scripting. Use a description text to let them know the correct order (e.g. first name, middle name, last name). Discard all other fields like phone, fax, address, and any other details, unless you absolutely require them. And even in that case, make those fields optional. If you are gathering information about visitors and need other information about the user, please see the tips section below. Also avoid having a subject field, instead use a dropdown with preset options. See below for tips.

2. Have the message field big enough

Message body field should be big enough to fit a standard short inquiry. In my experience it counts to about 8-10 rows. This will enable most users to see their full message in one piece, which is desirable, and this also helps them spot any spelling errors and format their message into something readable.

3. Newsletter signup should be off by default

If you have a “sign up for the newsletter” checkbox, have it turned off by default. This is much less intrusive and in my experience much more effective. If they are really interested in your product or services, they will sign up. In the end, why would you want have random people on your list? Trust me on this one and save your server’s resources.

I have personally made tests on various websites with this checkbox on and off by default. I was quite surprised to find out that 60% of users that saw this checkbox on by default turned it off, while 80% of people that saw this checkbox off by default turned it on.

4. Spam protection and security

At first, I suggest you setup the contact form without any spam protection, and add that later if you get attacked by spam bots. You can use CAPTCHA protection or any other alternative, including adding a simple “Are you human?” checkbox. Be sure to add short instructions for your spam protection.

If you are saving any data to a database, make sure to protect your form from sql-injection and other malicious techniques like cross site scripting. Failure to do so might result in attacks to your site or database and data loss and data theft. If you google those terms you will find many tutorials on how to protect your form against those.

5. Positioning the elements

Field names should be above or left of the field and the “required” tag right of it. Field descriptions can be below the field name or right of the field if there is room. The submit button should be at the bottom of the form, aligned to the right. No need for a reset button as it is proved to be useless. Of course any other good design guidelines apply, like having visible borders around fields and avoiding small or hard to read fonts, etc.

6. Provide other contact options

Always try to provide your other contact options like phone numbers next to the form. Having a normal “mailto:” link is good for people who are more comfortable using their email program like Outlook, Thunderbird, etc. It is however a spam risk and is best done with javascript for example, so that a bot cannot collect your email address easily.

TIPS

1. Collecting additional information

If you want to gather additional information about the user such as age, gender, location, profession, etc, best way is to simply ask the user nicely upon submitting the inquiry. Have a second page with a form nicely asking the user for more information (e.g. “to better know your customer”), but I would suggest doing that only if the user has signed up for the newsletter. That is because in my experience signing up for the newsletter (if you have one) is a sign of interest and trust, besides, it is pretty useless to gather data about uninterested parties.

2. Sending to different addresses based on the subject

If you’d like to send product related questions to one address, site related questions to another for example, you can make a drop down field with these choices (labeled “Subject”) and then make a script which sends the message to the chosen department (information, sales, marketing, etc). Most common are: General Information, Website Feedback, Contact Request, Price Quote, etc.

EXAMPLES

A few examples of good contact forms. Source: CSS Contact Forms

contact12.jpg

contact4.jpg

contact25.jpg

contact27.jpg

Further Reading:

Sensible Forms: A Form Usability Checklist
A great article about designing forms for the end user by Brian Crescimanno at AListApart

Thanks for reading, any questions / comments are welcome!

Advertisements

7 Responses to "Tips for making a good contact form"

[…] Check it out! While looking through the blogosphere we stumbled on an interesting post today.Here’s a quick excerptAlways try to provide your other contact options like phone numbers next to the form. Having a normal “mailto:” link is good for people who are more comfortable using their email program like Outlook, Thunderbird, etc. … […]

very interesting.
i’m adding in RSS Reader

what is a good acknowledgment message / or email?

I like the examples listed below
very interesting
keep up your good work
I will be a regular reader of ur blog

What about using a hidden input field to post the session id along with the contact form instead of captcha’s? The user wouldn’t even have to worry about it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: