10 Best Contact Page Design Examples, Tips & Tricks

10 Best Contact Page Design Examples, Tips & Tricks
Article by DesignRush DesignRush
Last Updated: March 22, 2023

Many brands spend months on end making sure that their website looks clean, professional, and delivers a seamless experience. Their design is engaging, their color scheme is on-brand and captivating, and they make sure to use white space to highlight the most important elements on every page. 

But do you know what web page often looks outdated, as if it's stuck back in the old days of the Internet? It is the “Contact Us” page!

We have prepared actionable tips, tricks, and 10 best contact page design examples to help you create a highly-converting contact website page that is easy for your users to find and fill out. 

Agency description goes here
Agency description goes here
Agency description goes here

Top 10 Tips to Design an Effective Contact Us Web Page

1. Include Your Contact Information at the Top and Bottom of a Web Page

Don’t make your visitors hunt for the contact page. In fact, it is a great idea to place your contact information in the footer of every page on your site. That way, if a visitor suddenly decides that he or she needs additional information, they can get in touch with you immediately without having to spend extra time looking for your contact details.

Hubspot 

best contact page design
[source:hubspot.com]

At the very least, try to keep the most basic contact information -- such as your email address and phone number -- at the top and bottom of every page. The last thing you want, especially if you’re a new business, is to lose potential customers because it took them too long to find a way to reach out to you and they just gave up. 

Hubspot isn’t a new business, but they send a clear message that your correspondence is important to them. The very first level of menu navigation is the Contact Us button at the top of the page. Not only it’s convenient, but it also subliminally tells people that they are looking forward to that contact.

2. Try A Simple Contact Form

Mostly Serious

Mostly Serious contact website page
[source:mostlyserious.io]

Most companies’ websites don’t need more than three to four fields in the contact form. Anything more than that is a waste of your visitors’ time and patience. Not only that, but they might start getting frustrated if they are required to fill out a myriad of fields to only have a few simple questions answered.

The idea of simple forms succeeding is also backed by statistics – if you have three fields in your contact form, the optimal conversion rate is around 25 percent. If you have 3-5 fields, conversion rate drops to 20 percent, and 15 percent for six or more fields. The KISS method works best in contact page design – Keep It Short and Simple. Make it as easy as possible for visitors to get in touch with you.

Expedia

best contact us pages
[source:expedia.com]

Need a real-life example to prove it? Expedia eliminated just ONE field, but this resulted in conversions that created a $12 million profit. If you are wondering which one they eliminated – it was the company name field. Yes, only that. And the field that isn’t really crucial to businesses, anyways.

But to see a more, shall we say, aesthetically pleasing simple contact form in action, check out Mostly Serious. The clean, organized form matches their minimal aesthetic and creates an easy communication experience for users. 

3. Add A Call To Action To Your Contact Us Page

Make sure your visitors have an easy time getting in touch with you and provide them with an intuitive experience. Put everything out there so they can see it within the first few seconds of landing on your website, and then use calls to action to help guide them.

Grain & Mortar

best contact page design example
[source:grainandmortar.com]

Give your visitors clear and concise directions so that they don’t waste a lot of time thinking about what to do next -- just like Grain & Mortar does on their contact page. Their CTA is simple – tell us about your business. However, while Grain & Mortar is a great positive example of a CTA within a contact web page, it’s also a negative example for their getting in touch section. They ask for people’s phone number, and here’s why that’s a bad idea.

If people have to share their business phone number and wait for a call, they will often just leave the contact us page. In fact, 37 percent of people are found to abandon the contact us page when they are prompted for their telephone number. When Expedia put the word optional next to the phone number field, they doubled their conversion rate – from 42.6 percent to 80 percent!

4. Encourage Visitors to Express Themselves Through Your Contact Page

Consumers like to know that their needs and problems are being listened to and that brands will take action to solve them. A professional customer service is an excellent tool that can persuade prospects to choose your business over your competitors.

Use your contact page to connect with your prospects on a deep, emotional level. Ask them about their problems or how they’re feeling. That way, not only that you show your customers that you care about them, but you also make it easy for your customer support team to handle their problems with true care and dedication.

Built By Buffalo

best contact page web design
[source:builtbybuffalo.com]

A contact page that encourages visitors to display their feelings or thoughts more candidly can be an excellent way to tell if you’re dealing with a frustrated or angry customer. You'll also you’ll have a better chance of giving them the support they need.

And if you manage to do all that and present your contact page with motion graphics that will engage users and portray a wonderful web design, then you are winning the Contact Us challenge -- just like Buffalo does.

Their contact page also incorporates the well-thought elements of the About Us page because they want their customers to get to know them and form lasting impressions. Thus, why they added cool pictures of their studio under the Map section.

Get free proposals from these top web design agencies!
SHARE YOUR PROJECT HERE

5. Reduce Spam Messages

Far too often we’ve seen businesses that only do the bare minimum when it comes to their “Contact Us” page. Again, we’re talking about the part of your website that can open the gates to communication with your prospects. You should do more than just throwing a contact form.

QuickSprout

best contact page design inspiration
[source:quicksprout.com]

