Contact Us Page Best Practices with 22 Fabulous Showcases

Contact Us Page Best Practices with 22 Fabulous Showcases

In the entire World Wide Web, most sites, be it large or small, contain a Contact Us page. The purpose of the Contact Us page is to get your clients or customers to talk to you or inquire more about your services. Ultimately, it is to generate potential business for your company. A site contact page may seem insignificant, but it’s the only gateway for your visitors to get in touch with you.

More often than not, the Contact Us page takes up a small fraction of the web site, it usually contains a simple form, or in some cases, a hyper linked email and contact number. No matter how simple this page seems, great care and attention should be given to where this link is to be placed, what content it should contain or the style of copy writing for that page. Subconsciously, these things tend to be overlooked.

Contact Us Best Practices

Now, who says the ‘Contact Us’ page is just a plain form and maps? This post illustrates the best practices for a Contact Us page, practices that you can adopt and how you can further enhance it. Also check out our showcase of Contact Us pages. One of them may inspire you for your next web project!

Be Objective, include only necessary information in your forms

Digital Mash
Digital Mash

Camp Creative Group
Camp Creative Group

Including important information on your form would determine the kind of information you will get from your client. Know the objectives of your form, and what you aim to find out from them. This is so that you can include them in the forms without having to bounce emails to and fro. This definitely helps save time for both parties. You could be a freelancer or running a design agency, but it’s always good to provide your clients with options like budget and time like the examples above.

Place your contact at the Top and Bottom of the page

Bronson Vitamins
Bronson Vitamins

If your page is too long, you may want to consider putting your contact information at the top as well as at the bottom of the page. This is so that your users do not have to scroll to the top to look for your contact.

Use Effective Copy Writing

Second and Park
Second and Park

Mother Earth
Mother Earth

Good copy writing tells client about your personality and brand. Second and Park and 45 Royale Inc are examples of websites with refreshing content in the Contact section.

Offer More Ways of Contacting

Museum of Science and Industry of Chicago
Museum of Science and Industry of Chicago

This is a neat and great way of grouping all contact information together. Always include additional contact information. This gives users more options of contacting the organization if the telephone is engaged or if the email bounced.

Use Call to Action Buttons

Digital Convulsions
Dconvulsions

Display your Contact button in a prominent position such as the top section of the page. Use a bright or bold colour for the button with adequate amount of white space. This allows the button to stand out from the page. It also helps to draw the attention of the user, allowing more hits on the Contact button.

Fred Maya
Fred Maya Folio

Fred Maya’s portfolio page does not contain a separate page for contact details. All information is put into 1 page; as such link hierarchy is important here. The ‘Contact’ link is located right at the top of the page in red, where it contains a roll down contact form. This style of contact link gives easy access and convenience for clients.

22 Showcase Of Contact Us Pages

Alexey Abramov
The contact page of this site is a pop up box that includes a form. It uses a combination of simple and pleasant graphics and typography.

Alex Arts

Carsonified
This contact page is styled in a bright cheerful orange, with retro graphics to compliment the site.

Carsonified

Creative People
The play of typography and use of photography makes this playful Contact page very interesting.

Creative People

Juan Diego Velaso
Having a Contact form placed beside a short introduction of the author allows users to read and contact the author without any hesitation.

Juan Diego Velasco

Music City Unsigned
A casual looking Contact form styled to match the look and feel of the site.

Music City Unsigned

Story Pixel
The use of textures in the text field makes this form visually interesting.

Story Pixel

Design Disease
This Contact page consists of a simple form within a wavy border. The page also informs customers if the agency is available to take in new projects.

Design Disease

Owltastic
The form in this Contact page is a good combination of white space, text field, and pastel colours.

Owltastic

Odopod
The brightly coloured Contact page catches the attention of the user. With headers to group its content, it helps users to notice information quickly.

Odopod

Fernando Landi
This Contact page uses the design of a notebook paper as a background. It gives a clean, simple and neat look.

