The contact page is your point of contact with your customers and potential customers. It should be
- easy to find on your website and
- easy to use so people actually get in contact with you (the whole point of the page).
So let’s see what you should and shouldn’t do on a contact page.
Basic information
When they click on ‘Contact us’, users will expect to view a certain number of elements, namely:
- your email address
- your telephone number
– your postal address
It is also common practice to use a contact form.
The more contact options you offer, the better. Remember that you want to achieve is create a communication between you and the user, no matter how.
“People only ever contact me via email or phone. Why should I display my postal address?”
Because even if people don’t write to you, some (or many) will want to know where you are based and this is the best place to display your full address, even if it’s already in your footer. Remember that not everybody scrolls down to the footer to read it.
“If I have a contact form, should I also display my email address?”
It’s definitely best to have both. Some people don’t like using forms, others find it easier than open their email app. Note that your email address should be a clickable mailto link.
Usable contact forms
Number 1 rule: simplicity
The complexity of the contact form depends on your line of business. The simplest form will include the sender’s name, their email address, their message and an action button.
This is enough in many cases and so simple to fill in that there isn’t any communication barrier.
If you want to add more fields, make sure that your users won’t be put off by having to share private information or spend time looking for a reference number they can’t find. If their name and email address is enough for you to find them in your system, don’t make them waste time.
If some users need to send you more detailed information, for a quote for example, then direct them to another form with all the fields required. People who ask for a quote will spend more time to fill in a form than those who just want to ask you a simple question.
Labels, input fields and layout
You will find different opinions on where to position labels and input fields.
Research shows that placing labels above input fields is ideal if you want the users to fill in the form very quickly. But it’s not always the best option.
Another good common practice is to place the labels on the left of the input fields. It’s easy to read and understand.
Mandatory fields should be indicated with a symbol (usually a star) and a legend.
The layout should be kept straightforward as well. One column is better than two, even if users need to scroll down to the end of the form. That way they can’t miss an important field.
Success and error messages
If the user makes an error when filling in the form, they should view an obvious error message at the top of the page, usually in red. Red indicates that there’s a problem. It’s a convention that works so stick to it.
You should always give them a clue as to where the error is, if it’s because a field was left blank or the value they entered was wrong. Don’t make them waste more time. Help them fix the error or you risk losing them altogether.
The success message is equally important. Once the user hits ‘Send’, he needs to know that his message was sent successfully. This message will also be displayed at the top of the page, usually in green.
Cookies HQ contact page
So did we apply everything I just said?
Well yes for most of it. The only thing we don’t follow to the letter is having the form on one column, but the form is so simple that I don’t see how it could prevent people from wanting to contact us.
What do you think?
Photo credit: paulgi on Flickr
