Form design best practices: a practical checklist

Form design isn't decoration — it's whether people can fill the form out quickly and correctly. A handful of practical rules cover most of the wins. This guide goes lever by lever (layout, labels, field types, error handling, mobile), shows good versus bad examples, and ends with a checklist you can run against any form before it ships.

Layout: one column, logical order

• Use a single column. Multi-column forms cause people to skip fields or read them in the wrong order. The exception is short, obviously paired fields like City and ZIP.
• Order fields the way people think: easy and expected first, sensitive last.
• Group related fields together (contact details, then preferences, then consent) with a little visual separation.
• Give fields room to breathe — cramped forms feel harder than they are.
• Keep the submit button reachable; on long forms, consider splitting into steps.

Labels: above the field, always visible

Labels are how people know what to type. The biggest, most common mistake is using placeholder text as the only label.

Placeholder-only labels disappear the moment someone starts typing, so they lose track of what the field was — and screen readers handle them poorly. Keep a real label above every field.

Field types: match the type to the answer

The right field type prevents bad data and triggers the right keyboard on mobile. Don't make people type what they could tap.

A builder with many field types makes this easy — Formkii offers 18, so there's a purpose-built field for almost any answer rather than forcing everything through a text box.

Error handling: inline, specific, kind

• Validate inline, as people leave a field — not only after they hit submit.
• Put the error next to the field it belongs to, not in a banner they have to scroll to find.
• Be specific: 'That email is missing an @' beats 'Invalid input'.
• Be kind in tone — the person made a typo, not a crime.
• Don't clear the field's contents on error; let them fix, not retype.
• Confirm success clearly so people know the form went through.

Mobile: thumb-friendly by default

• Full-width fields and buttons sized for thumbs, with generous spacing.
• Typed fields so the right keyboard appears (email, number, phone).
• No tiny tap targets crammed side by side.
• Avoid huge dropdowns; break long option lists into clearer choices.
• Test on a real phone, including the submit button and any error states.

Required fields and the submit button

• Mark only the fields you truly need as required. Optional fields like 'How did you hear about us?' should never block submission.
• If most fields are required, mark the optional ones instead — whichever is less cluttered.
• Name the submit button after the outcome: 'Get my quote', 'Send feedback', 'Reserve my seat' — not a generic 'Submit'.
• Set expectations up front: a welcome line like 'Takes about 1 minute' or 'Just 5 questions'.

Common form design mistakes

• Placeholder text used as the only label.
• Everything marked required, including optional comments.
• A short text field where a dropdown or date picker belongs.
• Errors that appear only after submit, in a banner far from the field.
• Multi-column layouts that make people skip or misread fields.
• A generic 'Submit' button that doesn't say what happens next.
• Never testing on a phone, where much of the traffic lives.

The pre-launch form design checklist

• Single column layout, fields in a logical order, related fields grouped.
• A visible label above every field; placeholders are hints, not labels.
• Each field uses the type that matches its answer (email, number, date, choice).
• Only essential fields are required; optional ones are clearly optional.
• Validation is inline, specific, and shown next to the field.
• The form is thumb-friendly and tested on a real phone.
• The submit button names the outcome.
• A clear confirmation or thank-you screen follows submission.

Frequently asked questions