Form Layout: One Column, Visible Labels, No Puzzles

Lay a form out in one column, in the order a person would answer the questions aloud, with a visible label above every field that stays visible while typing. Size each input roughly to the answer it expects, group related fields under plain headings when the form is long, and never make the visitor decode which box belongs to which label, remember an instruction that vanished, or squeeze a long answer into a short slot. Layout is not styling. It is the difference between a form that feels like a conversation and one that feels like an exam, and visitors abandon exams they did not agree to sit.

A single column matches how reading and answering actually proceed: question, answer, next question, eyes moving down a predictable line. Two-column forms break that line; visitors miss fields on the right, misread which label belongs to which box, and on phones the columns collapse into a confusing order anyway. The legitimate exceptions are tiny and genuinely paired: first name beside last name, day beside month beside year, a start date beside an end date - pairs a person thinks of as one answer. Even there, test on a narrow phone screen, because a pair that reads clearly on desktop can turn into a riddle at 360 pixels wide.

Every field needs a real label, visible before, during and after typing. The placeholder-only form - grey hint text inside the box that vanishes on tap - fails three ways: the visitor who clicks and forgets the instruction must clear the field to recover it; the low-vision visitor may never read the faint placeholder at all; and the reviewing visitor cannot check their answers against questions that have disappeared. Accessibility guidance in the WCAG standard is clear that instructions must remain available, and practice agrees. Use placeholders only as a secondary example inside a labelled field - a format hint, a sample postcode - never as the label itself.

The width of a box quietly instructs: a long box invites a full address, a short box signals a postcode or a quantity. Match sizes to the expected answer and you remove a class of small doubts - is this box for the house number or the whole address? On longer forms, group fields under plain headings in the visitor's language (About the job, Where it is, How to reach you) rather than the business's internal categories. Grouping converts one long demand into several small conversations, and it lets the visitor predict what remains, which is half of what makes a long form feel bearable.

Sequence fields the way a helpful human would ask: the interesting, easy questions first (what do you need, what is it for), the personal details after some investment exists, anything effortful or sensitive last, with its reason stated. Never open with the field most likely to trigger suspicion - an immediate demand for a phone number before the visitor has said what they want reads as a sales ambush. The order inside multi-step forms follows the same logic at larger scale; in a single form it costs nothing and compounds quietly in your favour.

Radio buttons for a short list of exclusive choices, visible at a glance; a dropdown only when the list is long, because dropdowns hide options and tax phones; checkboxes for genuine multiple choices; and free text whenever the visitor's real answer might not match your categories - with an other or notes route so nobody is forced to lie to finish. Forgive formatting generously: accept phone numbers and postcodes with or without spaces, dates typed in common forms, names with apostrophes. Every strict format rule is a small punishment waiting for an innocent visitor, and the error guide, error messages that help, covers what to do when forgiveness is not enough.

Before any form ships or changes, one person who did not build it completes it cold, on a phone, thinking aloud: every hesitation, misread label and moment of where-does-this-go is a layout defect to fix, not a user failure to excuse. Five minutes of this finds what a month of completion statistics only hints at. Repeat the check after any theme, plugin or builder update, because form layout breaks silently - a label colour lost in a restyle, a column stacking wrongly after an update. The parent bench, the forms guide, treats this check as part of the standing routine, not a launch event.