Contact, Connect, Communicate: Designing Your Contact Page

When a visitor comes to your site and has a look around, one action you’ll want them to take is to contact you. They may be contacting you for more information, or if they’re very impressed, to hire you for your services. All going to plan, your contact page will be something they will actively seek out on your site. So what should information should appear on your contact page and what information should you be attempting to get from your visitors through your web form?

Let’s start with the blatantly obvious. You should have a phone number and an email address on your contact page. A postal address is required if visitors want to meet with you and also to provide a sense of security that there is a real and physical address that your are operating from. Some designers place this sort of contact information in the footer of every page, as well as on the contact page. I believe in making things as easy as possible for the visitor, and if they can find what they want quickly and easily in the footer of any page they visit, that can only be a good thing.

Google and Bing maps are easy to embed on any page and certainly make it easier for potential clients to physically find you if necessary. These maps also allow you to provide driving directions from where they are to where you are and are just another small element that improves your visitor’s experience.

If you’re an online social butterfly, don’t forget to add buttons to let people know where you are on Facebook, Twitter, Gowalla or whatever your social network of choice.

When creating a form for your visitors to contact you, make sure that you are collecting all the information that YOU need from them, such as their contact details, what they are are contacting you about. Depending on what type of service you offer, you may need to add extra fields, check boxes, radio buttons or drop down menus to your contact form. For example, if someone is inquiring about the costs of your design services, you might offer a drop down box specifying logo design, web design, graphic design.

If you don’t have a contact page, you are completely missing an opportunity to engage with your visitors, and you are potentially losing clients. They are not difficult to put together, and below I’ve collected some examples to provide a bit of inspiration if you’re not sure where to start.

Paramore Redd

Paramore

Lionways

Lionways

Bert Timmermans

Berttimmermanss

Electric Pulp

ElectricPulp

Fabrica De Caricaturas

FabricaDeCaricaturas

Triangle

Triangle

Bubblesoc

Bubblesoc

Substrakt

Substrakt

Bio Bak

BioBak

Hasrimy

Hasrimy

What do you think of these contact pages?  Do you think the contact forms should be unadorned with little or no design, or do you like the contact pages with extra illustration and customization?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Bounce Design

    Thanks for a very informative post – came at the right time when we are redesigning our site.

    • http://www.laughingliondesign.net Jennifer Farley

      Glad it was useful Bounce, thanks.

  • Anonymous

    Well, I’m just a web user rather than a web designer, so I sometimes get the impression (while using the web) that my view won’t count for much, but I wish that people would keep their contact forms (and their entire websites, for that matter) as usable as possible. Surely, when fancy design starts to impinge on usability and legibility, that is the point at which one should stop trying too hard to outdo other designers.

    Unadorned has only one D after the A, by the way.

    • Jake

      I commend the anonymous user who understands terms like legibility and usability: it’s seldom I work with clients who understand those terms. And, as Anonymous so aptly points out, designers sometime struggle with balancing creativity with end user needs.

      However – I have one correction. Unadorned actually has 2 Ds after the A. –> unaDorneD <– though not three as used in the body of the article.

      • Anonymous

        For a moment there, I thought that you really didn’t know how to spell, but I see that you were just trying to be funny/clever.

    • http://www.laughingliondesign.net Jennifer Farley

      Hi Anonymous, your view is as valid as anyone else’s and I think we get into trouble when we stop listening to others so I appreciate what you’re saying.

      And I agree with you regarding the design of the forms. I like to look at what designers do with and there is some really fun stuff out there, but not necessarily the most usable. The bio-bak is an absolute nightmare t.b.h. but it’s interesting to look at and to get people’s opinion on.

      Superfluous letter D removed from the word unadorned too, thanks : )

  • Rich

    Hi All,

    I like the preceding contact form examples.

    I am trying to figure out how create a contact form with a check-box that
    gives users the ability prompt the form to send a copy of messages to the
    sender’s e-mail address from the contact form.