The contact us page is the last page between a company and a client. But last does not mean ultimate; many people can close this page after viewing it. It is often underestimated as a client-company bridge. Some say this page is more important than the rest.
Just think about it: every business needs a contact page, but only some of them pay attention to their meaning. It’s a pity, but the last thing developers tend to build is a contact page, making it the final page of the sales funnel.
Despite this cruel practice, even the name “Contact Us” can be a call to action. The contact page is probably the first thing new visitors/clients would like to see in order to buy something. The more attractive this page is, the more chances users will be interested in cooperation.
Today, we’ll be discussing the contact us page design, tips and tricks, ideas, and authentic contact page examples.
Why Do Contact Us Pages Matter?
The main task of the contact us pages is to turn your visitors into clients. Users should get confirmation that their choice was correct. Although there is no one-design-fits-all rule for contact information templates, the contact page should:
- be attractive to hook the visitors’ attention;
- facilitate client-company interaction;
- track the customer’s requests and details and contribute to SEO;
- provide visitors with the opportunity to leave comments on it;
- have a contact form, which is likely to improve snippet visibility and make a site more visible to Google;
- emphasize how excellent the company is.
Contact us page obvious practices
It is evident that contact pages should be:
- functional 一 all fields should be active;
- informative 一 should contain all contact data (including alternative contacts);
- visually appealing 一 it should not contradict the general website style;
- well-written 一 correct grammar, punctuation are must-haves;
- user-friendly 一 should present welcoming phrases or anything else that can win over users;
- individualistic 一 should contain data like corporate address, team member photos and emails, etc.;
- intuitively understandable 一 the “Submit” button should be visible and well-clickable on all browsers and devices;
- responsive 一 should be correctly displayed in all browsers on all devices.
Must-Have Contact Page Elements
Apparently, a contact form, email and phone numbers, links to social media, and Google Maps are the must-have elements. Let’s have a closer look at these contact page examples and contact information forms.
The contact form is the essential element of the contact us page design. Based on the TopSpot’s design, I can outline the following tips:
- too many fields for contact details are likely to intimidate users (e-mail, phone, name, and a message are enough);
- place it at the most visible place to avoid a client scrolling the page;
- users dislike long contact forms because they have to type a lot;
- design the contact us form using bright colors;
- a sliding sidebar with the contact form is more functional than the pop-up (users can activate the sliding sidebar at any time with just one button, but the pop-up disappears after the user clicks).
Email and phone numbers
Contact info is the main reason a business creates a contact page. Therefore, the main design features are:
- Some people like emails, and some like phones. It never hurts to add all possible communication means.
- Make email clickable to save the users time and not require additional actions.
- A phone number is a step toward a confidential relationship between your visitors and you. This contact detail shows more trust and willingness to negotiate.
Links to social media
Social media often becomes the main communication channel due to quick response.
Usually, the advice in the social media links design covers the following:
- It’s worth making links to social media pages easily reachable. Website visitors will follow them, thus, maximizing your online presence.
- Make the design of social media buttons eye-catching, but not too annoying, large in size, and place them at the appropriate location.
Google maps make your website look more advanced, and this element is crucial for businesses having offices.
Use specific elements, i.e., restaurant business sites and beauty salons can include a schedule on their contact page. Do not neglect confirmation messages. A simple phrase like “Your message was sent successfully” is enough to let visitors know their messages will be received.
Contact Us Page Design Trends
Here I picked up ten trendy contact us pages. I hope you will find these best contact pages inspirational and get interesting contact ideas to try out.
The moving company Rockstar Pro Movers shows a holistic approach to the brand concept. The company identifies its location through Google Maps and photos. It also implements attractive and stylish images throughout the site and on the contact page.
It is good to brighten up the page and use Google Maps to show the entire street in detail. So the page has all the information you need if you can’t visit their office.
#2. Haim Benisty
First of all, I’d like to appreciate the Haim Benisty branding agency’s site design. The contact form envisages only three necessary fields. Sometimes simplicity is a perfect choice. Don’t overload the page by adding all the data you have. The page is clean, the available actions are displayed clearly, and the limited amount of content is easy to read.
#3. Dina Deykun
The contact page of the wedding photographer Dina Deykun looks funny only at a glance. This web portfolio contact page is fun and creative, and it includes wedding photos to show her professionalism. Besides, there are hidden links to other site pages.
There is much information on this page, but nothing extra. The page asks for the user’s name, phone, and email and proposes to arrange the event. A few fields to fill out is a great technique to attract users. Besides, you can always leave a message.
#4. Outdoor Dynamics
The hotel’s site is full of colorful photos to increase its popularity with travelers and resonate with the site’s target audience. This page is closely related to the brand. Subtle illustrations make the design compatible with the rest of the site pages.
This is an example of a brandy, stylish and versatile contact page. The well-animated page respects the classic forms of communication, including links to social networks.
The developer group’s contact page has a very informal atmosphere, but the contact us page design is unusual. Customers will remember it and distinguish the company from competitors. The invitation to this page is presented on the site’s main page. This call to action means, “How can we grow your health?” It’s a good call for contact pages. It is ideally combined with the messengers.
This page of the shipping company is straight to the point mixing business and pleasure. Just look, you can contact the company and order various shipping services. All contact information is also present in the header.
The texts (including benefits of cooperation) are very relevant. Besides, there are all contact details, including timing. All in all, the contact us page design is excellent. The contact page contains a search form, the possibility to add a file, a Google Map, and posts on shipping legislation topics.
Look at the creative approach of this digital company. Pay attention to the stylish contact form, similar to a postcard. The contact page is personalized, and it presents the company’s logo.
#8. Allison Winter
Although this contacts us page is one of the Awwwards nominees, this simple approach is not traditional, especially for UX designers. Instead of presenting a form to submit, the page automatically opens your computer’s email client. Users see the call to action and can contact via email only. Sometimes such a basic contact us page design looks ambiguous. Sometimes it isn’t delightful, and I’d like to close this form. In general, simplicity and clarity are decisive, but do not forget to test all the functionality 一 it’s like a fly in the ointment. Most importantly, do not forget to add links to social networks for those who want to chat with you.
#9. Vesper Group
It is an excellent example of a property management company’s contact page that is both professional and informative. This page is very cozy and calls for direct communication. It shows a serious company. How to arrange all the contact info on the first screen? Specify contacts on the left and the center, and place the contact form on the right. What could be improved here? Probably, nothing.
#10. Liquid Crystal
Digital agencies are innovation leaders, as proved by this unusual contact page. First, the client chooses the subject of conversation. Second, the company moves from words to deeds: no extra words, only constructive dialogue.
To-Do and Not-To-Do List: Tips and Tricks
The main problems, aka don’ts, are as follows:
- There is no contact page at all, contrary to presenting contact information in the header.
- Incomplete contact information is presented (only phones or only email). More communication channels mean more chances for clients to stick.
- The contact information is invalid or irrelevant; there are errors in numbers, addresses, etc.
- No call-to-action message.
How to increase the impact of the contact page:
- The contact page should be available in one click to make users see all the communication channels.
- The contact form is preferable to email to avoid spam.
- Do not overload the page with visuals; present a short text to encourage clients to hit you up.
- It’s good to include authentic photos of your team and office to let others understand the corporate culture.
- Make the page more visible to Google by respecting micro-markup standards.
- Present key information about the company because many users only visit the contact page.
- Provide a Google Map and instructions on how to get to your office, panoramic photos, and maybe even parking details.
- Show the team members’ contacts, i.e., John Doe, phone: 123-456-789.
- Sort out address data and contacts for different regions and cities.
- Ask users to specify a convenient time for a callback.
- Legal information for partners makes it possible to send documents (if necessary).
You see, how the contact us page designs vary, so every site needs its own. Believe it or not, you can build contact pages from scratch. It looks complicated, I know, but there is an easy way to create and configure them using plugins, like JetFormBuilder.
A contact us page is one more way to show customers how important they are. But my analysis shows that even so, high-quality resources do not pay much attention to the contact page design. They look mainly not as attractive as other pages.
The design of the contact page aims to convert by clearly and effectively providing methods of contacting the company. Make the contact page understandable and straightforward for users to get information conveniently. Therefore, test your forms for bugs and try to look at them from where the client stands — every detail matters.