Contact us

The dos and don'ts of contact form web design

18 August 2017

  • Responsive Web Design
  • Mobile First
  • Lead Generation

How can we help

For a business, the humble website contact form is usually the primary way to inspire action from potential customers.

The trouble is, contact forms are often a complete pain in the backside if you happen to be that potential customer.

We’ve all experienced this; you approach a website’s ‘contact us’ page, or click a call-to-action that suggests you’ll be able to get in touch, and you’re met with a contact form as long as your arm.

It asks for you name, date of birth, home address, work address, favourite colour, mother’s maiden name, choice of meal for last night’s dinner and the colour of your garage door.

Ok, we jest (slightly), but long contact forms do nothing more than annoy would-be customers, and with that in mind, we thought we’d put together the definitive list of dos and don’ts for contact form design.

1. Don’t be boring

Contact forms shouldn’t be dull affairs - they should carry your branding and be designed in a way that screams “fill me in, I’m friendly!”.

Don’t make the contact form design an afterthought - treat it with the same reverence as your homepage.

2. Don’t ask for information for which you have no need

Do you really need to know the company name?


Surely, the email address and person’s name will be enough if all you’re doing is sending a whitepaper their way.

3. Don’t bother with a complicated CAPTCHA entry

Adding a CAPTCHA field to your contact forms is a sensible way to keep spam at bay, but remember that’s why it’s there - it isn’t designed to benefit the user in any way.

It therefore shouldn’t be a pain to complete. If you’ve ever struggled to make out the letters and numbers contained on a grainy photo, you’ll know what we mean. Google’s reCAPTCHA is about as easy as it gets - use it.

4. Don’t make a big deal about your credibility

If people trust you enough to fill in a contact form, you don’t need to ramble on about how much you respect their privacy - they get it.

A single line footer that says “we will not pass your information onto third parties” is all you need.

5. Don’t make it unusable on mobile

Most people who visit your website will do so on a mobile device. So, make sure your forms work perfectly on small screens.

There’s nothing worse than having to pinch and zoom just to fill something in.

6. Do offer alternative contact methods

Visitors who reach your contact form may decide that another method of contact will be better suited, and what better place to advertise you live chat feature or telephone number than right next to that form?

7. Do tell people who will get back to them

Add some personality to your web forms by including photos of the team members.

If they’re happy for you to do so (it’s always worth asking permission), those images will show the human side to your business and give people reassurance they’ll hear back from a real person.

8. Do keep it simple

If you can, just ask for the email address. It might sound counterintuitive, but you’ll still be able to get hold of the people who are most likely to buy.

9. Do ask for relevant information

There’s no such thing as a standard contact form on a website. You may need two or three, depending on what it is you want visitors to do.

For example, the form on your contact page may differ from that of a product landing page (for instance, the latter might require a preferred time for a demonstration).

Design each form with purpose and ensure they are relevant to the task in hand.

10. Do personalise it

Along with those team photos, be creative with the copy that accompanies the form. Write it as though you’re talking to just one person by using the word ‘you’ plentifully.

“We’re waiting to hear from you!”, or “ We’re really glad you stopped by - let’s chat further”, should do it.

Wrapping up

Use our tips above, and you’ll never be left cursing your contact form’s inability to provide high quality leads.

Posted by