Skip to content

For many small service providing businesses (mine included), getting people to fill in your contact form will be the main aim of your website.

Sure, social follows are great and newsletter subscriptions are even better, but contact form enquiries are the biggest step towards winning a new piece of work.

Whilst having someone fill in your contact form might feel like an end goal, in reality it’s just the beginning of a potential client relationship.

It’s a major part of how your customers and clients interact with not only your website, but also your brand and business as a whole.

A positive contact form experience sets up your entire relationship with the enquirer on good footing. Doing it badly risks confusing or annoying your potential customers.

Here are my top tips to improving your contact form experience.

What fields should I include in my contact form?

The key to any successful contact form is finding a balance between collecting enough useful information so you can follow through on the enquiry (and identify time wasters!) whilst keeping the form easy enough to complete.

On one hand, a form with just two fields (name and email) is super easy to fill out and will probably get completed by lots of people. However, then you’ll have to spend hours following up to find out what each of them actually wanted.

Alternatively, including more detailed form fields will glean lots of useful information, but most people are put off by such forms.

Each field you add is an extra obstacle your customer must get past to submit the form. Consider that most people probably fall into one of these categories:

  • Busy – “I don’t have time to fill out this form.”
  • Lazy – “I can’t be bothered filling out this form.”
  • Frustrated – “I don’t understand this form.”
  • Uncomfortable sharing personal information – “I’m not telling them that.”

Finding a balance that suits both you and your customers is a challenge and requires careful consideration!

Asking for a name and email is a given. You’ll need these to respond at all! A phone number may also be useful depending on your business, but make it an optional field as people might not want to be called.

A nice big message box will allow your customer to explain their problem. Give them guidance on what you need to know so you can respond effectively. You can do this either in the field label or by using placeholder text within the field itself.

The message field on the contact form for Smashing Magazine is full of personality and warmth. It also allows for 5 lines of text; enough to convey plenty of information without being offputting.

From a design perspective, the height of the textbox will offer a visual clue to how much you expect them to write. Make it too small and the answer might be too short to be useful.Too tall and people might be put off thinking they need to provide an essay.

You might want to consider one additional field to gain some more specific information, provided it will not slow down the process of filling in the form. For example, don’t ask people to complete a “subject” field, as they will already explain themselves in the main message field.

If you want to categorise and prioritise your enquiries, you could use a dropdown box and offer options of ‘Service/How can I help’ to help better categorise and prioritise your responses. But once again keep this simple!

I once experimented by adding a budget field to my forms. Most people chose “Don’t know”, while the rest picked the lowest value. I got rid of the field because it created a hurdle toward form completion: it provided no useful information and probably made people uncomfortable thinking about money so early on in the process.

Instead, I kept my main contact form super simple to encourage the initial connection, and then create a second more in-depth project enquiry form to direct people to once I’ve established their commitment to working together as opposed to making a general enquiry.

Validate my existence!

What happens after someone takes the time and effort to complete your form and hits ‘Send’ is key in building a positive bond between you and the customer.

The humble validation message.

It should be immediately clear that the message has been sent and hasn’t evaporated into cyberspace.

Typically, the first thing a person will see once they submit your contact form is the form validation giving them a quick line of text to let them know if the form submitted or not.

Make it clear to them what will happen next. How long to expect it to take to get back to them? Should they expect some sort of follow up email (and should they check their junk mail folder)?

Also be sure to submit your form with empty fields or invalid data. Check what the validation message says and then revise as appropriate to match your own tone of voice.

Validation messages are simple but very powerful. It’s also far too easy to forget about them and simply leave in the generic default message that comes with your software.

The follow-up email

To leave no guesses whether you have received the message – and to start the relationship on a positive note – you might want to consider sending an automated ‘Thanks for your message’ response back to the email address they supplied.

The PJWD response email informs people of my other services and free resources they may find useful.

Here you can go into more detail into what will happen next, specifically how and when they can expect your reply.

What else might be useful for them to know about at this stage? You can use this opportunity to tell them about your other services or useful articles resources you can provide.

Typically, automatic emails are sent in plain text format. As it says on the tin, it’s just an unstyled text email. This means you can’t include images or links (although most email clients will turn URLs into clickable links). It’s basic, but the important thing is you are clearly communicating with the enquirer and building up understanding and trust.

If you really want to impress, you can create a more advanced HTML email response designed around your company branding. You can also include images and tidy text links.

However, coding impressive HTML emails does require (a very specific set of) coding skills so you may need to work with a developer.

Fun fact: While HTML emails are technically more advanced than plain text, they have barely changed since the early 90s. Coding them requires you to engage in an old-school battle of workarounds and filthy hacks that will bring out a cold sweat of even the most seasoned developer!

More Articles in Website Advice

Bonus Contact Form Tips

  • Allowing people to subscribe to your newsletter when they fill in your contact form is an easy way to boost your mailing list. Just make sure your users have to opt in with a checkbox so you stay GDPR compliant.
  • Whatever information you collect via your contact forms and what you do with it should be documented in your website’s privacy policy.
  • Test, test and test again! Make sure to regularly submit your own form and review whether the whole process (form fields, validation, follow up email) is still in line with your current business objectives.
  • Some people might not want to fill in your form at all! Make sure to include your email address nearby too as a backup!

Contact forms can make or break things with a new client in the early stages when they are just about to make that first connection with you. That is not the time to mess things up, so it really is worth getting right.

Why not fill in mine if you’d like some help to perfect client interaction on your site?

The PJWD Newsletter

Get helpful advice on web design, digital privacy and sustainability into your inbox once per month.


Helpful website advice in your inbox

The monthly PJWD newsletter is full of tips and advice on web design, digital privacy and sustainability (plus dog photos).

Get the PJWD Newsletter