Your contact page is arguably THE most important page on a website...
No matter what type of business you have, or if you sell products online (eCommerce) or offer a service – your contact page design is a critical part of your website. When a website visitor makes it to your contact page, you know they are ready to engage with your brand – the other pages of your website have convinced them that you can solve a problem and they’re ready to find out more!
BUT, if your customers cannot easily find your contact page, they’ll leave. If your contact page does not provide vital details like your location/address and a phone number, they’ll leave. If you’re using a contact form and it is faulty- you guessed it, they’ll LEAVE! And all that foreplay on social media or other pages was wasted.
So, how do you know if your contact page design sucks?
- Your contact form fails a test with errors, or you don't receive any notifications. Go submit a test of your form right now!
- When you check your site analytics, you see a lot of pageviews for your contact page, but you're not getting many queries. A rule of thumb is that the average conversion on a contact page should be around 3-5% for most industries.
- You do not display a phone number and address or location.
- You have social media icons on the page, but the links don't work
- Your page fails basic web design principles for good user experience; it isn't properly configured for display on mobile or tablet, its overcrowded or overly sparse, fonts are too small, an unreadable font or low contrasting colours
How to fix bad contact page design - a walkthrough
Here’s a really shitty contact page design I’ve created – there is a lot wrong with this page and you’re probably thinking jeepers Kirsty my contact page doesn’t look that bad!!!
Before you close this window and skip along with your day thinking you’re all good – know that it only takes ONE of the bad design elements above to deter a discerning customer from actually reaching out. After all, how legit can your company be if your contact page looks like something a toddler threw together?
First, let's fix the contact form & test for errors
Even before design, fix errors. a colour blind customer might not find this layout offensive and still attempt to contact you – but if the form throws errors for them, or you don’t get notified… its a waste of time fixing the design.
- Fill in your form as if you are a customer, put something in all fields, and test what happens if you enter something incorrect (like an email address without @.xx.com).
Was the process painful? Every additional field you have on a form is one extra step for your customer to contact you. Only keep fields that you absolutely must have, including 2 forms of contact (email and phone). That way, if they put a typo in the phone number, you are able to email them. - Make sure your form is obvious, and buttons really stand out with a high contrasting font.
- Review the confirmation your customer receives. The generic “The form was submitted” is not good enough. Change it to something specific and personalised to your brand – “Thank you so much for contacting Thorn Creative! We’ve received your query and will get back to you within 2 business days”. Always let them know when to expect to hear back from you.
Ahhh that’s better!
The form has a clean, uncluttered design, the button is now on-brand and stands out. There is also a clear call to action above the form, instructing users what we’d like them to do here.
And we’ve given the form some SPACE – allowing it to breathe away from the other elements on the page.
Next, let's address the confused footer styling at the bottom of the page!
The footer of your website is the last piece of your page that usually contains your copy write information, perhaps a few links and sometimes another call to action like a simple subscribe form. I’ll breakdown good footer design in a future post – but for now just know that with the footer less is more and it must be on brand with your page header (the bit at the top).
**Having your page footer appear in a contact page design or landing page is a bit controversial. After all, most of the time your footer will contain links that takes visitors away from the form! Generally, I leave the footer on a contact page, and omit it from specific landing pages and ‘request a quote’ pages, keeping visitors focussed on what you want them to do.
In this example, we’re keeping the footer, but overhauling the design which currently says ‘yoga studio’ – completely incongruent with the header’s ‘grungy garage fitness’
*Sigh of relief* Finally a cohesive design!
Next, let’s up the helpful factor in the page body. With the addition of the new footer, customers can now call us, see our open hours and location, but all of those should also appear in the page body of a contact page in greater detail.
Now let's make your contact page design actually helpful for customers.
There are a handful of things your customers expect to find on your contact page.
- A contact phone number – there is something fishy about a business you cannot call!
- A way to email you. We recommend leaving your address off of your website and using a contact form instead. This helps protects your email account from getting flooded with spam emails!
- An address, or location if you work from home. At minimum mention the town and state your main contact is in, that way interstate customers know to check the time zone!
- For most local businesses – an embedded google map, and any special directional notes ‘Eg, look for our logo on the shed behind Bunnings’
- Social media links, but only to profiles that are active. Links to an inactive profile may do more harm than good, as customers may assume you’re not working anymore.
ta-da!
A contact page that looks prefessional, images that make it instantly clear what the brand does, all of the information customers need to reach out and a WORKING contact form. While you could add some other things to the page (below) remember that the goal for your contact page is to encourage customers to actually get in touch. If you overload the page with too many things, you deter them from taking this action!
Last things to check before you tick contact page design off your list!
- Check out your page and test your form on both a mobile phone and a tablet device. Adjust accordingly.
- Ensure you have reCaptcha installed and configured correctly to avoid receiving too many spam responses
- Set a date to check your Analytics to see how your changes have affected your conversion – If its lower than 3% (for most industries) you may want to consider changing your image(s) and considering other SEO steps like checking your page load speed.
Optional extra's for your contact page
- Embed a Google Maps view. of your location if customers come to you.
- Add a few really good testimonials – but keep it on the page (eg, no links to review sites).
- For eCommerce, an image and link to your most popular product(s)
- A free resource download
- Add your free download, a video thank you or other extra value content to your form confirmation.
Conclusion
While there are a lot of different ideas about design and trends always changing – what doesn’t change is the foundations of what works. Most of what is included on this page worked 10 years ago, and will still be valid 10 year from now.
Good web design is so much more than just making something look pretty – in fact over the top creative design can actually REDUCE your page conversion rate.
User experience and accessibility are vital – so even though your contact page design might not be the most exciting part of your site, it really is one of the most important!
