Anatomy of the Perfect Contact Page (With Examples)

Author 
Selene   46

Updated on February 23, 2023

Have you ever invested your time and energy reading through a website only to find there was no way to get in touch with anyone when you had a question?

Frustrating, isn’t it?

Surely, you’re not frustrating your own online visitors like that… right?

While the contact page may not be the most important page on your site, it’s still pretty damn important. In fact, it’s considered one of the four most important pages on a website along with the home, about us, and blog pages.

But there’s more to it than giving people a way to get in touch with you. Like the other important pages on your site, there are tips, tricks, and best practices you should follow when crafting your high performing contact page.

In July 2018, we introduced the new contact form feature in Thrive Architect along with four tips to help you create better contact forms.

And in March 2020, with the release of Thrive Theme Builder, we’ve made it even easier to integrate contact forms anywhere on your website. You can add a beautifully designed contact form to side bars, footers, 404 pages, or anywhere on your site.

Today, we’re going to show you even more contact page best practices along with some good and bad examples for you to study. 

More...

Make It Easy to Find

Not only should your site have a contact page, but it should also be easy to find. This might seem obvious, but it’s surprisingly not.

If your contact page is not easy to find, you're giving visitors a good reason to bounce from your site and over to one of your competitors.

To give you an example of a site that does contact page navigation well, Marketo places links to their contact page in a few easy-to-see places. 

There's a "Contact" link located on the top right of the scrolling header.

Contact link in Marketo header

Marketo's easy to find Contact link in the scrolling header.

There's also a button at the bottom of the page as well as another link in the footer. 

Marketo links to contact in footer

Marketo makes it easy to contact them with additional links in the footer.

Let's just say that if an online visitor wants to reach out, the Marketo team has made themselves easy targets.

Now the big US retail giant Target on the other hand— oh my beloved Target— where does a loyal customer like me go to get in touch with a support rep when I need help?

Is it under the “More” at the top right of the page? Nope, not there.

The top right section of a site is a common place for people to search for contact links.

Or maybe it's under the “More” at the bottom right of the page? Nope, not there either.

Another "More" in the footer to confuse the visitor.

Help? Oh yes, let’s try the “Help” link. There it is!

Ding! Ding! Ding! We found Target's contact us link!

The moral of this story? Maybe don’t send your visitors on a scavenger hunt when they need to get in touch with you.

On a related note, don't get too clever with the wording when you're creating a link to your contact page. Remember, it's all about making it as easy as possible for the people who want to give you money to contact you.

Make It User Friendly

A beautiful design is beautiful. But a beautiful design is no good if the user has no idea what it means or what to do with it.

What does your visitor need to do on a contact page? If you answered “contact you”, you are absolutely right!

Just take a look at how Basecamp designed their contact page with the user in mind. Every detail from the navigational links to support response times to clearly marked and easily identifiable contact form required input fields.

Basecamp kept the user in mind when creating their contact page.

With this easy to navigate contact page, the user is left with no question— except the question they came to ask you!

Now if you take a look at the Anakin contact page, there's no question it's beautiful.

Design company Anakin made a beautiful (but confusing) contact page.

But what the hell are you supposed to do? There are no clear text fields and nothing happens when you hover over the words on the page. Scrolling down the page is also confusing as new lines of text slide into view the exact same way. Which text is just text and which is a contact form field? It's hard to tell at first glance.

Even if it only takes a few seconds to figure out— Oh! If I click on the gray words, I can fill in my own information— that's often what makes the difference between a visitor that bounces versus a visitor that stays on your site. 

Make It Match Your Brand Personality

You probably put a lot of thought and effort into your online brand identity. Are you relaxed? Professional? Quirky? Maybe you even paid a pro designer to land you a good looking color palette.

So why not make sure your contact page also matches your branding?

Case in point, check out The Middle Finger Project’s contact page. The name alone should give you a good idea about the brand and the contact page was not excluded from the fun.

The Middle Finger Project's branding is strong, even on the contact page.

The Mad Libs-like fill in the blank form fields, the irreverent drop-down menu options, and the unique call-to-action all maintain the personality of the site and the owner.

But what about this Bored Panda contact page?

Bored Panda's contact page is... yawn.

Unless you’ve been living under a rock, you’ve probably laughed at, aww-ed at, or gasped at a Bored Panda post or video at some point in the last 20 internet years.

But for some reason, despite the clever and entertaining content, Bored Panda's contact page is super boring. It's a basic form with ZERO personality and leaves you feeling like you're sending your message into a blackhole never to be seen again.

Make It With Options

It might be tempting to throw up a form on your contact page and leave it at that.

But make sure you leave other ways for visitors to get in touch with you. Consider including an email address on your contact page and if you have one, a phone number.

