---
slug: "place-form-field-labels-above-the-input-fields"
name: "Place form field labels above the input fields"
category: "forms"
grade: "observed"
page_types: ["contact","demo","landing","other","signup"]
sites_observed: 5
evidence_count: 5
example_ids: []
version: 5
updated_at: "2026-10-15T21:19:20.912Z"
url: "https://liftwire.io/tactics/place-form-field-labels-above-the-input-fields"
---

# Place form field labels above the input fields

**Evidence grade: Observed.** Top SaaS sites in the corpus use it. This counts adoption; it does not prove an effect.

Observed on 5 corpus sites. Page types: contact, demo, landing, other, signup.

## Why it works

When labels are positioned to the left of fields, users must continually look back and forth between label and field, which can cause confusion. Labels above fields create a natural top-to-bottom reading pattern where users look at the label then immediately at the field, resulting in smoother data input and easier form navigation.

## Evidence

- [User-Centered Design: Principles and Examples of UCD](https://baymard.com/blog/user-centered-design) (article, supports)
- [5 A/B Tests You Should Be Running on Your Landing Page Opt-In Forms](https://cxl.com/blog/ab-testing-forms) (article, supports)
- [Pattern #5: Top Aligned Labels](https://goodui.org/patterns/5) (experiment, supports)
- [Website Forms Usability:  Top 10 Recommendations](https://www.nngroup.com/articles/web-form-design), by Kathryn Whitenton, Nielsen Norman Group (article, supports)
- [7 Ways Form Accessibility Can Boost Conversions](https://cxl.com/blog/form-accessibility) (article, supports)

## Examples

No published examples yet.

## Implement it

The full implementation spec (where on the page, structure, copy patterns, acceptance criteria) is returned by `get_tactic` through the Liftwire MCP server. Setup: https://liftwire.io/mcp