Contact page design: 10 mistakes to avoid on your business website

cover

Your contact page is one of the most important pages on your whole site. If you think about it, the whole reason why you build your website is to get people on this page and convince them to click on that “contact” button.

But, often, the contact page, even though it’s statistically the second most visited page on your website, is one of the last pages that are put together and very little care goes into its design.

Here are some common contact page design mistakes to avoid:

1. Not including enough contact options

Some people hate forms and prefer sending emails, other people like using forms instead. The preference is pretty split. Use both and add any other contact option your clients might want to use, like phone number, Skype and social media links. The more options you show, the more open and accessible your company looks.

contact page design with multiple contact options

A lot of contact options on Protest – email, phone, social links, address and a form!

contact page design with multiple contact options

Lots of different contact options on Awesem

2. Not making your form engaging

Default forms look boring. Make your form stand out by using custom design elements that tie in with your brand and use small animations (micro-interactions) to add a bit of excitement in your form.

contact form animation

Add micro-interactions to spice-up your contact page form design. Credit Sergey Shmidt

Other tips to make your contact form more useful:

  • Make it easy to read. It should be easy for your visitors to double-check what they wrote in the form fields before hitting “Send” so be sure to add plenty of padding to your form fields and a decent amount of whitespace between them. Style your type so it’s readable in both size and color
  • Don’t call your button “Submit. Try something more personal that describes the action better like “request a quote”, “send message”, “contact us”, “get in touch”.

3. Not using labels and placeholder text correctly

Using clear labels and placeholder text is important as it gives your visitors a good idea of the type of information and format you expect in those fields. If you need certain information from your visitors, you can use the label or placeholder of the message field to encourage and guide them along. For example, instead of something generic like “your message”, you can write “tell us about your goals“ or “tell us about your idea” instead.

label, placehoder and form field example

For a more minimalistic contact form design, it’s quite common to remove the labels and use just the placeholder text. This only works well for short forms with 4-6 fields. Removing labels in longer forms can cause problems with short-term memory and generally make the form less usable.

4. Making the phone number a required field

If you’re adding multiple fields for contact methods, like an email field and a phone number field, make the phone field optional. Research shows that having a required phone field can lower your conversion rates by up to 52%. Some people are wary of being spammed with phone calls or would just rather handle things over email for now.

5. Not setting expectations with your “form sent” message

First of all, you should definitely display some message after the form has been successfully sent, to confirm everything worked as planned. Most of the time, though, this message is something pretty generic like “The form was successfully submitted”.

What you should do instead is use this opportunity to keep the exciting momentum going and help your visitors start their customer journey with a good impression. Here are some ideas of messages you can include:

  • Set up expectations: when can they expect an answer, who’s going to contact them, what the next steps are.
  • Add a fun image, animation or illustration that fits with your brand
  • add links to your blog or direct them to other resources they might find useful
  • If you have a newsletter, you can ask them to sign up for it. Be sure to include some reasons they might want to do that (provide value)
contact page design with success message

GoCardCity uses a nice illustration and sets up expectations. They also include a newsletter sign up form.

6. Not directing your contacts to different channels

The quicker a prospective client gets a reply, the more chances your company has of closing the deal.

In B2B lead generation especially, there are multiple stakeholders that need to have their questions answered before a final decision is made to work with your company. On your contact page, you should offer direct contact information to your different departments to speed up the process and make sure they’re talking to the most qualified person in your team that can answer their questions.

contact page design with multiple contact options

Applover includes direct contact info for their departments on their contact page

contact page design with multiple contact options

Plenty of contact options on Achieve3000

7. Using too many fields in your contact form

You should only request information that is absolutely necessary. The longer the form, the lower your conversion rate will be. Your contact form should only require the necessary info you need to get your foot in the door and continue to grow the lead afterwards.

So how many fields should your contact form have? Research shows that the sweet spot is somewhere between 3 and 6. To figure out what works best for you and your business, try doing some A/B testing.

8. Not including a map or address

Including a map (or address) on your contact page design makes your business seem more established and trustworthy, so consider adding one even if you do most of your business online.

contact page design with map

Large map helps Decta look more established.

9. Not thoroughly testing your contact page on mobile devices

Form usability on mobile devices is a real problem so be sure to test your contact page on mobile devices. Here are a few things to look for:

  • Make sure your submit button and links are easy to tap
  • Check for any display issues – overlapping fields, text, or images
  • Make sure all your email links are spelled correctly and go where they’re supposed to go
  • Test your mail server, make sure your form messages don’t end up in your spam folder

10. Not adding a personal touch to your contact page design

A lot of times, the contact page is just a boring white page with a form and some links. Heare are some ideas of how to make it stand out and connect with your potential clients:

  • Use personalized text to encourage your visitors to contact you. How can you help their problem? Be friendly and positive.
  • Use photos of your team and office to humanize your company and encourage people to take action
  • Add illustrations or design elements that tie in with your brand
contact page design with branded elements

Images and branded illustrations make this page stand out

contact page design with office image

Office and staff pictures create a more personal connection

contact page design with team image

A photo of the account managers puts a face behind the form

Conclusion

Your contact page is one of the most important pages on your whole website. Give your visitors a good experience and increase your conversion rate by making it more personal – use photos of your team, office, add a map, provide plenty of contact options and make sure the form is engaging and error free.