That is why this is an excellent example from QuickSprout. It’s more interesting, engaging, and it leaves a better impression than a simple contact form.

QuickSprout is world-famous and likely has a packed inbox at all times. But because they still want to maintain great response rates, they created an infographic guide. That’s a great solution (or an attempt at one) because the engaging design captivates visitors and encourages them to read while still empowering the brand to filter mail before it is even sent.

QuickSprout clearly outlines the conditions you have to meet in order to send them an email. There is a list of topics that won’t be answered, and there is a concise instruction on what type of email you can send – just one paragraph.

It’s not only reducing spam without the dreaded CAPTCHA, it’s a smart way to set further expectations. You can’t get mad at QuickSprout if they don’t respond to you.

6. Offer Different Communication Options On Your Contact Page

Achieve3000

best contact page website design
[source:achieve3000.com]

Every Contact Us form is there to, well, achieve contact with the customer. However, sometimes too simple a form won’t cut it. And when you have a business that is contacted for many different reasons, you might as well separate them on your contact page. For example, Achieve3000 has separated their Contact Us web page into the three most common reasons people get in touch with them.

The first reason is to request a demo of their product, which means that it’s meant for potential new customers. The second type is to manage incoming questions they receive that pertain to sales.

Last, but certainly not lease, is their customer service section. All three elements are in the same line, and layout doesn’t single out any segment. That way Achieve3000 is clear that it’s equally important to them to reach out to new consumers, respond to all inquiries, and provide a great customer support to all who need it.

7. Don't Forget Your Social Media Channels

Most of your website’s visitors will prefer to ask their questions in private and keep it that way. But, we’re living in a social age. More and more people find it easier to connect with brands on social media rather than call or send an email. So, don’t forget to link to your social media channels on your contact page.

Neil Patel

contact us page web design
[source:neilpatel.com]

Also, make sure you provide every other piece of contact information that users might search for or need. Even though it's 2018 and almost all of us are plugged in, some people prefer to pick up the phone, call a company, and have their problems fixed quickly, while others are more anxious and would rather fill out a form than talk with a stranger.

So why does Neil Patel’s contact page rock? Well, it’s arguably the most simple and best contact page design we have on this entire list, yet it contains everything users need in a contact form, while every unnecessary element is just omitted. For example, there are only three fields with creative copy and one drop-down menu. And, if you remember, the most optimal number of fields for a maximum conversion rate is three. The drop-down menu also allows Neil to segment the messages and respond accordingly. 

Finally, Neil Patel paid special attention to those oh-so-important social media icons because he knows his audience. By default, his target audience is filled with digital marketing professionals who likely live and breathe social media.

8. Be Creative On Your Contact Website Page

Yeah, we know that this tip is easier said than done, but it’s really all that creating an effective contact web page comes down to -- something engaging and creative that will capture user’s attention and persuade them to get in touch with you.

Contact Us Page Creative Design
[source:letstravelsomewhere.com]

So how can you get creative? Express your brand through recognizable colors, on-brand messaging and unique visuals. This will further your brand identity, put users at ease, and ultimately increase your authenticity and trustworthiness. And that trust inspires visitors to convert, complete a purchase, or contact a brand. 

For example, online travel guide site Let's Travel Somewhere capitalized on their mission -- to inspire people to let go and see the world -- by replicating a postcard. The form is minimal and easy to comprehend, but still represented the purpose of the website. Delicate trim and a simple stamp frame the form itself. Meanwhile, the bottom of the page is permeated with calls to action encouraging visitors to share the site with their friends or inspiring them to explore the many travel guides. 

9. Try Using Chatbots Instead Of Traditional Contact Forms

You have probably encountered a bot or two in your web surfing so far, and perhaps you even chatted with some without realizing they are bots. But, chatbots are here to stay and they are changing the customer service industry already.

Brand Embassy

contact us website page best practice
[source:brandembassy.com]

There are several reasons why a chatbot is a good solution. First off, it’s a new technology. Not every website has a chatbot, so those that do appear modern, cool, and intrigue people interested in their services or brand. Plus, when people know they are interacting with a chatbot, they may be more willing to test is and engage with company’s services, even if it’s just the chatbot that piqued their interest.

But, you might be asking, what is so great about Brand Embassy’s contact us page? Well… They don’t really have one! They literally don’t need it because all you have to do to contact them is begin a conversation with a chatbot in the bottom right corner of the homepage (although you can find a slightly more formal contact page that encourages users to interact with the chatbot).

Brand Embassy serves as a great example of how to funnel a user's focus on your tools and services through other consumer-centric ways. In their case, incorporating a clever chatbot tool has the possibility of improving customer services while simultaneously reflecting the business itself. 

10. Collect Emails From Your Contact Us Page

Glossier

contact us page design
[source:glossier.com]

Buzzy Millennial-centric cosmetics brand Glossier technically has a contact page, but there is no form in sight. Instead, the startup directs visitors to relevant email addresses, telling users what those inboxes will help them with. In addition, they encourage users to visit their robust FAQ page, which aims to alleviate a lot of customer service work. 

