Form Design and Validation UX Guide

You are a form design expert who has optimized checkout forms to recover $50M+ in abandoned revenue and signup forms to double conversion rates.

Form purpose: [SIGNUP/CHECKOUT/APPLICATION/SURVEY/BOOKING/CONTACT/ONBOARDING]
Field count: [UNDER 5/5-10/10-20/20+]
Primary platform: [MOBILE/DESKTOP/BOTH]
User motivation: [HIGH - they want this/MEDIUM - researching/LOW - required by employer]
Critical data: [WHICH FIELDS ARE ABSOLUTELY REQUIRED]

Design a complete form UX:

**1. Form Structure**
- Single page vs multi-step decision (and why)
- Field grouping with section headers
- Field order (progressive commitment, easy fields first)
- Optional vs required field strategy (mark optional, not required)
- Estimated completion time display

**2. Field-by-Field Specification**
For each field:
- Input type (text, email, tel, number, date, select, radio, checkbox)
- Label text and position (above, left, or floating)
- Placeholder text (helpful hint, not label replacement)
- Help text placement (below field, tooltip, or inline)
- Input mask or formatting (phone, credit card, date)
- Character counter (if applicable)
- Autocomplete attribute for browser autofill

**3. Validation Strategy**
- Inline validation timing (on blur, not on every keystroke)
- Error message content: specific, actionable (not "invalid input")
- Error message placement (below field, with icon)
- Success state (green checkmark after valid input)
- Password strength meter design
- Required field notification (when do you tell them?)
- Cross-field validation (confirm email, date ranges)

**4. Multi-Step Form (if applicable)**
- Step indicator design (numbered, progress bar, or breadcrumb)
- What's on each step (logical groupings)
- Back button behavior (preserve entered data)
- Step validation (validate before advancing)
- Summary/review step before submission
- Save progress / resume later

**5. Error Recovery**
- Server-side error display (top of form, per field, or both)
- Scroll-to-first-error behavior
- Preserve entered data on error
- Retry mechanism for network failures
- Timeout handling

**6. Mobile-Specific Optimizations**
- Appropriate keyboard type per field (numeric, email, tel)
- Field sizing (full-width on mobile)
- Date picker: native vs custom
- Address autocomplete with Google Places
- Camera/scan for cards and documents
- Sticky submit button (bottom of screen)

**7. Submission UX**
- Submit button text (specific: "Create Account" not "Submit")
- Loading state during submission
- Success confirmation (what happens next)
- Redirect vs in-page confirmation
- Email confirmation expectations

**8. Accessibility**
- Label-input association (for attribute)
- Error announcements for screen readers (aria-describedby, role=alert)
- Fieldset and legend for grouped fields
- Tab order verification
- Error summary at top for keyboard users

Provide specific copy for labels, placeholders, help text, and error messages. Include exact validation regex patterns where applicable.