forms-and-data-entry
Installation
SKILL.md
Forms & Data Entry
A form is a conversation, not an interrogation. Every field is a cost the user pays; every field you remove is a conversion you keep. The job: ask for the least, in the clearest order, with the right control and keyboard, validate kindly, and tell people exactly how to fix mistakes. Get layout, labels, input type, and validation right and the rest is polish.
1. Form layout
Single column wins. A single top-to-bottom column has one unambiguous reading path; multi-column forms force the eye to zig-zag, double completion time, and routinely get fields skipped or mis-paired. The only sanctioned exceptions sit inside one logical field and read left-to-right anyway: City / State / ZIP, Expiry / CVC, First / Last. Never split unrelated fields across columns.
| Do | Don't |
|---|---|
| One vertical column, full-width fields | Two columns of unrelated inputs side by side |
Group Expiry+CVC, City+State+ZIP on one row |
Put Name and Phone side by side |
| Order fields the way the user thinks (name → email → address → payment) | Random or DB-schema order |
| One thing per screen on mobile for long flows | Cram a 15-field form onto one mobile view |
- Minimize length. Cut every field that isn't required now. Each removed field measurably lifts completion. Derive what you can (country from IP, city/state from ZIP lookup) instead of asking.
- Group with
<fieldset>+<legend>for related sets (an address block, a radio group). Section long forms with headings ("Contact", "Shipping", "Payment") and visual breaks so it reads as chunks, not a wall. - Logical order: identity → contact → details → payment → review. Match the user's mental model and any physical artifact (the card layout, the paper form).
- One-thing-per-screen on mobile: for onboarding/checkout, a sequence of focused single-question screens beats one giant scroll. Higher completion, trivial keyboard handling, natural progress.