Forms don't lose leads because of button colour — they lose them to friction: extra fields, disappearing hints, the wrong keyboard on mobile and errors that scold people before they've finished typing. Keep only the fields you need in a single column, put a label above each one, enable autofill and the right input types, validate after the user leaves a field and write errors as hints. And next to the form, offer an alternative — in Kazakhstan, that's often WhatsApp.
After this you will be able to
- Cut a lead form down to the fields needed before first contact and mark optional ones explicitly
- Choose type, inputmode and autocomplete for each field to get the right mobile keyboard and autofill
- Show validation errors after the user leaves a field and phrase them as hints on how to fix the input
- Check a form before launch against a nine-point checklist
Know beforehand
Contents
Every field is a question you have to justify
The most effective way to improve a form is to remove what it doesn't need. Every field is one more effort, one more reason to wonder “why do they want this?” and close the tab. In its checkout research, Baymard Institute cites an average of 11.3 form fields and shows how to cut them without losing the data you actually need.
What forms usually ask
- First name, last name and middle name as separate fields
- Both phone and email, both required
- City, company, job title, budget
- “How did you hear about us?”
- Email repeated “for confirmation”
Enough for a first request
- A single “What should we call you?” field
- A phone number — or a choice: phone or WhatsApp
- A short, optional question about the task
- The manager can clarify the rest in conversation
- Take the lead source from analytics instead of asking
If a field is useful but optional, say so explicitly. Based on its checkout testing, Baymard recommends marking both required and optional fields so people don't have to guess what they can skip.
Layout: one column, labels above fields
A form is read top to bottom. When fields sit in two or three columns, the eye zigzags and easily skips a row; in Baymard's testing, multi-column forms made completion noticeably harder. The exception is short, related fields such as a card's expiry date and CVC.
Label
- Where
- Above the field, always visible
- Why
- People remember what they're entering, even once the field is filled
Placeholder
- Where
- Inside the field, disappears on input
- Why
- Only a format example: “+7 700 000 00 00”
Hint
- Where
- Below the field
- Why
- Requirements: “At least 8 characters”
Nielsen Norman Group calls placeholders used in place of labels outright harmful: the text vanishes as soon as you type, there's nothing to check your input against, and light-grey letters are hard to read. W3C's accessible forms tutorial also calls for a label programmatically tied to the field — screen readers announce it, and clicking it places the cursor in the field.
Keyboards, masks and autofill
Most enquiries today come from phones. The right input type opens the right keyboard on its own, and the autocomplete attribute lets the browser fill in saved details with a single tap. Both mechanisms are documented on MDN and in web.dev's form guidance.
Name
- Markup
- autocomplete="name"
- What the user gets
- The browser suggests the saved name
Phone
- Markup
- type="tel", autocomplete="tel"
- What the user gets
- A numeric keypad and number autofill
- Markup
- type="email", autocomplete="email"
- What the user gets
- A keyboard with “@” and address autofill
Amount, quantity
- Markup
- inputmode="decimal" or "numeric"
- What the user gets
- Digits without switching layouts
SMS code
- Markup
- autocomplete="one-time-code"
- What the user gets
- The phone offers the code from the incoming message
Validation: when and how to report errors
Validation means checking the data people enter. It's worth doing right next to the field, not only after “Submit” — but timing matters. Baymard describes a common mistake, premature validation, where a field turns red while the person is still typing. Nielsen Norman Group likewise calls it frustrating to see an error before you've had a chance to finish.
While the user types — stay quiet
The exception is complex requirements like passwords, where it helps to show which conditions are already met.
When they leave the field — check
The error appears next to the field, not in a summary at the top of the page.
Once it's fixed — clear the error at once
Don't make people hit “Submit” again just to get rid of the red border.
On submit — lead to the problem
Focus moves to the first invalid field, and entered data stays in place.
Errors that scold
- “Invalid format”
- “Field is filled in incorrectly”
- “Validation error”
- Red text with no explanation
Errors that help
- “Enter the 10 digits after +7”
- “The email address is missing an @”
- “Choose today or a later date”
- An explanation of how to fix it, right next to the field
Long forms: steps and progress
Sometimes a form can't be short: a loan application, a clinic booking with service and time selection, a quote request for a complex project. In that case, split it into steps — a stepper form — where each step answers one question.
- Show how many steps are left: “Step 2 of 4” removes the “how long will this take?” anxiety
- Start with a simple, engaging question about the task, not with a phone number
- Let people go back without losing their answers
- Keep what's been entered if the tab gets closed by accident
- Show a summary before submitting so people can check and correct it
The button, the thank-you screen and WhatsApp
Button copy should name the outcome, not the form action: “Get a quote”, “Book for 2:30 pm”, “Reserve a table” instead of a faceless “Submit”. Once tapped, the button is disabled and shows that the request is on its way — otherwise people tap it twice.
The screen after submission is part of the form too. Confirm the request was received, say who will get in touch and how, and suggest something to do right now: browse case studies, add the appointment to a calendar, message you directly.
Pre-launch form checklist
- Every field is needed before first contact; optional ones are marked
- Fields are in a single column, with labels above them that stay visible
- The phone field opens a numeric keypad, and autofill works
- The mask accepts numbers starting with 8, with +7, and pasted from the clipboard
- Errors appear after leaving a field, disappear as soon as they're fixed and explain what to do
- The button names the outcome and is disabled after tapping
- The thank-you screen says what happens next
- There's an alternative channel — WhatsApp or a call — and its enquiries don't get lost
- The form has been tested on a real phone, not just a desktop browser
A good form is one people complete without noticing they were filling in a form.
Sources
- Baymard Institute — Checkout Optimization: 5 Ways to Minimize Form Fields in Checkout
- Baymard Institute — Usability Testing of Inline Form Validation
- Baymard Institute — Form Field Usability: Avoid Extensive Multicolumn Layouts
- Baymard Institute — E-Commerce Checkouts Need to Mark Both Required Fields and Optional Fields Explicitly
- Nielsen Norman Group — Placeholders in Form Fields Are Harmful
- Nielsen Norman Group — 10 Design Guidelines for Reporting Errors in Forms
- W3C WAI — Labeling Controls (Forms Tutorial)
- web.dev — Sign-up form best practices
- MDN — autocomplete HTML attribute
- MDN — inputmode HTML global attribute