Alternatively, you can make your contact form omnipresent with Thrive Theme Builder by adding the form to your footer or sidebar so it’s always easy to get in touch with you.

There are several reasons why a visitor might prefer a direct email or phone call over filling out a contact form (or vice versa). Never let technical difficulties be the reason a potential customer doesn’t contact you.

To show you how this is done, business coach David Brownlee gives users multiple ways to get in touch. They can call, email, fill out a contact form or even send snail mail.

The Brownlee Group gives visitors a number of ways to reach out.

By contrast, Skincare MLM Rodan + Fields has tons of options when it comes to directly emailing different departments. But no contact form for those who would rather not email or call.

MLM Rodan + Fields offers lots of options but no way to get in touch directly on the site.

Just remember that contact preferences can vary wildly from person to person. Some visitors feel that sending email is more personal where others find the quick and easy convenience of filling out a contact form beats opening up their inbox or pulling their phone out.

Make It So They Don't Need to Contact You

Yes, your contact page is for people to contact you. But you can save yourself and your visitors a lot of time and effort by including the most sought after information about your business on the page.

For instance, a local business showing where you are and what time you're open should cut down on phone calls.

And online businesses can help their visitors with an FAQ or links to online tutorials or blog posts about your products or services.

Here’s a look at a local shop doing their contact page right. Brentwood Social House in Austin, TX includes all the essentials: 

Hours of operations and location:

Common questions for local businesses are hours and location.

A contact form

People can easily contact Brentwood Social House without opening a new tab.

And a map. There’s even a small paragraph at the bottom of the page letting you know a little more about them (and that you can bring your dog on the patio – an essential Austin perk!).

A map showing visitors where they are and information important to their market.

This next business doesn’t have a bad contact page. In fact, the Mostly Serious contact page is mostly good. It has all the elements of an effective contact page including the form and different ways to get in touch, but offers very little information otherwise.

Mostly Serious is sure to have commonly asked questions which they could answer here.

The full-stack web design and development company provides an online form that assumes the visitor is ready to do business.

But as with any company, they are sure to have a list of frequently asked questions. Compiling even just a few short Q&As could save them a lot of time in the long run.

You Don’t Need No Stinkin’ Rules... Well, OK. Some Rules

While there’s no right or wrong when it comes to picking a color palette or the page layout, there are certain rules of thumb to follow when crafting an effective contact page.

Remember to make your contact page:

  • Easy to find (and maybe don’t get too creative with the wording!)
  • Designed with the user in mind (a.k.a. user friendly)
  • Add a pinch of personality
  • Give your visitors options
  • Give them a reason not to contact you by providing answers to common questions and links to helpful resources

If you keep these tips in mind along with your conversion goals, you’ll end up with a contact page that works well for your online business. And don’t forget to test your forms and links to ensure they work and that the page is mobile responsive!

Have you used the new contact form element in Thrive Architect yet or do you have any contact page advice of your own you'd like to share?

Let us know in the comments below! 

by Selene  August 8, 2018

46

Enjoyed this article ?

You might also like:

Leave a Comment

  • Wow! Super cool ideas! Who would have thought a contact form could communicate such personality? I’ll have to admit, I’m in love with the Middle Finger one…

    • Thanks, Martin. And I know! I’ve been following TMF Project for a bit now because I love her personality

  • Amazing ideas. Can you audit my contact page and tell me what things I can improve on that?
    I like the idea of adding a time to reply. Can I also do it? I am afraid because mine is a personal blog and I do not offer support for a product.

    • Hi Vashishtha, Thanks so much for the comment! We don’t do personal audits but if you are a Thrive member you can submit your website here for review: https://thrivethemes.com/member-website-review-submissions/ (Just be sure you’re logged in before going to the link)

      And re: a reply time. It depends on how long you think it would take for you to reply. Too long and it might discourage people from contacting you. And also, if you do put a response time, for instance 24 hours, you need to make sure you can commit to that promise.

  • Great article! I have to admit my own contact page is quite a snore & currently only offers a form. I’ll have to fix that! Thanks for the tips & great examples.

  • Hi Selene,

    I really enjoy your writing!

    As someone who is constantly working on client sites, I try to remember how important it is for visitors to get where they need to go.

    This was a helpful article and contains tips I can use. Thanks!

  • Thanks for the great post, Selene! I’ll admit that something as simple as a contact page can slip under the radar, but this was a great reminder that our branding can (and should) be reflected throughout our digital realm.

  • Wow! Super cool ideas! Who would have thought a contact form could communicate such personality? I’ll have to admit, I’m in love with the Middle Finger one…

  • OMG! This is the best information available on this topic, I have ever come across.

    Got to learn so many new things for the first time. And frankly, I was really struggling at it earlier. But now everything is good.

    All thanks to you.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >