The Anatomy of a Perfect Contact Page

If you are designing a website one of the first links you will think of while designing the navigation area is the Contact Page (alongside the About Page because, why not). True enough, the Contact Page has earned its spot as one of the staple pages a website should have, after all, it is probably one of, if not the best, page that directly interacts with your visitors. From this single page that even the most advanced Internet Marketers forget to optimize, your users can be able to directly reach you, and might even make a purchase.

While direct interaction with users might not be that big of a deal in tech startup companies, it is ultra effective with brick and mortar businesses that rely on clients actually calling them, or going into their businesses places to be recorded as a conversion, and the contact page is important for that.

True enough, realizing the importance of contact pages allows your brand, or  your client’s to turn a visitor into a possible customer. And if  your contact page fails to persuade them to click on that send button, then that conversion will probably be left in the ashes of your dreams, forever.

That is why, it is almost mandatory to be interesting and persuasive enough to encourage that user to click that send button especially for inquiries, and your role as a designer is to bridge that almost insurmountable gap between the website, and the visitors.

This article will help you do just that. We will going to delve into the anatomy of a perfect contact page and discuss how you can achieve that sweet spot. We will be discussing the things you need to include, and how you should do them in the hopes that you will, in time, design that Contact Page your clients and users will love.

The Contact Page Header

Web design has taught us so much about headers, and we often associate them with the navigation area, or that big image with your headline and tag line floating above the call to action button. While that is technically a header, that is not what we will be talking about in this part. In a contact page, we speak of a header as a copy element, meaning it’s a headline you would wish to include in your page. Perfect contact pages usually employ effective copy writing as well, since you are providing no gratifications for the user for actually reaching you. In a contact page, it is you who needs them to contact you (if that makes any sense), not the other way around. Having said that, there is no motivation (aside from product inquiry) that is strong enough to pull them into taking a few minutes off their time and fill out those forms. And it will continue to be that way unless you use effective copy writing, and this is where you need to talk to your copywriter, or indicate in the design that you need some witty welcome message or an enticing header copy.

For this, you would need to consider a few things:

You don’t need to summarize what the contact page is about

You might have learned that the headline or title is just a sentence that summarizes the page. While that may be the case in news writing, remember that this is a web page, and you only have a few seconds at the very least, to tell your visitors to “Hey! Come take a look at this” and you’d probably never get that chance again. That is why, in this article, I am telling you scrap that a-headline-should-summarize-the-page rule.

For example, saying that “This is the contact page where you can reach us.” is kind of the lamest thing ever, probably since The Phantom Menace. Spice things up, and generate some buzz to hypnotize your user so that he or she fills those contact forms out.  Make the writing style a mix of serious but catchy. Like you’re trying to ask a girl out, or asking your boss to give you a huge raise. Play with your words.

Make the Difference Clear

This typography fundamental will resonate again. Make sure that the user clearly sees the difference between the headline and the other elements of the page. The H1 (or the main headline) should be clearly discerned against the H2  (or the tagline) and the paragraphs. This is to draw a line for your user as to which elements are to be treated first, being the headlines as a priority.

There are lots of tips that will teach you how to create more effective headlines, but I suggest reading this one.

1

Remember that your visitors are human beings, and you should always gratify them one way or another. So as much as possible, you would have to start conveying emotion to them through the design. Give them what they like, and allow that spark to light up as early as the header.

Credibility Block

Download-Testimonial-Box-Templates-Free

Trust is one of the best foundation of a healthy relationship, be it in the physical world, or in the digital one. And having the message “user gratification” stamped all over this article, it is important for your visitors to trust you. Why would they talk to you in the first place?  And this is where you need to show off. As much as you could, it is best to tell your visitors that you are a bunch of nice people and they could talk to you. But how do you do that? Here are a few examples:

Show Off Your Skills

Boast! It’s all right. Write your skills, talents, and experience in a manner that reflects your personality. If you are a company, list out the things you can do, and the things you did in a way that it shows your core values. Giving your users a stand on what you think about the world is not a bad thing to do. In fact, giving them the idea about the abstract values on which your company or personality stand on is a sign that you are trusting them, and in turn, they will trust you.

What You’re Good At

List a few things that you specialize in. Be honest, and enumerate the things that you can really do. And alongside them, are things you cannot do. Doing this will give your visitor a first-hand idea about who you are, and won’t set his or her hopes up too high. Remember G-R-A-T-I-F-I-C-A-T-I-O-N and giving your visitors some idea on what could they expect often leads to positive things.

