A contact form that actually brings in messages

A contact form brings in messages when it's short, easy to fill in on a phone, tells people what happens after they hit "Send," and, above all, when the message actually reaches you. That last part is the one we check first. A form that looks perfect but whose emails land in spam is worse than no form at all: the person thinks they've reached you.

How many fields

As few as possible. Nielsen Norman Group's guide to forms puts exactly this at the top: cut any field you can find out another way, later, or not at all. For a contact form, three are enough:

1. name;
2. phone or email (let people pick);
3. message.

Every extra field has to earn its place. "Company," "Budget," "How did you hear about us" can come up in the conversation afterward. If you do add them, mark clearly what's optional.

There's a legal reason too. The GDPR requires the data you collect to be limited to what's necessary for the stated purpose. A date of birth has no business in a contact form.

On a phone

The form has to work just as well on a phone, filled in with a thumb, often on the go. A few things that make the difference:

• The label sits above the field and stays visible. The gray text inside the field (the placeholder) disappears as soon as you start typing, and then you can't remember what it asked for. NN/g recommends not using it in place of a label.
• The right keyboard. A phone field marked up correctly (type="tel") lets the phone show a phone-number keypad instead of the letter keyboard.
• Autofill. The autocomplete attribute (for example name, email, tel) tells the browser what the field expects, so people can fill in their name and number with a single tap.

Errors and confirmation

If someone gets something wrong, tell them clearly what and where, right next to the field, and keep what they've already typed. NN/g stresses visible, specific error messages that use more than color.

Watch out for overly strict validation. MDN notes that browsers don't check phone number formats precisely because they vary so much from country to country. A form that rejects "0722 123 456" because it expects "+40722123456" loses messages.

After sending, show a page or message that says what happens next: "Got your message. We reply the same business day." Only if it's true.

Spam, without getting in people's way

Any public form gets spam from bots. The options, from least to most visible:

• A hidden field people never see but bots fill in. If it comes back filled, the message gets dropped.
• Simple limits on the server: too many submissions from the same address in a minute, lots of links in the message, text in alphabets none of your customers use.
• Visible tests ("check the box to prove you're not a robot") stay a last resort, because they get in real people's way too.

The message has to arrive

This is where messages get lost without anyone noticing. The form sends an email from the server, and receiving mail servers check whether the sender is allowed to send on behalf of your domain. The basic mechanism is SPF, a DNS record where you list which servers may send mail for your domain. If the form sends from a server that isn't listed, the message can land in spam or get rejected.

What we do in practice:

1. The form sends through an authenticated email account on your domain, not "from nowhere" on the server.
2. Every message is also saved to a table or the site's admin panel, so you don't depend on email alone.
3. Once a month, you fill in the form yourself and check that the message arrived.

What goes next to the button

The GDPR requires that when you collect data from someone, you tell them who you are and what you'll do with it. One line next to the button is enough: "We only use your details to reply to you," plus a link to the privacy policy. If you also want to sign them up for a newsletter, add a separate, unchecked box. The regulation says explicitly that a pre-ticked box is not consent.

If you want us to check the form on your site, including whether messages actually arrive, find us on our web services page.