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.
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
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
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
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
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
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'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.
Carsonified
This contact page is styled in a bright cheerful orange, with retro graphics to compliment the site.
Creative People
The play of typography and use of photography makes this playful Contact page very interesting.
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.
Music City Unsigned
A casual looking Contact form styled to match the look and feel of the site.
Story Pixel
The use of textures in the text field makes this form visually interesting.
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.
Owltastic
The form in this Contact page is a good combination of white space, text field, and pastel colours.
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.
Fernando Landi
This Contact page uses the design of a notebook paper as a background. It gives a clean, simple and neat look.
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.
Yodaa
This contact form is designed on a landscaping which is a creative way of displaying the form.
Artcore
The combination of illustrations, shapes, interesting characters, and textures, have made this form quite a striking one.
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.
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.
Crush Lovely
Images of your work place can tell the culture or personality of your company. This Contact page has done just that.
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.
Blue Door Baby
Having a centralised form and a good use of white space makes this form easy and comfortable to use.
Fishing Catus
Unlike usual forms, this attractive Contact page has displayed its information neatly using warm colours, fonts and illustrations.
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.
Multiways
This Contact page consists of striking colours and an adorable mascot. The great colour scheme also appeals to its users.
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!
Cool ones buddy!
i'm designing my contact page as well, this comes pretty handy, thanks!
A great article, thanks for taking the time to compile this. I will use the tips in my next project
Interesting post! I've never really thought about the usability of contact forms.
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!
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!
This article has been shared on favSHARE.net. Go and vote it!
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.
That's cool. All of them are already in my bookmark :D
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.
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
Inspirational list indeed !
what do you think of my contact form:
http://z-indexmedia.com/contact-us.html
Great Post! Thanks :)
Very helpful, thanks
very inspirational
Great post, some fantastic designs, very inspirational, thanks
Good, Excellent tips for all website designers / owners.
PAL
Excellent article...Really helpful...Thanks for sharing...
Just to let you know that for non designers there is a web app called http://formsly.com
Quite old but still inspiring :) Great collection
Great post, Love the examples - awesome!
Thanks for sharing the article personally very helpful to me . Many many thanks.
awesome collection..... gud work... ;) keep i up... :)
oops... sorry... :-| wrong misspelled..... *keep it up.. :)
Nice collection, thanks bro :)
And I was just about that too!
Great and fantastic design samples. Very inspirational, thanks
Very nice contact forms.
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.
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.
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?
Very nice contact forms.
Wow, beautiful collection. it’s looking so much inspirational. i really thank you for your great post
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!!
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.