But the most important aspect of this is that you also let them know what you can’t do. Give them your weaknesses so that they wouldn’t expect you to to these things beforehand, and if they really want you or your brand then it’s a good sign. Otherwise, it’s not a wasted conversion since the kind of customers you would want will be filtered enough that you could work well in most of them.

Include Past Clients

Most of you would probably think that testimonials are only for the home page. Well, they could also be in the contact page. Since validation is an important aspect of any purchase or conversion, client testimonials are a huge plus. It tells the people who are contacting you, what kind of person you are. And this is great because your visitors see these testimonials as proof that you’ve worked with real people who liked (or hated) you enough that they actually took some more time off theirs to write a review. Just make sure you don’t put too much soup in the bowl that it looks like a political propaganda. Things that sound too good to be true, are often not true.

Branding

08-brand-book-9-logo-variations-sizing

It seems obvious but having a consistent branding message in your pages is a great way to make your Contact Page perfect (or at least close to perfect).  And although this is important, some designers still forget to ensure brand consistency in Contact Pages because they seem to just have a contact form and a submit button. But remember that in the Contact Page, you are sending a message to the visitor to interact with it, and if your visitor says “Who am I talking to again?” then you’re cooked.

Think of this, your visitors might have six or seven tabs open on their browsers. Chances are, they will forget who the heck you are and would be too lazy to go back at the home page and read again so they’ll just close you out. That hurts, but it’s true. So as much as possible, make your branding appear in the page so that at a glance, they’ll know it’s you.

Here are a few tips we can start with:

Color

Color is the voice of the design. They speak much about who you are as a brand, and establishing a specific color scheme sends a stimulating message to the subconscious of your visitor. That is why you would need to choose specific shades in your color brand’s color palette to encourage the visitor to fill out contact forms. Choose the color that associates with movement, and gives a sense of urgency and need. All of this is in the interest of making the design look good too. Remember that you have to fill both aesthetics, and function with this one so pick them carefully.

Fonts

With Google Fonts, typefaces can now easily be integrated into the stylesheet and be universal. But still, there are times where designers don’t put focus on the font hierarchy. Fonts should convey a message’s importance. Headers should be thick and big enough to catch attention, the paragraph fonts should be in an enough size between 10 and 16 px, and are thick enough to be read in the body of the web page. So you need to give more attention to that as well.

Tone Consistency

Tone is the overall presentation of the page, and dictates what type of website one really is. Using a specific tone in your copy, colors, design element placements, and calls to action is important. You have to maintain a consistent tone or style in the website, contact page included. So if you’re using a more serious approach head on, then it is best to keep that straight face up to the contact page. But if you’re for the happy, bouncy, and bright tone, then it is best to just stick with it.

Contact Us

6-all-done

The Contact area is probably the biggest fish in this haul as it showcases the main function of the web page. It is mainly dominated by the contact form, but also includes several design elements like Social Media channels, Google Maps, and Basic Contact Information.

Let’s dig right through these individual elements:

Main Contact Form

The Main Contact Form is the heart and soul of this design area. Without it, a Contact Page will just be called, well… uh… a page. Pretty bare, I know. That is why you should need to focus on this one as well. Contact forms should be built towards efficiency because most users generally don’t have much time filling out tons of boxes and it gets pretty frustrating for them. That is why most design blogs recommend to make them short as possible. And while that is true in some cases, there are a few exceptions.

Yesterday, I joined a webinar on How to Conduct Solid, Data Driven Conversion Research. The Speaker Michael Aagaard from UnBounce told the story about how did some changes on the contact form of a page he was optimizing. The client, which ran an events reservation company, had a long contact form with various data asked, and he knew that with these type of elements, the shorter the better. So what he did was delete the “unnecessary” forms and was left to the basic ones. After A/B Testing, he found a significant drop in conversions and he did not expect this to happen. According to what he knows, the shorter the contact forms are, the better. But he was wrong.

Turns out, the ones that he removed actually had more interaction that the basic ones. This is because they are essential for the business. So what he did next was to find out what forms had more interaction and he retained them. He put the top performing part of the form, which is a drop down menu, to the top and did A/B tests again. The results were an increase in conversion.

Then Michael started to add some words to the copy of the low-performing forms. He indicated why and when are they useful for the company to help the user. And again, he did some A/B tests and found an increase in the conversion rates.

At the end, Michael reordered the arrangement of the fields in the contact forms, added a few copy and found the success he wanted to show off to his bosses.

What is the moral of the story? Well it is that fewer is not always better. Contact forms are user-related meaning the user dictates what are essential or not. Some forms are effective with just the basics and that is all right because of the type of business they run. But some other ones rely on more detailed information being extracted for the user, and this often leads to better results. So the tip for this one is this: coordinate with the main guy doing the marketing, and talk to him about what kind of business they are running, and if it is possible to tailor fit the forms in the Contact Page for the niche being filled. Also, be open to the fact that the arrangement of your text fields can change, and they need to be changed accordingly.

