Website Design April 28th, 2016
Every single page on your website is important. There should not be a single page that your visitors can click into that has not been thoughtfully designed, tested for functionality, and created with your brand in mind. Yes, your home page is important, as are your landing pages. Your blog posts are important as well. However, let’s take a moment to discuss your ‘Contact Us’ page.
How does it compare to the pages on your site? If users click the link to that page will they be led to a page with a nice form to fill out, up to date information and the same design scheme as the rest of your website? If so, you are on the right track. If your contact page, on the other hand, is a little pop-up box that sticks out like a sore thumb, or worse, if your website attempts to launch outlook on the user’s PC when they click the contact us button, it’s time for a redesign. For a bit of inspiration, let’s look at some websites that have done a great job with their ‘Contact Us’ pages and explore what they are doing right.
It shouldn’t be any surprise that marketing Guru Neil Patel has a great contact page on his website. The contact us page on QuickSprout is an amazingly well designed Infographics that provides visitors with an informative and educational tour of the sheer volume of email that he receives through his website every single day. He manages to be entertaining and a bit funny as he communicates to visitors that he is unlikely to be able to respond to personal communications. For those who do wish to correspond with him, he lays out the topics that are most likely to get a response and those that are guaranteed to be ignored. This is a great example of humorously and graciously handling a situation where one on one communication isn’t usually possible.
Hootsuite’s contact page is cleanly designed, streamlined, and includes every element a visitor might be looking for. They include links to all of their social accounts, provide means to send messages to sales support or security, and offer maps to each of their brick and mortar locations. Finally, they provide a link to a feedback channel where users can inquire about existing problems, suggest features, and provide feedback about the company’s performance.
This is a great example of a contact page for a company that has many ventures and multiple locations. The page begins with a map showing all Momofuku locations. Then, as the user scrolls down, each of the company’s restaurants is laid out in grid style with the name and address of the restaurant, and a link to that restaurant’s website and location map. Next, comes contact information for the media and potential employees. Finally, the user is presented with links to all of the Momofuku’s publicly available social media accounts.
The web designers who worked on the Small Biz Trends website did a great job of creating a contact page that works very well with the overall design of the website. They’ve created a simple contact form that only requires filling in five fields to complete. In addition to this, direct contact information is provided for people in various business areas of the company. A physical address and phone number are provided as well. People visiting the contact page can also click a link to access more information about the company. Finally, they’ve placed social share and a call to action button on the page to encourage further engagement.
The contact page on the TED Talk website opens with a simple question: “What can we help you with?” Visitors are invited to select from one of many categories. These include nominating a speaker, dealing with technical issues, and getting information about sharing TED content. By designing its contact page like this, two goals are accomplished. First, website visitors can get answers to their questions and help with their technical issues. In addition to this, the contact form also becomes a place to collect data on potential speakers, and those who are interested in curating content from TED Talks.
This is another example of a contact page that has design elements and images that match the other pages on the website. In addition to this, the form is short and simple. The web designer also provides a direct email and twitter link to visitors who don’t want to fill out a form. By keeping the form simple and short, the web designer makes it more likely that the customer will leave feedback.
This ‘contact me’ page is embedded directly onto the home page of the website. This is a useful technique because visitors don’t have to click, they just scroll down to enter their contact information and to send a message. The web developer helpfully provides the email address and phone number. What is especially notable here is the automatically rotating series of customer testimonial quotes.
This contact page shows how effective it is when a web designer takes the time to embed the same design elements used on the main pages of a website into the contact page. In order to avoid unnecessary communication, the designer has provided a link to a document to answer important questions. The physical address, phone number, and email address are also provided. This provides a great element of trustworthiness to the page. This is one thing that makes users more likely to make contact.
There are several things that are correct about this ‘contact me’ page. The first is its simplicity. The user simply fills out a few fields. The second is the social media buttons that are there to increase engagement. Finally, the web designer has added a call to action to the page. The simple, divided page design fits very well on a web page selling a higher grade food product.
This contact us page has a lot going on. Fortunately, the web designer manages to fit everything in without making the page too busy. The user is given the option to send a simple message, or make a sales inquiry.
They are also invited to answer calls to action to subscribe to email updates, join a newsletter, and follow the company on multiple social media platforms. Once again a phone number and physical address are provided to boost visitor confidence.
The first thing you will notice about this contact page is the design. The company logo is prominently displayed, and the web designer has selected a great image that reflects the purpose of the page without being gimmicky or cheesy. The form is short and easy to fill out. Even better, the page also includes alternative methods for making contact, and provides visitors with a guarantee that they will be contacted within 24 hours. The map indicating the company’s exact location is an important feature that many web designers neglect.
The inspiration here is the beauty of simplicity in design. The contact page is simply a short form, social media buttons, and a direct email address. Separate contact forms are provided to job seekers and those who simply wish to leave feedback or gather more information.
Now that we’ve seen a few great examples of contact pages, let’s go over what you will want to include on your page. The first thing you want to have is a form. Ideally, it will be as short as possible. The more information you gather about a customer the better business and content strategy you can design. Let your visitors know why they should contact you. If they feel as if their feedback is welcome, they are more likely to engage with your blog or website. However, if somebody has a customer service issue or is interested in doing business with you, don’t frustrate them by forcing to enter a bunch of extraneous information. Keep the form short, or make the extra fields optional. You also want to include a call to action. This could be to follow your blog, subscribe to your email list, or contact you on social media.