Contact Page Design: What to Put On It, and What to Leave Off

Key takeaways

• Ask for less. Nielsen Norman Group's form guidance says to remove fields you can get elsewhere or later, and to keep only one or two optional ones, labelled as optional.
• Label every field properly. W3C says each control should have a label, ideally a real label element tied to the field. A placeholder is not a label.
• Declare what each field is for. WCAG 2.2 success criterion 1.3.5 (level AA) asks that common personal fields, such as name and email, state their purpose in code, which the HTML autocomplete attribute does.
• Tell people what happens next. A reply time, a confirmation after sending, and a fallback if sending fails matter as much as the layout.
• Offer more than one way in. Some visitors will not fill a form. A phone number, an email and a booking link let them choose.

The short answer

A good contact page has five parts: a one-line promise of what happens next, a short form, two or three other ways to reach you, a few lines of reassurance, and a clear confirmation after sending. Everything else is decoration. The form should ask only for what you need to reply, label every field, and tell the visitor how long a reply takes.

Who is writing: Amariq is a web design studio, and we built the contact form we describe below. We are not neutral about it, so we list what it does, not how well it performs.

What the popular guides cover, and what they skip

On 23 October 2026 we looked at the results Google showed for "contact page design": Dribbble, Awwwards, Pinterest, Wix, Webflow, HubSpot and JetFormBuilder. We read Wix's guide, "15 contact us page examples", in full through a fetch tool. It lists 15 examples, gives sensible best practices such as short forms and action-led button text, and quotes one statistic, that 44% of visitors leave if contact details are hard to find, sourced to another company's blog. We could not check that figure, so we do not repeat it.

Three things were thin across the pages we saw:

1. Field-level decisions. Which fields to ask for, which to make optional, and why.
2. Accessibility basics. Labels, autocomplete purposes and error messages that do not rely on colour alone.
3. What happens after send. The confirmation, the failure message and the reply promise.

What to put on a contact page

For the button on the form, see our call to action examples for small business websites.

Which fields to ask for

Start with the question: what do you need in order to reply well? Then add nothing else.

The decision rule from Nielsen Norman Group's form article (dated 1 May 2016): remove fields you can derive elsewhere, collect later, or drop. Label the one or two you keep optional as optional.

Label, autocomplete and error rules

These come from W3C and NN/g pages we read on 23 October 2026.

• Use a real label for each field. W3C's labels tutorial recommends a label element whose for value matches the field's id. It can be visually hidden if the context is clear, but it should stay in the code. It says the title attribute is generally less reliable and not recommended as a label.
• Do not use a placeholder as the only label. The W3C page we read does not discuss placeholders, so this is our rule: a placeholder disappears when someone types, so it cannot carry the question.
• Declare the purpose of personal fields. WCAG 2.2 criterion 1.3.5 at level AA asks that fields about the user, such as name, email and phone, expose their purpose. The HTML autocomplete attribute, with values like name and email, is the technique W3C lists.
• Show errors in more than colour. NN/g says to outline the field, use red text and heavier type, make the message specific, and keep what the visitor already typed.

You can check text and button colours with our colour contrast checker.

A real example: the form on amariq.com

We read our own contact page and its script on 23 October 2026. This is a description of what it does, not a performance claim.

Two lessons come out of that list. First, every state of the form has words: waiting, wrong, sending, sent, failed. Second, the page always leaves an exit, because a failed send with no fallback loses the enquiry.

Mistakes to avoid

• A form as the only route. Add an email or phone number.
• A long form on the first step. Ask for the minimum, then follow up by email or call.
• Placeholder-only fields. The question vanishes as soon as someone types.
• "Submit" and "Thanks!" with nothing else. Name the action and say what happens next.
• Silent failure. Tell the visitor if something went wrong, and give another way to reach you.
• A map of nothing. Show a map only if people visit you.

If visitors reach your contact page and still do not write, the cause may be earlier. Our guide to why a website does not convert goes through the other causes, and the landing page structure guide covers the page before the form.

How we help

When we build or redesign a site we plan the contact page with the rest: the routes, the fields, the messages and the notification setup. Projects are priced from the scope and never by the hour. We take 40% at the start, 30% when the design is approved and 30% before launch, and on final payment the design, copy and code are yours. Start with our web design service or our Webflow development page.

Frequently asked questions

What should a contact page include?

A line about what happens next, a short form, other ways to reach you such as email, phone or a booking link, a reply time, and a clear confirmation after sending.

How many fields should a contact form have?

As few as you need to reply well. Name, email and a message are enough for many businesses. Add a topic field if you offer several services.

Should I use a placeholder instead of a label?

No. W3C recommends a label for each control, and a placeholder disappears once someone types. Use the placeholder only for an example.

Do I need an autocomplete attribute?

For fields about the visitor, such as name, email and phone, WCAG 2.2 criterion 1.3.5 at level AA asks for their purpose to be exposed, and the autocomplete attribute is the usual way to do it.

Should I put my phone number on the page?

If your customers like to call, yes, and make it a tap-to-call link on mobile. If you do not take calls, say what you do prefer.

How do I stop spam without annoying visitors?

Prefer quiet methods over puzzles that frustrate real people. Whatever you use, test that a real enquiry still arrives, and keep an email fallback.

What should happen after someone sends the form?

Show a clear thank-you message with the reply time, move focus to it so screen readers announce it, and send the enquiry to a place you check every day.