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-contact

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.

uxbooth-contact

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?

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Good advice, however…

    Clicking on a form label should set the focus to the relevant form field.

    I notice that the comment form here at uxbooth.com does not do this.

  2. Currently in the process of updating our contact form (see the link in my name to check it out). Obviously, we’ll be following the UXBooth guidelines, but any specific tips some generous soul out there is willing to give would be great.

  3. I agree – good article. The thing I find most annoying are compulsory zip code / post code boxes that only accept US formats, random tab order and indecipherable captchas.

  4. @Ben: As with any website we are always tweaking the way we do things. Thanks so much for bringing this to our attention. This, and other things I found in research preparing for this post will be considered in a revision of a few things around UX Booth :).

  5. Curious that you suggest ‘send email’ as the call to action. This supposes that the user’s mental model is that they are sending an email rather than, say, sending a form. Wouldn’t ‘send form’ or ‘contact us’ be a better label?

  6. What’s your view on recaptchas to avoid spam? Do you have any better suggestions?

  7. @David Travis: Hah, I actually considered the same thing as I wrote. Thanks for weighing in! I love hearing others opinions.

    Maybe this is not the best choice of words. Contact Us may not be congruent the meaning of sending what had been filled out. I think more thought is in order! :)

  8. really good read. thanks alot. will definitely take above points in mind while working forms @djzaf

  9. @Justin: Recaptcha is suppose to be the best in terms of the traditional captcha. I much prefer basic math equations instead and am going to push for that to be part of the UX Booth contact page. :)

  10. All you need to do is add ‘for’ attributes to the labels that correspond to the ID of the related field.

  11. Wow, two name checks in the one article. Thanks.

    I’m not keen on that Studio 7 example though. The lack of real labels is totally unnecessary. There is plenty of space on that page to accommodate proper labels. This approach can work for a single field form but it’s not helpful for a multi-field form. The stars for the mandatory fields disappear as the user tabs into the field. As does the label itself.

    It has been done purely for aesthetics rather than for any design constraints.

  12. Thanks for the great post Matthew! It’s good to get a reminder that there’s often heaps of scope for usability improvement even in the simplest of things, like contact forms.

    The one thing I can think of that you didn’t touch on is leading people to the contact form. Many sites include the ubiquitous “Contact Us” in primary navigation, some in the footer, and some even provide the contact form in the footer or sidebar on every page. Obviously the best of contact forms won’t help you if people can’t find it. Once again several ways to skin the cat.

    As a sidenote, I wrote about in-field labels (sometimes called “input prompts”) a while back here: http://www.volkside.com/2009/03/design-detail-input-prompt/

    Cheers, Jussi

  13. Nice article, thanks.

  14. Studio 7 form isn ot that great. If you notice that after validation on submit it gives only error message but it do highlight or focus which field user have made mistake. So its very difficult to correct it.

  15. Great article, although I think “Captcha’s – The Good and the Bad’ should certainly have been included.

    For example, using the honeypot technique certainly boosts your usability – especially if your end user’s browser has CSS enabled, but captcha’s can deter users from bothering to complete the form, especially when they’re complex or just don’t work.

  16. @David Hamill: @Rishiraj Ravindra Singh: I actually referenced that form for the structure of the components it contained. Thanks for pointing out its faults :).

    @Russell Bishop: I actually have a post coming up on that :).

  17. Thank you very much for having our contact form (studio 7 designs) on here as a good example :)

    Rishi (comment above) is correct in that the error correction on our form is not (currently) that easy to use. We just recently moved to a new server, and are in the process of updating the error reporting functions.

    Basically, if you miss a section, either by not including a valid email, there is an error message that highlights the box that needs fixing. But it currently does not show what the box name is. We actually had this functioning showing the name of the box, but with the server move we ran into some issues. This error reporting function will be updated once we resolve the new host issue.

    Thanks!

  18. @Sarah: Thanks for stopping by and giving us an update! I hope you didn’t get too many “test” emails from our post :).

  19. @Matthew Kammerer: ;) So far, only about 15 this morning. Its all good, we are actually really glad to have some really valuable feedback on our form. We will be adding the error checking updates, as well as we will be naming the fields (permanently) to help usability. Thanks for the opportunity for us to get great feedback :)

  20. Nice article as form design is really important. The examples you show there though are interesting to say the least.

    The Studio7 designs form for example seems to have poor contrast between the label and background and has that thing that is just annoying when the label disappears as you click in the box, often leaving you wondering what you are supposed to be filling out. I notice you refer to this later in the article.

    It is also interesting that their page http://studio7designs.com/contact/ includes a graphic on the right saying “Need a Quote – fill in our simple online quote form – Click here”. A user is probably going to say, aren’t I there now? What do I have to fill out this form or click the button. That uncertainty is more than likely to lead to significant dropout.

    Clearlefts form though undoubtably nice looking also has issues. Users tend to follow down the page not across it. Although it would be difficult in such a minimalist form, the 2 column approach has probably been used more to fit the design than to aid usability. There is also the problem of closing this form, which they have had to get around by using a cancel button. Again, great design, but probably the best for usability.

    I like the article though. The only thing I would add is that sometimes you don’t want a short form. If you want a small number of highly qualified contacts, it is often better to make your form more complex. That way you are putting up more barriers and only the most likely to convert will get through the form.

  21. Great post – it’s the little touches that make things good to use.

  22. I think that there should always be an alternative to a contact form (ie. tel. …)

  23. wow! nice forms and inspirtaion.

  24. @Maarten: Agreed. Especially for different generations.

    @Vats Thakur: Thanks :)

  25. Great post Matthew, a few things that irritates me in forms: looking up my country in a huge drop down list and a double email verification for checkup (i’m writing a post about this now).

    @Justin and to addition of what Russell Bishop already told: A great alternative for CAPTCHA are honeypots, this is a hidden textfield (for the users) which needs to stay empty. If the textfield is filled in, you can almost be certain that this is done by a spambot. This way you can also check with javascript if the form needs to be send or not.

    This post reminds me of some small things I still need to do.
    Thanks.

  26. Hi
    Great job,

    It IS better to build a simple and short contact forms,
    and most important is to make it immediately after specific sale content text.

Related Posts