Forms people actually finish
Every field is a question someone has to answer. Ask fewer, ask clearly, and say what went wrong.
The cost of a field
Each field on a form is a small decision for the person filling it in. What does this mean? Is it required? What format do they want? Do I have this information to hand? Multiply that by fifteen fields and it is not surprising that so many forms are abandoned halfway through.
The most effective improvement to most forms is removing fields. Ask whether each piece of information is needed now, or whether it could be collected later, inferred, or skipped entirely.
Labels above, always visible
Placeholder text that disappears when someone starts typing is a poor substitute for a label. Once the field has content, the person can no longer check what it was asking for. Put labels above fields where they stay visible, and use placeholders only for format hints, if at all.
Use the right input types
On mobile, the input type determines the keyboard. An email field should show the email keyboard, a phone field the numeric keypad, a quantity field a number pad. The autocomplete attribute lets browsers fill in names, addresses and payment details, which can cut the time to complete a checkout dramatically.
Validation that helps
Validate at the right moment
Showing an error while someone is still typing their email address is unhelpful; of course it is invalid, they have not finished. Validate when the field loses focus, and again on submit.
Say what is wrong and how to fix it
"Invalid input" tells the person nothing. "Enter a date in the format month, day, year" tells them exactly what to do. Place the message next to the field it describes, and make sure screen readers announce it.
Keep what they typed
A form that clears every field after a single validation error is one of the most frustrating experiences on the web. Preserve all input across submissions.
Be flexible about formats
People type phone numbers with spaces, dashes, parentheses and country codes. They type card numbers with spaces. Accept all of them and normalize on the server rather than rejecting reasonable input.
One column
Forms laid out in a single column are completed faster than multi-column layouts, because the path through them is unambiguous. The exception is closely related short fields, such as city, state and postal code, which can share a row.
Confirm the outcome
After submission, show clearly what happened and what comes next. If an email confirmation is on its way, say so. Silence after a submit button leaves people wondering whether to press it again.