Form Design

Forms are where users do actual work: sign up, check out, submit data, configure settings. A well-designed form gets out of the way. A poorly designed one causes abandonment, errors, and support tickets. Form design has more research behind it than almost any other UX topic.

Form Layout Best Practices

Single-Column Layout

Single-column forms have the highest completion rates. The eye moves straight down without jumping between columns.

BEST (single column):               AVOID (multi-column):
┌───────────────────────┐            ┌───────────────────────────┐
│ First name            │            │ First name  │ Last name   │
│ [_______________]     │            │ [________]  │ [________]  │
│                       │            │                           │
│ Last name             │            │ Email       │ Phone       │
│ [_______________]     │            │ [________]  │ [________]  │
│                       │            │                           │
│ Email                 │            │ City   │ State │ Zip      │
│ [_______________]     │            │ [_____]│ [___] │ [____]   │
└───────────────────────┘            └───────────────────────────┘
Completion rate: higher              Completion rate: lower

Exception: Short, related fields can share a row: City / State / Zip, or First name / Last name, but only if they're logically grouped and the form remains scannable.

Label Placement

Recommendation: Labels above fields is the safest default. It works on all screen sizes, meets accessibility requirements, and has the fastest completion times in research studies.

Form Structure

┌─────────────────────────────────────────────┐
│ Section Title (e.g., "Personal Information")│
│                                             │
│ Label                           ← Visible label
│ ┌─────────────────────────────┐ ← Clear input boundary
│ │ Placeholder text            │ ← Example, not label
│ └─────────────────────────────┘
│ Helper text appears here       ← Optional guidance
│                                             │
│ Label *                         ← Required indicator
│ ┌─────────────────────────────┐
│ │                             │
│ └─────────────────────────────┘
│ ✗ Error message in red         ← Inline error
│                                             │
│            [Continue →]         ← Clear action
└─────────────────────────────────────────────┘

Input Types

Always use the correct HTML5 input type. It determines the mobile keyboard, enables browser autofill, and provides free validation.

Choosing the Right Control

Rule: If there are fewer than 5 options, show them all (radio/checkbox). Don't hide them behind a dropdown.

Validation

When to Validate

Validation Strategy

1. User fills in field → No validation yet (let them type)
2. User leaves field (blur) → Validate this field
3. If valid → Show subtle green check (optional)
4. If invalid → Show inline error message
5. User returns to fix → Re-validate on every change (on input)
6. When fixed → Immediately show success state
7. User submits → Validate all fields, scroll to first error

Never validate:

• While the user is still actively typing (except password strength)
• Before the user has interacted with the field at all
• By clearing the field content on error

Inline Validation Example

DURING TYPING (no validation feedback):
Email
┌─────────────────────────┐
│ jane@exam                │
└─────────────────────────┘

AFTER BLUR (valid):
Email
┌─────────────────────────┐ ✓
│ jane@example.com         │
└─────────────────────────┘

AFTER BLUR (invalid):
Email
┌─────────────────────────┐ ✗
│ jane@exam                │  ← Red border
└─────────────────────────┘
Please enter a complete email address (e.g., name@example.com)

Error Messages

Anatomy of a Good Error Message

Every error message should contain:

1. What went wrong: stated clearly
2. How to fix it: actionable instruction
3. An example: when the format isn't obvious

Error Display Guidelines

<label for="email">Email address</label>
<input
  id="email"
  type="email"
  aria-describedby="email-error"
  aria-invalid="true"
  class="input-error"
>
<span id="email-error" class="error-message" role="alert">
  Please enter a valid email address (e.g., name@example.com)
</span>

Password Fields

Password Creation UX

Show requirements as the user types with real-time feedback:

Password
┌─────────────────────────────────────┐
│ ●●●●●●●●●●                         │ [👁 Show]
└─────────────────────────────────────┘
Password strength: ████████░░ Strong

Requirements:
✓ At least 8 characters
✓ One uppercase letter
✓ One lowercase letter
✗ One number
✗ One special character (!@#$%)

Password Best Practices

Smart Defaults and Auto-Complete

Reduce effort by pre-filling what you can:

Essential Autocomplete Values

<input autocomplete="given-name">       <!-- First name -->
<input autocomplete="family-name">      <!-- Last name -->
<input autocomplete="email">            <!-- Email -->
<input autocomplete="tel">              <!-- Phone -->
<input autocomplete="street-address">   <!-- Address line -->
<input autocomplete="address-level2">   <!-- City -->
<input autocomplete="address-level1">   <!-- State/Province -->
<input autocomplete="postal-code">      <!-- ZIP/Postal code -->
<input autocomplete="country">          <!-- Country -->
<input autocomplete="cc-number">        <!-- Credit card number -->
<input autocomplete="cc-exp">           <!-- Card expiry -->
<input autocomplete="cc-csc">           <!-- Card CVC -->

Progressive Disclosure

Only show fields when they're relevant. This reduces cognitive load and makes the form feel shorter.

BEFORE (all fields visible):
┌─────────────────────────────────────────┐
│ Shipping address                        │
│ [___________________________________]  │
│ Billing address                         │
│ [___________________________________]  │
│ Company name (if applicable)            │
│ [___________________________________]  │
│ VAT number (if applicable)              │
│ [___________________________________]  │
│ Gift message (if applicable)            │
│ [___________________________________]  │
└─────────────────────────────────────────┘

AFTER (progressive disclosure):
┌─────────────────────────────────────────┐
│ Shipping address                        │
│ [___________________________________]  │
│                                         │
│ ☑ Billing address same as shipping      │
│                                         │
│ ☐ This is a business purchase           │
│   (shows Company + VAT fields if checked) │
│                                         │
│ ☐ Add a gift message                    │
│   (shows message field if checked)      │
└─────────────────────────────────────────┘

Multi-Step Forms

When to Split a Form

• The form has more than 6-8 fields
• Fields fall into distinct logical groups
• Some fields depend on earlier answers
• The form has a high abandonment rate

Multi-Step Form Design

Step 1 of 4         Step 2 of 4         Step 3 of 4         Step 4 of 4
Account        →    Personal       →    Preferences    →    Review
  ●────────────────○────────────────○────────────────○

Multi-Step Progress Indicators

STYLE 1: Connected dots with labels
  ● Account ─── ○ Personal ─── ○ Payment ─── ○ Review
  (completed)    (current)      (upcoming)    (upcoming)

STYLE 2: Numbered steps
  ✓ 1 ─── ● 2 ─── ○ 3 ─── ○ 4

STYLE 3: Progress bar
  ████████████████░░░░░░░░░░░░░░  Step 2 of 4

Required vs. Optional Fields

Two schools of thought:

Preferred approach: Make every field required unless there's a good reason not to. Then mark the few optional ones with "(optional)" in the label. This reduces the number of markers needed and reduces form length overall (remove fields you don't need).

Full name
[_______________]

Email
[_______________]

Phone (optional)
[_______________]

Message
[_______________]

Accessible Form Patterns

Common Mistakes

Key Takeaways

• Single-column, labels above fields, validate on blur. These three decisions alone fix most form problems.
• Every error message needs: what's wrong, how to fix it, and (ideally) an example.
• Use the right input type and autocomplete attributes. They give you free mobile keyboards and autofill.
• Show fewer than 5 options as radio/checkboxes, not dropdowns. Make choices visible.
• Use progressive disclosure to hide conditional fields until they're relevant.
• Split forms with more than 6-8 fields into multi-step forms with clear progress indicators.
• Remove every field that isn't absolutely necessary. Every field you remove increases completion rates.
• Test forms with real users completing real tasks. Form problems only surface during actual use.