What makes a web form convert well?
Three factors dominate form conversion: number of fields (fewer = higher completion), clarity of what the user gets in return for completing (the value exchange must be explicit), and quality of error handling (how the form responds to mistakes). Most form optimisation effort should focus on removing fields that aren't strictly necessary — every additional field has a completion cost.
How many fields should a contact form have?
As few as possible for your actual needs. For most service businesses, three fields are sufficient: name, email, and message. Phone number should only be included if you actually use it. Company name only if relevant to your service. Every additional field will reduce completion rates — typically by 10–20% per added field.
What are the most common form design mistakes?
The most common: too many required fields, unclear error messages that don't tell users what went wrong, poor placeholder text that disappears when users start typing (making them forget what the field is), inline validation that fires immediately on focus rather than on blur, and forms that aren't properly optimised for mobile tap interaction.
Forms are the moment of truth on any website.
Every form is asking a visitor to give something — an email address, their contact details, payment information, their time. In return, they receive something: a newsletter, a quote, a purchase, an account.
This value exchange is the essence of form design. The form's job is to make giving easy and make the value clear.
Form Length: The Fewer Fields, the More Completions
The single most impactful form design decision is how many fields you ask for.
Research consistently shows that form completion rates drop with each additional field. The relationship isn't linear — the first few additional fields have the biggest impact.
Audit every field you're asking for:
- Do you actually use this information?
- Can it be asked after the initial conversion (in a follow-up email or onboarding)?
- Would removing it affect your ability to deliver your service?
Fields you can usually remove:
- Phone number on initial contact forms (ask by email if needed)
- Company name unless B2B with specific needs
- "How did you hear about us?" — use analytics instead
- Multiple address fields on initial enquiry forms
✦Progressive Disclosure
For complex processes, break the form into steps rather than showing everything at once. A multi-step form where step 1 is name + email and step 2 is details has a higher completion rate than a single long form — even if the total number of fields is the same. Once a user has completed step 1, they feel committed and are more likely to finish.
Form Layout
Single-Column vs Multi-Column
Single-column forms — one field per row — outperform multi-column forms in almost all tested scenarios.
The reason: users read forms top-to-bottom. A two-column layout creates visual ambiguity about the reading order (left column first? row by row?) and forces the eye to travel horizontally, which is cognitively harder.
Use single column: Always for mobile. Almost always for desktop contact forms, lead forms, and checkout forms.
Two columns are acceptable for: First name / Last name (these are semantically linked), City / State / Zip (clearly sequential), and form fields that are very short and naturally paired.
Field Order
Present fields in the logical order the user thinks about the information:
- Name (who they are)
- Email (how to contact them)
- Phone (only if needed)
- Message or details (what they want)
- Submit button
Don't ask for email last — it's the most valuable field to capture and should not be conditional on completing other fields.
Label Design
Labels tell users what to enter. Their design directly affects completion accuracy.
Float labels vs top-aligned labels:
Top-aligned labels (label above the field) are the most reliable pattern. They're always visible, they work for all field types, and they have no accessibility concerns.
Float labels (labels inside the field that move up when focused) look elegant but cause usability problems: they reduce visual scanning speed, can be confused with placeholder text, and create issues for users who use browser autofill.
Do:
- Place labels directly above their field
- Keep labels short (1–3 words)
- Mark required fields clearly (asterisk is standard)
- Left-align all labels
Don't:
- Use placeholder text as the only label
- Place labels to the right of fields
- Use ALL CAPS labels (harder to read)
Placeholder Text
Placeholder text — the grey hint text inside a field before the user starts typing — is widely misused.
Placeholder text should:
- Give an example of the expected format (e.g., "name@company.com" for email)
- Provide brief input hints ("e.g., Tell us about your project")
Placeholder text should not:
- Replace labels — it disappears when users type, causing them to forget what the field is
- Repeat the label — redundant information
- Be required reading — critical instructions don't belong in placeholder text
Input Field Design
The input field itself — the box where users type — needs specific design attention.
Height: 44–52px for desktop, minimum 44px for mobile (touch target).
Width: Full width within the form column for most fields. Don't make input fields narrow unless the expected input is short (e.g., a postal code field).
Border treatment: 1px solid border in a medium grey at rest. 2px solid in the brand colour or a strong blue on focus. The focus state must be visible — it's a critical accessibility indicator.
Background colour: White or a very light grey. Dark input backgrounds on dark forms can work for specific aesthetic contexts, but require extra care with contrast.
Border radius: Match the overall UI design system. 0–4px for minimal designs, 6–8px for most professional sites.
Form Validation and Error States
Error handling is where most form UX fails.
When to validate:
- On blur (when the user leaves a field) — not on keystroke, which is aggressive and annoying
- On submit — catch anything missed
- Not on focus — never show errors when a user first clicks into a field
Error message design:
- Display below the field, not in a generic top-of-form error box
- Use specific, helpful language: "Please enter a valid email address" not "Invalid input"
- Use red colour but don't rely on colour alone — add an icon or text label for accessibility
- Remove the error as soon as the user corrects the field (don't wait for re-submit)
Success states:
- Show a clear success message or confirmation page — don't leave users wondering if the form submitted
- Consider a green checkmark on individual fields once validated successfully
- On submit success: clear the form and show a confirmation message, or redirect to a thank-you page
Mobile Form Design
Mobile is where most form experiences break down.
Touch target size: Minimum 44×44px for all interactive elements — fields, labels (if tappable), and buttons.
Keyboard types: Use the correct input type to trigger the right keyboard:
type="email"— triggers email keyboard with @ keytype="tel"— triggers numeric dialpadtype="number"— triggers numeric keyboardtype="url"— triggers URL keyboard with . and /inputmode="numeric"— for numeric-only fields that aren't phone numbers
Autocomplete: Always enable browser autocomplete on standard fields. The autocomplete attribute tells browsers what data to suggest:
autocomplete="name"— full nameautocomplete="email"— email addressautocomplete="tel"— phone numberautocomplete="street-address"— address
Autocomplete reduces typing significantly on mobile and increases form completion.
⚠Disabling Autocomplete
Never disable browser autocomplete on contact forms or lead forms unless there is a specific security reason. Autocomplete helps users complete forms faster with correct information — disabling it actively hurts completion rates.
The Submit Button
The submit button is the final step of the value exchange. Design it clearly.
Label: Be specific about what happens. "Send Message" is better than "Submit". "Get My Free Quote" is better than "Submit". Match the label to the form's purpose.
Placement: Below the last field, left-aligned (matching the column) or full width.
Loading state: Once clicked, the button should show a loading state — spinner or label change to "Sending..." — to confirm action and prevent double-submission.
Disabled state: Only disable the submit button if there are real-time validation errors. Don't disable it pre-emptively before the user has tried to submit.
Read website button design guide for the complete button design system.
Website forms that need better design and conversion?
Evoke Studio builds Next.js websites with forms that convert — clear layouts, correct validation, mobile optimisation, and complete UX. Packages from $1,500.
The highest-converting contact form is typically: Name, Email, Message — three fields, no more. Single column, labels above fields, clear placeholder examples, a specific submit button label ('Send Message' or 'Get in Touch'), and a success confirmation. Every field beyond three reduces completion rate. If you need qualification information, ask it in the follow-up conversation after you have their contact details.
Yes — a short note near the submit button ('We never share your data. Unsubscribe anytime.' or 'No spam, ever.') measurably reduces form abandonment for lead generation and newsletter forms. Users are increasingly aware of data usage and privacy — a clear trust signal at the point of commitment reduces hesitation. Keep it one line, directly below the submit button.
Use semantic HTML form elements (`<form>`, `<label>`, `<input>`, `<button>`). Associate every `<label>` with its `<input>` via `for`/`id` attributes — never use `div` as a label substitute. Ensure all focus states are visible. Provide text descriptions for error states (not just colour). Ensure `aria-required='true'` on required fields. Test with a screen reader (VoiceOver on Mac, NVDA on Windows) at least once.
On submit, scroll to the first error and focus it. Display error messages directly below the relevant field (not in a header banner). Use specific messages that explain what's wrong and how to fix it. Mark erroneous fields with a red border AND an icon AND a text message — never rely on colour alone. Remove the error as soon as the user fixes the field. For multi-step forms, allow navigation back to fix errors rather than requiring restart.
Multi-step forms convert better for longer forms (6+ fields) and when the completion process naturally breaks into stages (contact info, then project details, then preferences). Single-page forms convert better for short forms (3–5 fields) where seeing everything at once reduces cognitive overhead. The key decision factor: if your form is long enough that it looks intimidating as a single page, a multi-step approach is worth testing.