Landing page forms: one column or two?

A quote request form with twelve fields takes up a lot of room. The temptation is immediate: split it across two columns so the whole thing fits on one screen, no scrolling, submit button visible from the start. The intent is sound — a form that looks short is a form people start — but the shortcut gets paid for elsewhere. In practice, a single column remains the default layout for a landing page form, and the situations where two columns are justified are far rarer than people assume.

Why single-column is the default rule

A form isn't content you browse, it's a sequence you execute. Visitors don't scan the fields to pick which ones to fill in: they wait to be told what to type, in what order, and where it ends. A single column answers exactly that expectation: one axis, top to bottom, no judgment call to make. This is very different from the F-shaped or Z-shaped scanning pattern you see on editorial content or a block of selling points — there, the visitor picks out what interests them; in a form, they follow a procedure. The moment you put two fields side by side, you reintroduce a micro-decision ("do I go right or down?") at precisely the point where you'd want none at all.

What costs you in a form isn't the number of pixels the eye travels, it's the number of times it has to backtrack. An eye-tracking study by Subhrajit Das, Tom McEwan and Donna Douglas, presented at NordiCHI in 2008, compared three label positions (above the field, left-aligned, right-aligned) on a small sample of users. The result surprised the authors themselves: in their setup, right-aligned labels — the ones sitting closest to the field they describe — produced the shortest completion times, against several earlier recommendations. Beyond the label debate itself, which we cover in our article on labels versus placeholders, the lesson transfers: a form's performance depends on the distance the eye has to cross between two elements that belong together. A two-column grid mechanically multiplies those distances and those backtracks.

The hidden cost of a two-column form

• Skipped fields: the right-hand column regularly goes unnoticed, especially when it's shorter than the left one. The visitor thinks they're done, hits "Send," and gets errors on fields they simply never saw.
• An incoherent tab order: the Tab key follows the order of the HTML source, not the visual order. Depending on how the grid is built in CSS, focus can shoot off to the right while the eye is moving down, or the reverse.
• More validation errors: more missed fields means more rejected submissions, and therefore more round trips between an error message and the field it refers to — a friction point where a share of visitors simply give up.
• A blurred hierarchy: two fields side by side read as equivalent and related, even when one is required and the other optional, even when they have nothing to do with each other. Grouping by proximity, which should signal "these two pieces of information belong together," ends up signalling nothing in particular.
• A height saving that's often an illusion: on a six-field form, going to two columns saves three field heights. Rarely enough to change a visitor's decision, often enough to make them miss something.

The reference paper here is Mirjam Seckler, Silvia Heinz, Javier A. Bargas-Avila, Klaus Opwis and Alexandre N. Tuch, "Designing Usable Web Forms – Empirical Evaluation of Web Form Improvement Guidelines," published at the CHI 2014 conference. The researchers applied a set of usability guidelines to real company forms, then compared the original and reworked versions in a controlled eye-tracking experiment (65 participants). The improved forms were completed faster, with fewer submission attempts and fewer eye movements, and participants reported higher satisfaction. The relevant point here: fewer eye movements and fewer failed submissions are exactly what a grid layout works against.

Mobile settles the question for you

There's one argument few design-review debates survive: below 480 pixels wide, every grid ends up stacked. Two columns of fields on a phone screen give you either fields too narrow to read and tap, or — far more often — a plain stack of fields, which is to say a single column. In other words, if your traffic is mostly mobile, as it is for most landing pages fed by Meta Ads or Google Ads, you're already designing a single-column form: the two-column version exists only for a minority of large-screen visitors. Within a mobile-first approach, the question flips around: what concrete benefit would justify making the desktop version diverge from the mobile one, with two behaviours to test, validate and maintain?

The rare legitimate exceptions

Two fields can share a line under one precise condition: they must be short and semantically linked, to the point that the visitor treats them as a single piece of information rather than two steps. In that case, putting them on one line creates no ambiguity about entry order — the order is self-evident — and it actually reinforces the perceptual grouping. The cases that genuinely meet that bar can be counted on one hand.

• First name + last name: one identity, two fields by technical convention. Nobody hesitates about the order. It's the least contested exception — bearing in mind that a single "Full name" field is often simpler still.
• Postcode + city: two pieces of information a visitor recalls as one block, and which can be auto-completed from one another anyway. The field widths are naturally unequal, which visually signals what each one is.
• Day / month / year: a single, culturally ordered sequence. The real debate is whether to split a date into three fields at all, rather than using one properly formatted field.

Tab order, keyboard and accessibility

This is the part design mockups almost always skip. Keyboard navigation follows the order of elements in the DOM — the order of the HTML source — not the visual order produced by CSS. With a CSS grid or a flex container, creating a mismatch is trivially easy: the order property, grid-auto-flow: column, or a simple flex-direction: row-reverse reshuffle the display without touching the underlying markup. A visitor pressing Tab then watches focus jump between fields with no visible logic, and that's an explicit failure under WCAG (success criterion 2.4.3, "Focus Order") — a topic we cover more broadly in our article on landing page accessibility. The practical rule fits in one sentence: the HTML order must be the intended entry order, and you never patch a broken tab order with positive tabindex values, which make the problem worse rather than fixing it. The same reasoning applies to screen readers, which read the form back in DOM order, and to the 200% zoom accessibility standards require: a two-column grid then has to reflow cleanly into one, which brings you back to the single column as the reference form. The chapter by Javier A. Bargas-Avila, Olivia Brenzikofer, Sandra P. Roth, Alexandre N. Tuch, Silvia Orsini and Klaus Opwis, "Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design" (2010), distils the academic literature on forms into around twenty recommendations: clear structure, logical grouping of fields, unambiguous labels, explicit error handling. Not one of them pursues compactness; all of them aim to reduce the uncertainty of the person filling the form in.

Long forms: the quote request case

Long forms are where the two-column temptation is strongest, and where it costs the most: the more fields there are, the higher the odds of skipping one, and the heavier a rejected submission weighs, since it lands after several minutes of typing. The right answer to a form that's too long isn't to fold it into two columns, it's to shorten it or break it up. Shorten it first: every field has to earn its place, and our article on how many fields a form should have covers how to trade volume of leads against qualification. Break it up second: a multi-step form keeps the single column while cutting the perceived height of each screen. Between the two sits a middle option that's often enough: keep one column but introduce titled sections ("Your project," "Your details") with some breathing room between them. The form is exactly as tall, but it reads as three short blocks rather than one endless list — and this time, the grouping actually carries meaning.

The takeaway

The single column isn't an aesthetic fashion; it's the layout that makes entry order obvious, keeps the visual order aligned with the source order, and survives the move to mobile without any arbitration. Two columns remain defensible for a handful of short, plainly related field pairs — never as a way to compact a form that's too long. In that case, it's the number of fields or the step structure that needs revisiting. The 10 LanderKit templates (€89 each, €229 for the full pack) ship single-column forms, with HTML order aligned to visual order and a coherent keyboard path. The immobilier-lead template, built for real-estate lead capture, illustrates the trade-off well: a fairly long qualification form, kept in one column, structured into sections rather than a grid.