Creating a Usable Contact Form

Contact forms can fail in many ways. Be sure they do not by following these guidelines.

There are some simple steps you can take to create the best bridge possible between you and your clients. The most obvious way to receive that feedback is through a contact form. It is an essential component for owners of websites. It creates a channel to hear feedback, suggestions, and even sell services.

The Basics

There are several things that a basic contact form should include. Meeting these standards will ensure you are on the right path for creating an excellent contact form.

What to include

Studio 7 Designs‘ contact form is clear and to the point

For the most basic contact form, you will need to include several key components. These almost always include the senders name, a way to get in touch with them, and a message. Also be sure to include a clear submit or send button. Failing to meet these basic needs will insure in a quick failure.

Make sure not to get too lengthy in what you are asking for. Remember that the user is simply contacting you not asking for a quote on their next large project they want to hire you for. If they are requesting a quote it is best to allow contact in two forms, one for simply contacting you and one for quotes. If too much is required a user will abandon ship.

How to structure it

When structuring your contact page it is best to place your fields in a traditional location that leads from who is sending to what they are saying. This can easily be done in two ways. One is to offer a single row of fields to fill out. The other is to create a two column contact page by presenting a few fields on the left (possibly including name and email) and then presenting the message field on the right. Both of these structures are intuitive and easily understood.

Breaking these conventions (Redd has discussed conventions in the past) can often lead to confusion or a failed attempt to contact you. It is also of utmost importance to offer a tab through order that is conducive to your contact form. For example, do not set your form up so that if you tab from one field to what you expect to be the next that it goes to the header of the page.

Clearleft utilizes a two column contact form that is beautiful in every sense.

Submission is Key

Submitting the message in the contact form is yet another seemingly simple part that many people overlook. There are two key components that must be considered when asking the user to send a message to you through a contact form:

The call to action button

Looking back to David Hamill’s discussion on Good Call to Action buttons we can learn much about what we must consider when choosing our “send” button. When choosing what word to use, we must always consider our audience. The two most common choices are ‘send’ and ‘submit.’ Both of which convey their message clearly. Another option to consider is describing your action more clearly. This could be worded as ‘Send Email.’

Submitted. Now what?

Once an email is submitted, a user expects for a sign showing them that their intended action was successful. If the message sends and no confirmation is offered, then a user may have doubts of whether or not their message will be received. We always want to leave the users feeling confident about their actions.

At UX Booth we show our users a message highlighted in green that reads ‘Thank you – your message has been sent.’ You may also consider including a more detailed message. If you know that you don’t ever answer emails over the weekends that may be something you would like to include, or tell the user that you will work hard to respond within 48 hours.

UX Booth offers a confirmation message to inform users their message has been sent.

Going the Extra Mile

So that covers the basics. That is how you can make an effective contact form, however, maybe you want to go a bit further. I believe the following tips should be done to create the optimal experience.

Fail Gracefully

If a user encounters an error on your contact form,  it creates a barrier between yourself and feedback or even a sale. When a user encounters an error be sure to offer useful feedback. An example of what to avoid could be “Error 4055”. What does that mean? How is that going to help the user correct his or her problem?

Offer helpful hints along the form to help guide users while they are attempting to get contact in contact with you. One of the easiest ways to accomplish this is through jQuery. Be sure to visit Web Resource Depot’s ’16 Free Ajax Contact Forms‘ for some excellent examples.

One particularly interesting jQuery option is one that is truly geared towards usability. Comments are often presented to a user in the respective fields, but when the user clicks it, the text disappears and becomes lost. Now there is a way to keep the tip in the field when clicked. Be sure to check it out and consider it on your next design: In-Field Labels: A Better Way + jQuery Plugin.

Offer an Alternative to the Form

FireHost offers many forms of contact along side their contact form.

One of the best ways to avoid a total loss of communication is to also offer an alternative to the contact form.

Depending on your audience you may notice you receive fewer emails and more phone calls if the chance is offered. This is a common difference in generational use of the internet. David Hamill (yet again) saves the day by writing about the basics of providing contact details. In this article he discusses many different ways to include information that should not be left out.

Conclusion

Your contact page is often the only way for clients, readers, and users to reach you. Make it as easy and pleasurable as possible for them. In many circumstances it can be the make or break point in terms of a sale or networking opportunity. By incorporating a  few of these simple guidelines, you can increase the chance of that user getting through to you.

What contact form blunders do you hate? How have you made your contact form easier to use?