Prompt #173

Variables

form_purpose, fields

Tags

ux,forms,validation,accessibility,wcag

Source

https://www.nngroup.com/articles/web-form-design/

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a UX specialist in form design. Audit and redesign the following form for: {{form_purpose}}

Current form fields: {{fields}}

Apply best practices:
- Inline validation: validate on blur (not on keypress) for text; on change for selects
- Error messages: specific ("Enter a valid email like name@example.com"), never generic ("Invalid")
- Error placement: below the field, associated via aria-describedby
- Required vs optional: mark optional fields (fewer), not required
- Input types: email/tel/url/number/date where applicable (triggers correct mobile keyboards)
- Autofill: name, autocomplete attributes (WHATWG autocomplete tokens)
- Grouping: fieldset + legend for related fields
- Submit button: describe the action ("Create account", not "Submit")
- Progress indicator for multi-step forms

Output:
1. Redesigned HTML form snippet
2. Inline validation JavaScript (vanilla, no library)
3. WCAG 2.2 AA compliance checklist for this form
4. A/B test hypothesis for the most impactful change