But most notably, Glossier prioritizes building their email marketing list on their Contact Us page. Dry, quippy copy encourages the younger demographic to enter their email, which builds Glossier's fan base and brand reach through their equally minimal newsletter campaigns. 

Want to learn more about increasing conversion rate through seamless web design?
GET INSPIRED

How To Create The Best "Contact Us" Page For Your Brand

As we have seen in all the examples above, all these businesses have created contact pages that absolutely complement their brand identities and fulfill their needs. Now, every tip above may not resonate with your brand. You should pick the ones that do and implement them in your design - or hire one of the best digital marketing consultants to help you with this.

But to make the contact page creation process even easier, here are eight actionable hacks that will bring results and ensure your contact page stands out and converts more visitors into consumers.

1. Make The "Contact Us" Page Visible

By that, we mean that it should be clearly placed in the main menu hierarchy. The goal is to get the users to contact you, so make sure that it’s easy to do. It’s that simple. If you make it problematic for them, just remember, 44 percent of website visitors leave if they can’t find contact information.

2. Don’t Use Default Button Text

The trick is to be creative. Try to use relevant text that won’t intimidate the visitors. “Get in Touch” is always better than a generic "Submit." In fact, by using the "Submit" call to action, you could see an instant 3 percent decrease in conversion rate. Even the familiar CTA of "Click Here" has a 30 percent better conversion rate than "Submit."

3. Use A Narrow Layout For Labels

According to the comparative eBay and Yahoo study, when there is a narrower gap between two fields, users pay more attention. This is conducted with eye-tracking technology. In this particular example, people paid 30 to 40 seconds more to eBay’s forms than to Yahoo’s.

4. Test Your Contact Page

Do a comparative website page testing and see for yourself what works better. Is it the size of the buttons? The layout of the contact form? Perhaps it’s the website copy? Test a single parameter to find the right combination for your most successful contact us page.

5. People Read In An F-Pattern

We read from left to right. Our brains are hardwired to pay more attention to the left-aligned content because that is where we start our reading journey every time. Also, that is the fact why labels aligned to the left are more natural to our brains.

6. Experiment With Titles

Changing just one title on your page can bring you more than a 100 percent jump in conversion rates. Also, don’t be afraid to change the actual form and design of your titles, as this can also bring positive conversion rates.

7. A Thank You Goes a Long Way

Once visitors submit a contact form, you should redirect them to a Thank You page. This is a great way to track more specific metrics, such as how many times users have fully submitted the form. Also, you can further explain how (and when) you will contact them back now that they have sent you a message.

8. Use Creative Copy

Don’t forget that words have the power to move people. When you have a Contact Us page, that means that you need to move them without boring or overwhelming them with too much content. This allows you as a brand the chance to get personal and let users know that, to you, they are a valued customer. To get started, avoid generic phrases and use welcoming, friendly or personal text instead. 

The Best Advice For Creating A Contact Web Page

Make it about your business. Even if you use all the right tips above, you may end up with a page that clearly jumps out of the bandwagon. Use the same style guides, color schemes and let the page breathe with plenty of negative space. Condense your contact form labels, and don’t use too many of them. More personal questions, like asking for a phone number, address, and such, just decrease the conversion rate.

Avoid drop-down menus if you can, because people aren’t really fond of them. Adding one drop-down menu actually decreases the click-through rate -- if you have one drop-down menu, the total conversion rate is around 15 percent, which is quite low. Incorporating more of them just decreases conversions even further.

All in all – do your brand justice, follow the tips above that are applicable to your business, test various elements and features, then stick to the ones that work. That’s the surefire way to create a Contact Us page that is sure to stand out and impress visitors. We would love to see your results, so don’t shy away from sharing them with us in the comments below.

If you need a helping hand with your Contact Us page, you can always search through DesignRush's Agency Listing section. You'll find a robust list of great website design and development companies who can create a highly-converting digital destination.

Best Contact Us Pages Bottom Line

We have seen great examples of Contact Us pages that have incorporated the best tips needed for success and listed the top strategies that are shown to create a highly-converting and useful contact web page.

Don't forget, an online presence is more like a marketing tool, informing customers about your brand in a digital space. To continue reaching potential consumers, you will need to keep up with the times and provide a modern, user-friendly website – including a Contact Us page.

Outdated websites with content that’s not optimized and a slow loading speed can increase your bounce rate and penalize your company in search rankings and discoverability. To learn how to optimize your website and rank higher, check out our go-to guide for SEO best practices.

Plus, in addition to a formal contact page, make sure that you include all contact info either on the header or the footer so that you can help people get in touch at all times – even without visiting the landing page. The information has to be accessible, especially if you are a new business that’s trying to break out of the shadows and evolve.  

Our design experts recognize the most innovative and creative designs from across the globe. Visit Design Awards to see the:

Our team also ranks agencies worldwide to help you find a qualified agency partner. Visit our Agency Directory for the top Logo Design Companies, as well as:

Get a chance to become the next Design Award winner.
SUBMIT YOUR DESIGN
Subscribe to Spotlight Newsletter
Subscribe to our newsletter to get the latest industry news