UX & Usability

A Contact Form People Can Finish

Three brushed aluminium rails and a circular disc on a dark surface

A contact form is a small conversation. The visitor is trying to explain something, and the business is trying to learn enough to respond. Problems start when the form asks for a complete project brief before anyone has even spoken.

The right form depends on the service. A booking request needs different information from a design enquiry. Start with the minimum needed for a useful first reply, then add a field only when you can explain why it belongs there.

Decide what must be known now

For an initial project enquiry, a name, reply address, and a short description may be enough. A deadline or budget can help, but consider making them optional when visitors may not know the answer yet. A required phone number can prevent someone from contacting you even when an email reply would work perfectly well.

Give open questions a little direction. “Tell us about the site you need and anything we should know about timing” is easier to answer than a blank box labelled “Message”. Keep that guidance short enough to read while filling in the form.

Keep the labels visible

Placeholders disappear as soon as someone starts typing. They can illustrate a format, but they should not be the only explanation of a field. A visible label lets the person check what they are entering without deleting their answer.

In the implementation, connect each label to its input. The W3C’s forms guidance explains this relationship in detail. Use the appropriate input type and autocomplete hint where they apply, so browsers can offer useful keyboards and stored information. These small choices make an ordinary task less tiring.

Make mistakes easy to repair

An error should identify the affected field and explain how to fix it. “Enter an email address such as name@example.com” is more useful than “Invalid input”. Preserve everything else the visitor has already written.

Do not rely on colour alone to point out a problem. Put the explanation beside the field, and make sure it can be reached with a keyboard and understood with assistive technology. A failed network request needs a different message from a missing required field; the visitor should not have to guess which one happened.

Finish the conversation properly

After a successful submission, confirm that the message was sent and explain what happens next. Mention a response time only if the team can reasonably meet it. Give people a direct email option if they need to follow up or the form is unavailable.

Test the entire route with a real submission before launch: phone keyboard, validation, loading state, confirmation, and the message arriving in the right inbox. A polished button is the smallest part of a form that people can trust.

Further reading: W3C: Labelling Controls

/001

More Articles

We write about what we know. Dig into more insights from the blog.

More Articles

We write about what we know. Dig into more insights from the blog.

/001

More Articles

We write about what we know. Dig into more insights from the blog.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.