Encourage your website visitors to get in touch with a contact us page that feels like a warm, friendly smile.
A website is one of the most important marketing and branding vehicles a business can have and it is one of the primary tools that customers and clients (present and potential) will use to either find your contact details or make contact with you. So, how easy is it for website visitors to contact you?
A contact us page is not a barrier; it’s an entry. So take inspiration from how these 40 creative contact us pages are doing it.
01. Be Friendly and Helpful
You can’t beat a big Hello. Infinum is nailing friendly and helpful with a contact page that is easy to use and easy to read. It asks, ‘What can we help you with?’ and directs users to click on either ‘Join us’ or ‘Hire us’ or email for everything else.
02. Locate Global Offices
Tool is stating it loud and proud that it has offices in Los Angeles, New York, and France. The bold typography clearly identifies its global locations with addresses, phone numbers, and links to a map.
03. Streamline the Communication Process
Production Locations’ contact us page also uses bold typography to identify the various reasons website visitors might need to contact the company. Each line is a prompt that directs the query to the right department, streamlining the communication process.
04. Personalize It With a Picture
Put a face to the name and let people know the person they’re actually contacting, just like Bert Timmermans’ Contact page. It’s personal and the layout is clear and easy to use.
05. Encourage Visitors to Say Hello
Let website visitors know you really want to hear from them and include a call to action to ‘Say Hello.’ This call to action is well suited to Hello Innovation since the word is in the name, but the company has gone that one step further by including ‘hi’ in the email address. Can you resist saying hello?
06. Include a Relevant Image
Design Museum’s contact us page features an image of an old-school telephone, which has relevance for being both a tool for communication and an object in the museum’s collection.
07. Make It Memorable
Be quirky with imagery or copy that website visitors will remember. While it won’t work for everyone’s business or brand, this image of the lads at Molamil is one that will certainly stick in your mind.
08. Be on Brand
Make sure the look and feel of the contact us page is on brand. This elegant and professional site from Boone Selections has a subtle color palette, restrained typography, and scrolling design to reflect its business of importing wine. Click here to learn how to achieve a consistency for your own brand.
09. Show People How to Find You
This Also’s contact us page features a map of Downtown Brooklyn to display the location of the office. Scroll down the page and the relevant subway lines are identified, along with the physical address and email addresses.
10. Provide a Prompt
While Deux Huit Huit doesn’t actually give any of its contact details on this page, it makes it very easy and encouraging for website users to get in touch with the company. ‘Say hello ☺’ is a friendly call to action followed by a prompt that begins ‘Dear Deux Huit Huit.’
11. Include Opening Hours
If your website is for a restaurant – such as Le Mugs – a store, a museum, or some other business that is open select hours of the day or week, include the details on the contact us page so visitors know what hours to call between and don’t turn up to closed doors.
12. Use a Statement Font
Panache has an eye-catching font for ‘Travaillons Ensemble,’ a call to action that encourages collaboration and working together. The overall aesthetic is light and well considered and the contact details include email, address, phone number, contact form, and social media links.
13. Use a Bold Color Palette
This black, white, and yellow color palette for Sponge’s contact us page is bold and dynamic. Yellow is used as a pop of color to highlight important pieces of information such as location, address, and email.
14. Incorporate a Personality-Filled Illustration
Make the contact us page more visually interesting with an illustration that speaks to the style and/or personality of the brand and website. Legwork Studio has a mixed-media illustration of a man with a wolf’s head and a handwritten testimonial coming from the phone.
15. Use a Simple Shape
Giampiero Bodini’s contact us page is simply a white rectangle that pops up over the beautiful black-and-white illustrated background. The shape mediates between the background and the contact details to make the information easy to read.
16. Include a Contact Form for Ease of Communication
A contact form makes it easy for website visitors to get in touch and it prompts users to enter the necessary information. Like QED Group it can prompt as little or as much information as required, but remember too many prompts might be a deterrent.
17. Use a One-Color Palette
The contact us page for Joseph A Avoue is elegant white type set within the fine outline of a circle upon a pink background. It’s simple, it’s classy, and it’s easy to read.
18. Be Humorous
Make visitors laugh with a contact us page that may be funny or irreverent, like Bio-Bak. ‘Insert letter combinations’ advises visitors where to type while instructions tell them how to type: ‘press some keys on your keyboard to form all kinds of works, like duck or pirate.’
19. Fill in the Blanks
Anakin’s contact-form-in-disguise asks website visitors to fill in their name, email address, and query. In fact, it’s just like any other contact form, however the text boxes aren’t visible and prompts encourage website visitors to fill in the blanks.
20. Personalize Your Global Offices
CPB Group has offices around the world and its contact us page features an iconic image of each location along with its address details, email link, and the time, temperature, and elevation of each spot. Scrolling down the page to see all the offices provides beautiful images of cities around the world.
21. Introduce the Business
Introduce website visitors to the business or brand—or yourself (if relevant)—with a friendly opening paragraph that gives a little more information that you usually see on contact us pages. Hello Monday tells visitors about its mission and encourages them to ‘reach out to say hello.’
22. Add a Film in the Background
Moodboard is a film production studio and the background of its contact us page is a moody and sophisticated close-up film of letters being typed on a typewriter
23. Use a Grid for Layout
This well laid out contact us page for Urban Influence uses a grid to organize space and information. Contact details are top left; a contact form is top right; and a map runs across the lower half of the grid.
24. Make It User-Friendly
This contact us page for Deda is very readable and user-friendly with a call to action up the top, a contact form to the right (with prompts), and contact details in speech bubbles to the right.
25. Go Step by Step
Simple As Milk’s contact us page is formatted step by step with each page, prompt, and call to action being as friendly as the one before. The tone is conversational and the company sounds as interested in the website visitor as the visitor is in the company.
26. Add Contact Shortcuts
Pre-empt the reason website visitors might be in touch and add easy links for them to click on, like White Frontier. These can either lead to a FAQ section or function as an email link that will go directly to the relevant person.
27. Integrate It With the Rest of the Website
Robby Leonardi’s website is like a computer game that users navigate by following the main character. The final screen is the Contact page and the contact form is completely integrated within the design of the whole website.
28. Add a Team Photo
Show off the team with a photo, just like Online Department’s contact us page. This makes the communication and enquiry process that much more personal for website visitors.
29. Use Negative Space
Like Design Museum, Beta Tataki has included a picture of a telephone on the background of her Contact page. The layout takes advantage of negative space (or white space) with text laid over a blank area of the image so as not to inhibit readability.
30. Create an Image with Typography
Pauline Osmont creates a striking black, gold, and silver image with the call to action ‘Contact Me.’ Scroll down the page and the contact form is well laid out and easy to read.
31. Hold up a Sign
Like Mark Jaworkski Studios, consider integrating a picture of yourself or a team member as if holding up a sign or piece of paper with the contact details.
32. Show Off Your Social Media Links
This Retro Portfolio WordPress theme has a bold retro font to suit its name and styling. It has lots of obvious links to the various social media profiles and ‘I am social’ is an approachable touch.
33. Reference Traditional Forms of Communication
The days of writing letters and postcards are, unfortunately, getting further behind us. But that’s no reason not to reference those days in the style and imagery of the contact us page. Lionway’s page features three postcards with a contact form as if the website visitor is writing a postcard.
34. Make the Copy Cheeky
Swedish design studio Snask show’s a little cheeky humor in its contact us page with lines such as ‘For filth, candy or gossip call…’ and ‘Walk until the pink sign,’ as well as playful touches that address the reason for contact: ‘Re-branding your airline?’
35. Show Some Personality
Design studio Resn is equally cheeky, however, uses imagery rather than copy to express that irreverence on its contact us page. Team members parade along the bottom of the screen with animal heads and 1980s toys and computers.
36. Design an Infographic
Communicate your contact details to website visitors with an infographic, just like Quicksprout. Outline how best to get in touch or a flow chart of communication, but just make sure it’s clear to read, relevant, and accurate. Click here to learn how to make infographics simply with Canva.
37. Animate the Team
Create animated or cartoon-like images of the team members. Melonfree has The Designer and The Developer to familiarize website visitors with who they are.
38. Use a Transparent Shape
Add a transparency to a shape, like Indofolio’s Contact page, so that contact details can be read without disrupting the visual effect or mood of the background image.
39. Give the Freehand Effect
Mario Petrone’s Contact page has the visual effect of being drawn freehand. The pink and red copy and drawings on grid paper have a personal and playful look and feel.
40. Just Use a Drop-Down Box
Spokes Pedicabs’ contact us page isn’t a page at all. Simply click on the top-right link and the orange box drops down with a big, bold ‘contact us’ and all the necessary details.
Feel like sharing?
— Canva (@canva) January 11, 2016
The contact us page should be one of the most user-friendly pages on your website. A great way to test its usability is to ask friends, family, and colleagues to give it a trial run. Ask them for feedback on:
- How quickly they can find the link to the contact page?
- How easily they can read the contact details on the contact page?
- Does the contact form and all included links work?
- Is the phone number, email address, location, and opening hours correct? One digit wrong and you could lose potential business.
- Finally, does the look and feel of the contact us page actually make them want to contact you.
It should, because that’s what it’s there for.