HTML Forms: Best Practices for Usable, Accessible Forms

For most business websites, the contact or enquiry form is the conversion. Yet forms are where small HTML mistakes quietly cost the most: tiny tap targets, the wrong mobile keyboard, error messages that vanish, and captchas nobody can read. This guide covers how to build forms that are usable, accessible and still protected from spam.

The basic structure of a good form#

<form action="/contact/" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="phone">Phone (optional)</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel" inputmode="tel">

  <label for="msg">How can I help?</label>
  <textarea id="msg" name="message" rows="5" required minlength="10"></textarea>

  <button type="submit">Send message</button>
</form>

Labels: never skip them#

Placeholders are not labels. They disappear as soon as someone types, they’re usually low contrast, and many screen readers don’t announce them reliably. Use a visible <label for="…"> matching the input’s id. Bonus: clicking the label focuses the field, giving a larger tap target on phones.

Choose the right input type#

For numeric codes like Indian PIN codes or OTPs, use type="text" inputmode="numeric" autocomplete="postal-code" (or one-time-code) instead of type="number".

Autocomplete saves your visitors time#

Browsers can fill forms instantly when you use standard autocomplete values: name, email, tel, organization, street-address, postal-code, country. On mobile, this can turn a one-minute form into a five-second form.

Validation and error messages#

• Use HTML validation (required, minlength, type="email") as a first line — then always validate again on the server.
• Show errors next to the field, in text (not only red borders), and explain how to fix them: “Enter an email like name@example.com”.
• Keep what the user typed when the form reloads with an error.
• Connect error text to the input with aria-describedby so screen readers announce it.
• After success, show a clear confirmation and what happens next (“I reply within one working day”).

Reduce friction#

• Ask only what you need. Every extra field lowers completion. Name, email and message are often enough.
• Mark optional fields rather than every required one.
• Single column layouts are easier to scan, especially on mobile.
• Large tap targets — at least 44–48 px tall inputs and buttons.
• Descriptive buttons — “Get my free audit” beats “Submit”.
• Offer alternatives such as WhatsApp for people who prefer chat.

Spam protection that respects humans#

This site’s contact form combines a honeypot, a time trap, rate limiting and a custom, self-hosted captcha — no Google scripts required — with WhatsApp as an alternative for anyone who can’t read the code.

Security essentials#

• Always use method="post" for forms that send data, over HTTPS.
• Sanitise and validate everything on the server; never trust browser validation alone.
• Add CSRF protection (WordPress nonces) to forms that change data.
• Don’t email sensitive data in plain text; store it securely if you must keep it.