From grimoire
Arranges form fields, labels, and actions using single-column layout, top-aligned labels, and blur-triggered validation to reduce abandonment and completion time.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:design-form-layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use single-column layout, top-aligned labels, blur-triggered validation, and specific action labels to reduce form abandonment and completion time.
Use single-column layout, top-aligned labels, blur-triggered validation, and specific action labels to reduce form abandonment and completion time.
Adopted by: Google Material Design, Apple HIG, IBM Carbon, Shopify Polaris, and Atlassian Design System all specify single-column forms, top-aligned labels, and inline validation as their default form pattern; Baymard Institute's Form Usability research (2020) is the most comprehensive empirical study of form UX with 40 guidelines tested across 30+ major e-commerce sites; Luke Wroblewski's "Web Form Design" (Rosenfeld Media, 2008) is the canonical design reference used at Google, Yahoo, and across the industry Impact: Baymard Institute: 26% of US adults abandon checkout primarily due to form friction; single-column forms are completed 15.4 seconds faster than multi-column forms of equivalent length (Wroblewski 2008); top-aligned labels reduce user eye-movement by 50% compared to right-aligned or left-aligned labels, and reduce completion time by 20% (Matteo Penzo eye-tracking study, LukeW 2006); inline validation reduces form errors by 22% compared to post-submit validation (Holst, Baymard 2020) Why best: Multi-column forms feel efficient to designers because they show more fields per viewport — but eye-tracking shows users scan vertically, not in columns; column-jumping doubles eye movement and cognitive load; the efficiency gain in viewport usage is outweighed by the increase in completion time and error rate
Sources: Wroblewski "Web Form Design" (Rosenfeld Media, 2008); Baymard Institute "Form Field Usability" (2020); Penzo "Label Placement in Forms" (LukeW, 2006); NNG "Form Design Garage" (Pernice, 2016)
Default to single-column forms. Place one field per row, full width:
❌ Multi-column:
[First name ] [Last name ]
[City ] [State ] [ZIP ]
✅ Single-column:
[First name ]
[Last name ]
[City ]
[State ]
[ZIP code ]
When multi-column is acceptable:
[Month] [Day] [Year] for a date[City] [State/Province] [Postal code] — these belong together conceptually and users expect this layoutOutside these exceptions, default single-column.
Place labels above their input, not to the left or inside:
❌ Left-aligned (right of label):
Email address: [ ]
❌ Placeholder only (no persistent label):
[Email address ]
✅ Top-aligned:
Email address
[ ]
Why top-aligned wins:
Exception: Very short inline forms (2–3 fields on a single row, e.g., email + subscribe button) can use inline labels or placeholder-as-label when the form is self-evident and fields are not sensitive.
Invert the conventional asterisk pattern:
❌ Mark required with asterisk:
First name *
Last name *
Phone number *
Middle name ← user doesn't know if this is required or optional
✅ Mark optional explicitly:
First name
Last name
Phone number
Middle name (optional)
Why: When most fields are required (standard), marking required adds noise everywhere; marking optional tells users exactly which fields they can skip — the decision that matters. If more than 50% of fields are optional, consider removing the optional ones entirely; every field adds cognitive load and time.
For forms longer than 6 fields, group fields into named sections:
Contact information
───────────────────
First name
Last name
Email address
Shipping address
────────────────
Street address
City
State / Province
Postal code
Country
Groups reduce form paralysis — users tackle one section at a time instead of seeing a wall of fields. Use a visible divider or heading label; never group implicitly through whitespace alone.
Multi-step forms: For 10+ fields or multiple conceptual phases (account + shipping + payment), split into steps with a progress indicator. Multi-step forms outperform long single-page forms for completion rate when steps are conceptually distinct (Baymard 2020). Do not create steps just to appear shorter — each step must represent a coherent task.
Trigger field validation when the user leaves the field (blur), not while they're typing:
Validation timing:
❌ On keystroke: user types "m" → "Invalid email" appears → hostile and premature
❌ On submit only: user fills 8 fields → submits → 3 errors appear → must scroll to find them
✅ On blur: user leaves the email field → if invalid, error appears immediately below that field
Inline validation rules:
write-microcopy)Primary action button placement:
✅ Standard layout:
[Form fields]
[Submit / primary action] [Cancel / secondary action]
Primary on left, secondary on right (web convention)
Exception: iOS — primary action on right (follows system convention)
Action label: Use a specific verb + object matching what happens when the form is submitted:
❌ "Submit" → no one wants to "submit"
❌ "Continue" → where? to what?
✅ "Create account"
✅ "Place order"
✅ "Save changes"
✅ "Send message"
Disable primary action: Do not disable the submit button pre-emptively. Disabling before the user has attempted to submit hides which fields are required. Only disable the button after submission begins (to prevent double-submit), then restore if the submission fails.
Field order should match the mental model of what users are filling out, not the data model of the backend:
✅ User mental model order (checkout):
Contact → Shipping → Payment → Review
❌ Database order:
order_id, user_id, payment_method_id, shipping_address_id, created_at ...
Tab order must follow the visual order of the form — top to bottom, left to right within rows. Test by tabbing through the form; the focus ring must advance in reading order. Skipping fields, jumping to the wrong field, or focus disappearing entirely fails keyboard accessibility (applies to all users using keyboard, not just screen reader users).
npx claudepluginhub jeffreytse/grimoire --plugin grimoireDesigns forms with progressive disclosure, smart defaults, forgiving formats, and error recovery. Guides validation timing (blur, keystroke, submit) and single-column layout for faster completion.
Provides form UX best practices: inline validation with 'reward early, punish late' strategy, auto-save vs explicit save, error messages, multi-step wizards, toggles.
Designs multi-step forms with progress indicators, conditional logic, and save-and-resume mechanics. Audits form conversion drop-off and decides when steps add value versus friction.