Forms Are the Hardest Thing We Design, and the Least Admired

Clients get excited about homepages. They like seeing the hero section, the photography, the animation as you scroll. Nobody has ever asked to see the contact form first. Yet the form is often where the website does its actual job, whether that's an enquiry, a booking, a sign-up or a sale.

Forms are also where small mistakes cost the most. A visitor who's decided to get in touch and then gives up halfway through a form is a lead that was almost won.

Every field is a question

We start by treating every field as a question the business is asking the visitor. Then we ask whether the business really needs the answer now. A contact form that asks for a company name, job title, budget, phone number and how you heard about us is asking a lot before any conversation has happened.

Removing fields is the single biggest improvement we make to most forms. If something can be asked later, on a call or in a follow-up email, it usually should be. Each field that remains has a clear reason to be there.

Labels that stay put

Placeholder text inside a field looks tidy, which is why so many forms use it instead of a label. The problem is that it disappears as soon as someone starts typing. Halfway through, they can't remember whether the field wanted a full name or a first name, and when they come back to check their answers, every field looks the same.

We use visible labels above each field. They're slightly less minimal and much easier to use. Helpful hints, such as the format for a date or why we need a phone number, sit below the label where they stay visible.

The right input for the job

The type of input matters, especially on phones. An email field should bring up a keyboard with the @ symbol. A phone number field should bring up a number pad. A short list of options works better as radio buttons than a dropdown, because people can see all the choices at once. A long list, like countries, is better as a searchable select.

Autofill matters too. When fields are marked correctly, browsers can fill in names, emails and addresses in one tap. It's a small technical detail that saves people a lot of typing.

Layout and order

We keep forms to a single column. Multiple columns look efficient but make people unsure of the order to fill things in, and they often miss fields entirely. Related fields are grouped together, and the order follows how people think: name before email, street before postcode.

Buttons say what they do. "Send enquiry" or "Book appointment" is clearer than "Submit", and it reassures people about what happens next.

After the button

What happens after someone presses the button is part of the form. They need to know straight away that it worked, what will happen next and roughly when. If it didn't work, they need to know why, and their answers need to still be there. Losing everything someone typed because of one mistake is the fastest way to make sure they never try again.

Accessible by default

Every form we build works with a keyboard and a screen reader. Labels are properly connected to their fields, errors are announced, and focus moves somewhere sensible. These details are invisible to most people and essential to some. They're a standard part of our website design and build, not an extra.

Tested with real people

We fill in every form ourselves, on different devices, making deliberate mistakes. Then we watch someone else do it. It's not glamorous work, and it never makes it into the portfolio. It's also where a lot of a website's results are won or lost.

If your site gets visits but not enquiries, the form is a good place to start looking. We're happy to help.