HTML Form Layout — Single Column, Multi-Column, and Multi-Step

<!-- Multi-column responsive form (collapses to single column on mobile) -->
<style>
  .sf-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 720px; margin: 0 auto;
  }
  .sf-form-grid .full { grid-column: 1 / -1; }
  .sf-form-grid label { display: grid; gap: 6px; }
  .sf-form-grid input, .sf-form-grid textarea {
    padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px;
  }
  .sf-form-grid button {
    padding: 12px 24px; background: #1a1a1a; color: #fafaf7;
    border: 0; border-radius: 999px; cursor: pointer;
  }
</style>

<form class="sf-form-grid"
      action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label>First name<input name="first_name" required /></label>
  <label>Last name<input name="last_name" required /></label>
  <label>Email<input name="email" type="email" required /></label>
  <label>Phone<input name="phone" type="tel" /></label>

  <label class="full">Subject<input name="subject" required /></label>
  <label class="full">Message<textarea name="message" rows="5" required></textarea></label>

  <button type="submit" class="full">Send</button>
</form>

Single-column is the default. Every field on its own row, labels above, vertical scroll. Easiest to scan, easiest on mobile, easiest to make accessible. Use this until you have a specific reason not to.

Multi-column is for forms with many short related fields — first/last name, city/state/zip, credit card month/year. CSS Grid with `grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))` gives you responsive multi-column for free: fields reflow to one column on narrow viewports without media queries. Full-width fields (subject, message) span both columns with `grid-column: 1 / -1`.

Multi-step wizards are for long forms where completion rate matters more than visual density. Split fields across 2-4 steps with a progress indicator. Show 5-7 fields per step max. Save partial data so users can return — splitforms supports partial submissions on every plan (the dashboard shows them separately from completed ones).

The trap to avoid: applying a multi-column layout when single-column would work fine. Multi-column adds visual complexity, breaks the natural reading order, and confuses mobile reflow. Use it when you have a specific reason (visual density, screen real estate, related fields). Default to single-column otherwise.

Single column default, multi-column via CSS Grid auto-fit, multi-step for 8+ fields.