Social Media Channels

Social media channels are also a great way of getting your clients connected to you. Putting your main social channels like Facebook, Twitter, Google Plus, and/or LinkedIn will help your users see you as a  brand willing to connect with their customers. Plus, you would be able to monitor which kind of clients or visitors you have using social media. Doing so will give your marketing team a good idea of what to do to satisfy them. This is also a great way to gain followers, or Facebook likes which can help you in the future (especially with social media marketing).

Maps

Maps are important, especially to Brick and Mortar Businesses, which would help them be found. This gives your user a feeling that you’re always ready to be visited, hence they award you with the same trust. So including them in the contact form is always a good idea.

Basic Contact Information

Including the Address of your Business along with an email, and a phone number is one good way to roll it out. Through this, your users can easily link to you via phone, or via personal visitation. It also sends an important message to them that you are always ready to pick up the phone for their immediate concerns. If you don’t have a phone but you want to enable a toll-free hotline, Phone.Com is a good service to use. Just remember that you have to indicate that it’s toll-free for them to be able to call you.

Success Message

codeigniter-send-email-success-message

The success message comes after your user interacted with the contact form. Now, since it’s something the user see or interact with after the sending of the form, most people see it as unimportant. But it is equally important as the header copy because it gives a sense of success for your user thus gratifying him or her for the actions taken.

Again, here is where copy writing comes to play. Like in the header section, you would have to congratulate the user for completing the actions you wanted him or her to do, in a witty and creative manner. For this, you may need to consult with the copy writer in order to come up with a catchy and satisfying success message.

More Tips

  1. Place a bounding box around the forms. With the help of a bounding box around your forms, you can make them easily seen when scanning pages. This also helps to draw a line to which parts and elements of the page are interactive for the user. Doing this will help you enrich the user experience in your Contact Page
  2. Guide Your Inputs. It is always nice to add some guides to the fields. You can use some data validations in case your user enters the wrong set of information. Or you can even add some guides as to how many characters the passwords need to have.
  3. Add a Privacy Statement. Make it a point to assure your user that you will not, and never, share the information of your clients. This will help you gain their trust as well.
  4. Add progress bars. Add progress bars in your contact forms to show how much the user had gone through with it. It will help them know how long the process will take so it’s a bonus too.
  5. Keep the forms at a right size. Don’t over stuff the page with 100 px long text fields. Make sure they are well placed, and well spaced. You can also estimate how long the input will be which will help you determine how long the filed should be.
  6. Spice the Submit Button. Your submit button should also be persuasive enough. Make sure you indicate what type of action they would do. For example, you can use “Send it” to send the message or any other short but decisive words. Just keep away with the bland “Submit”.
  7. Be Creative, Not Crazy. It’s okay to try out things here and there, but remember to keep in the lines.
  8. Add Animations. Use some animation to make the form look better and more interesting. But keep it to the highly subtle level.
  9. Use Conversational Words. For the copy, speak as if you’re talking directly to the user. Don’t draw a border between you and the user, speak with them!
  10. Keep Everything Simple. If it boils down to the part where you need to remove certain elements, keep the most important parts we discussed above. No need to do parallax and all that stuff.

Conclusion

People who say Contact Pages don’t matter, don’t know what they are saying. Contact Pages often blur the gap between users and the company as it builds bridges and opens avenues for effective communication. Without contact pages, the regular visitor, who is curious about the company won’t be able to ask more about it, hence the possibility of losing conversions. That is why you need to put more focus in this page. Give more attention to small details as they often are the main factors that separate successful ones from the failed pile.

To recap, we learned today that the anatomy of the perfect Contact page is composed of:

  1. A well-written header. Built with solid, creative, and persuasive copy writing, and has noticeable text hierarchy
  2. A block of credibility assurance. With strengths and weaknesses indicated, and with testimonials (both good and not so good) included
  3. Good Brand reminder. Focusing on color, tone, and font consistency because visitors will forget you!
  4. Awesome Contact Forms and More. With a well-built collection of Fields, Social Channels, Maps, and Basic Contact information
  5. Success messages need to be created and treated with the same witty copy writing that fits with the overall message of the site.

I hope you learned something from this article, and hopefully, integrate these new tips and information into your new design. Expecting some great results soon!

Good luck in designing that contact page! If you have any questions, or if you feel like we’ve missed something in this article, please let us know in the comment’s section below. We’ll be more than willing to talk to you. Have a nice day.