Forms are where users quit. Every bit of friction — a label that vanished, an error that fires while you’re still typing, a layout that zigzags across the page — costs you completions. Good forms aren’t clever. They’re calm, and four rules get you most of the way. The good news is that the fixes are boring, and they all work.
Keep labels visible
Placeholder-as-label is the most common form bug. The moment someone types, the label is gone, and now they’re guessing which field they’re in. Put a real <label> above every input and leave it there. Placeholders are for a format hint — you@company.com — not the field name. Tie that <label> to the input with htmlFor so screen readers announce it too, not just sighted users.
Validate on blur
Don’t validate on every keystroke. Flagging invalid email while someone is on the second character is nagging, not helping. Wait for blur — when they leave the field — to run the first check. Once a field has errored, then re-check on input so they watch it clear in real time.
Say how to fix it
“Invalid input” tells the user nothing. Error copy has one job: say what’s wrong and how to fix it. “Password needs at least 8 characters” beats “Invalid password” every time. Put the message right under the field, don’t rely on red alone, and never wipe what they already typed.
One column
Side-by-side fields make the eye zigzag, and the second column gets skipped. Stack everything in a single column so there’s one clear path down the page. The one fair exception is tightly related pairs — city and state, expiry and CVC — that read as a single unit. Everything else goes top to bottom. A single column also keeps the form narrow, which reads faster and drops onto a phone with no rethink.
Ship it
Labels above, validation on blur, errors that name the fix, one column top to bottom. None of it is hard; it’s just usually skipped. Fix these four and your completion rate climbs before you touch anything fancier.