Fernando Landi

Squared Eye
This site’s contact page is rather unconventional. The contact is revealed with a pop up of a square speech bubble beside the whale.

Squared Eye

Yodaa
This contact form is designed on a landscaping which is a creative way of displaying the form.

Yodaa

Artcore
The combination of illustrations, shapes, interesting characters, and textures, have made this form quite a striking one.

Artcore

Baikal Web
This Contact page would remind you of a name card. It uses a good amount of white space and icons to further enhance its contact information.

Baikal Web

Rustin
A simple white form could be made interesting like this one. This form is unique because it uses a format of a letter to communicate with you.

Rustin

Crush Lovely
Images of your work place can tell the culture or personality of your company. This Contact page has done just that.

Crush Lovely

Sprocket House
This Contact page appears as a pop up. It is styled as a scroll which matches the look and feel of the site.

Sprockethouse

Blue Door Baby
Having a centralised form and a good use of white space makes this form easy and comfortable to use.

Blue Door Baby

Fishing Catus
Unlike usual forms, this attractive Contact page has displayed its information neatly using warm colours, fonts and illustrations.

Fishing Catus

V lourenco
This form is simple with minimal graphics. If you are going for a minimalistic look and feel and want less distraction, this is a good way to build your form.

Vlourenco

Multiways
This Contact page consists of striking colours and an adorable mascot. The great colour scheme also appeals to its users.

Multiways

Conclusion

A captivating and well organised contact page could increase your revenue and establish you as a prominent presence on the web, so don’t underestimate this simple page as it may be the most crucial page of your entire site.

An organised contact page allows your visitors to communicate with you more easily and efficiently. All the information should be laid out clearly and notably. Sometimes adding a twist to your page, a humorous greeting line, and nice graphical designs could increase the frequency of your visitors clicking on your contact form.

In order for a contact form to look and work creatively, it needs a solid visual structure, a thoughtful hierarchy of form elements and excellent functionality to amalgamate the form perfectly with your contact page.

Seen any other creative Contact Page? Share it with us!

Charlotte’s interest is in web interface and design as well as motion graphics. Her absorption with her work is mostly due to her attention to detail and passion for the world of design. Winding down after work, which consumes much of her time; she enjoys traveling, exploring new places, gastronomy, and fashion.

