Contact Form UX, the Fewest Fields and a Clear Send

I think good contact form UX comes down to asking for the fewest details which still let you reply, with a visible label over every field, a clear message beside anything which needs fixing and a page after Send which says the message has arrived. The contact form on this website has three fields, Name, Email and Message, and when I redesigned it as a popup in October I found that most of the work went into the parts around the fields, the labels, the errors, the line about privacy under the button and what a visitor sees after pressing Send.

This post goes through each of those parts in the order that a visitor meets them, and it ends with how to test your own form without sending an enquiry which someone then has to answer.

Ask for the fewest fields which still let you reply

Every field which you add is one more reason for a visitor to stop, and Nielsen Norman Group’s form design recommendations open with keeping the form short, by removing anything which you could find out later or which you would only use some of the time. For a contact form I would start from the question of what you need to write back, which is a name to address the reply to, an email address to send it to and the message itself, and then I would make every other field justify itself.

The popup on this website asks for the three fields only, while the project form on its local service pages adds Company, because those enquiries are mostly from businesses and the company name tells me which website to look at before I reply. If a field is optional, I would mark it with the word optional beside its label, and I would keep optional fields to one or two, which is what the same NN/g article suggests.

Use visible labels and keep placeholders for examples

A placeholder is the grey text inside an empty field, and it disappears as soon as someone starts typing. The W3C’s forms tutorial on instructions says plainly that placeholder text is no replacement for a label, since screen readers do not treat it as one and it is gone by the time a visitor wants to check what they typed. NN/g’s article on placeholders in form fields adds that people mistake them for text which is already filled in and skip the field, and that the light grey mostly has poor contrast.

Each field on this website has its label above the box, Name, Email and Message, and the placeholder only carries an example of the answer, such as your.email@work.com, which tells a visitor that a work address is welcome without hiding the question. I would also give the name and email fields the right autocomplete values, name and email, which lets the browser fill them in and meets WCAG 2.2 criterion 1.3.5, Identify Input Purpose, at level AA.

Show what needs fixing, beside the field

A form which turns a box red without a word is the most common error state which I meet, and WCAG 2.2 criterion 3.3.1, Error Identification at level A, asks that the field at fault is named and the problem is described in text, with colour as a second cue only. The GOV.UK Design System’s error message component puts the message right after the field’s label and hint, keeps everything the visitor typed and words each message as a specific instruction in the language of the label, such as Enter your name, which tells the visitor exactly what to do next.

The same guidance also covers when to check. Its validation pattern waits until the visitor presses the button and leaves a field alone while they are still typing in it, because a message which appears halfway through an email address mostly interrupts people who type slowly. On this website the popup checks the three fields when you press Send, puts the cursor back in the first field which needs attention and shows one line above the buttons, such as That email address does not look right. With three fields that line sits close to all of them, but on a longer form I would put each message under its own field and keep a summary at the top, as GOV.UK does.

What happens after Send

While the message is on its way, the Send button on this website reads Sending and stops responding to further presses, which keeps an impatient second press from sending the message twice. Once the message has gone, the fields are cleared and the visitor arrives on a thank-you page, which says that the message reached me and when to expect a reply, and which gives analytics a page of its own to count.

If the server cannot be reached, the popup says so in the same line and opens the visitor’s email app with the message ready, so the words they wrote are kept. I went into confirmation pages in more detail in my post on success message UX, and I think the main point for a contact form is that the visitor should leave knowing the message has arrived and when someone will answer it.

A short privacy line under the button

A contact form collects a name and an email address, which are personal data, and a short notice right where they are collected answers the question which many visitors have before they press Send. Under the buttons on this website there is one sentence, I use these details to reply to you and keep them for 12 months after our last message, followed by a link to the full privacy notice. I wrote about what that notice should hold in my post on a website privacy notice in the Philippines, and the short line at the form is the part which most visitors actually read.

Spam protection can stay just as quiet, and this website uses a hidden field which only bots fill in and a limit on messages each hour, with no puzzle for the visitor.

Test your form without sending an enquiry

Most of a form can be tested without sending anything, because the errors appear before a message goes out. I would leave each field empty in turn, type an email address without the at sign, press Send twice quickly and check that every message reads well, and then do the same on your phone, where the keyboard should switch to the email layout for the email field. I would also press Tab through the form from the top, since NN/g’s article above lists the tab order as one of the things to test, and check that the cursor moves from Name to Email to Message and then to Send.

For the one real send, I would use your own address with the word Test in the name, tell whoever reads the inbox first, and check three things afterwards, that the email arrived, that the thank-you page opened and that your mail log or form plugin recorded it. On a site where the form forwards to several people, a staging copy is the safer place for that send.

You can see the three-field popup on this website from the Send me an email button on the About page.

Frequently asked questions

How many fields should a contact form have?

Three is enough for most websites, a name, an email address and a message. Add a company or phone field only when you use it in every reply, and mark any optional field as optional.

Should contact form labels sit above the fields or inside them?

Above them, as visible labels which stay while the visitor types. A placeholder inside the field disappears as soon as typing starts, so I keep it for an example of the answer.

When should a contact form show its errors?

When the visitor presses Send, next to the field which needs fixing, worded as an instruction such as Enter your email address. The form should keep everything the visitor already typed.

Do I need a privacy notice on my contact form?

A short line under the button which says what the details are used for and how long they are kept, with a link to your full privacy notice, covers what most visitors want to know before they send. The full notice then lists the rest.

How do I test a contact form without bothering anyone?

Test every error state without sending, since the form refuses the message before it goes out. Then send one message from your own address with Test in the name and check the inbox, the thank-you page and the mail log.