Comments

  1. / Reply

    Cool ones buddy!

  2. / Reply

    i’m designing my contact page as well, this comes pretty handy, thanks!

  3. / Reply

    A great article, thanks for taking the time to compile this. I will use the tips in my next project

  4. / Reply

    Interesting post! I’ve never really thought about the usability of contact forms.

    • Jen,
    • October 17, 2009
    / Reply

    Good point, and great examples! I like those forms that include additional fields for budgets, timeframes and the like, and that one with the radio buttons so you can differentiate ‘just saying hi’ people from ‘let’s talk business’ people. Some are striking, others highly engaging, and some look like they’re just begging to be filled out. Cool post!

  5. / Reply

    Great collection! Visitors will definitely be motivated to contact you with these lovely Contact Us pages. They all look beautiful, it’s hard to pick my favorite!

      • Caleb,
      • August 7, 2012
      / Reply

      This is an awesome list. you gave me ideas how to add a contact form to my website. Thanks.

  6. / Reply

    This article has been shared on favSHARE.net. Go and vote it!

  7. / Reply

    This is an interesting post about contact pages. Thanks for sharing it with us.

    Content is a very important part of any page of a site. So, if you optimize a page for search engines, it can become a landing page by itself.

    I would pesoanlly mention my services at contact pages to make sure people know why they are going to contact me, who they contact, etc.

  8. / Reply

    That’s cool. All of them are already in my bookmark :D

  9. / Reply

    I always include detailed contact information such as a physical mailing address, email address, fax, telephone number and a Google Map showing my client’s location on the map.

    • Praveen,
    • December 19, 2009
    / Reply

    Excellent Tips to guide the beginers. I liked very the idea of sharing how to build a particular page with the screen shots of the popular website depicting the same. Hats off to this author.

    Regards,
    Praveen

  10. / Reply

    Inspirational list indeed !

    what do you think of my contact form:
    http://z-indexmedia.com/contact-us.html

  11. / Reply

    Great Post! Thanks :)

    • Ritu,
    • August 8, 2010
    / Reply

    Very helpful, thanks

    • Kapil,
    • August 22, 2010
    / Reply

    very inspirational

    • Phil,
    • September 23, 2010
    / Reply

    Great post, some fantastic designs, very inspirational, thanks

    • PAL,
    • October 30, 2010
    / Reply

    Good, Excellent tips for all website designers / owners.

    PAL

  12. / Reply

    Excellent article…Really helpful…Thanks for sharing…

    • Mike,
    • January 6, 2011
    / Reply

    Just to let you know that for non designers there is a web app called http://formsly.com

    • DAn,
    • January 21, 2011
    / Reply

    Quite old but still inspiring :) Great collection

    • Rikkidubb,
    • February 10, 2011
    / Reply

    Great post, Love the examples – awesome!

  13. / Reply

    Thanks for sharing the article personally very helpful to me . Many many thanks.

    • rahul,
    • May 3, 2011
    / Reply

    awesome collection….. gud work… ;) keep i up… :)

    • rahul,
    • May 3, 2011
    / Reply

    oops… sorry… :-| wrong misspelled….. *keep it up.. :)

  14. / Reply

    Nice collection, thanks bro :)

  15. / Reply

    And I was just about that too!

    • GI,
    • July 2, 2011
    / Reply

    Great and fantastic design samples. Very inspirational, thanks

    • Joeyj01,
    • August 10, 2011
    / Reply

    Very nice contact forms.

    • Mike,
    • August 21, 2011
    / Reply

    I like Camp Creative Group contact page that includes the budget requirements, time frame and type of project – it’s set out well I think the balance is right – not asking for too much info but just enough to encourage/maximize on the completion of the form fill.

    • Mr Matt 420,
    • September 3, 2011
    / Reply

    Awesome page Charlotte, thanks for all the effort you put in and for taking the time to share your knowledge with us all. I really enjoyed your page.

  16. / Reply

    I like these. Could you give some further information on where to go to find out how to make one of these? Tutorials? Perhaps there are already templates?

  17. / Reply

    Very nice contact forms.

    • erin,
    • November 14, 2011
    / Reply

    Wow, beautiful collection. it’s looking so much inspirational. i really thank you for your great post

  18. / Reply

    I’m designing my contact page, so these examples are very handy. I am still stuck trying to find an interesting corporate style page though. Any suggestions will be appreciated!!

  19. / Reply

    These are really captivating and well organised contact pages. I love them plus the idea that they could increase one’s revenue and establish him/her as a prominent presence on the web.

    • Ben,
    • March 9, 2012
    / Reply

    All these contact form examples and non have a captcha :-(

    • Fung,
    • June 19, 2012
    / Reply

    Nice article, thanks.

  20. / Reply

    Love this contact us page collection. Very nice.

  21. / Reply

    Contact form must be have a call for action while looking after the design. Great list!

    • Simon,
    • October 11, 2012
    / Reply

    Thanks for the article Charlotte, going to have a pinch a few of these ideas for our contact us page.

    Defo like the “Yeah this is the fun part – We’d love to talk about your project” bit. I’ll be having that :)

    Thanks
    Simon

    • Audrey,
    • October 23, 2012
    / Reply

    Content is KING!

  22. / Reply

    The all the practices are awesome, and i will try to use one from all for my blog. Thanx very much for the ideas.

  23. / Reply

    These Contact us pages are really cool and attractive ;)

  24. / Reply

    Thanks for the great ideas….just what I was looking for!

  25. / Reply

    nice contact us pages.These are really nice and seems interesting.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals