Skip to content
Craft

A form is a conversation

Field order is question order. Error tone is voice. The save bar is the part where you let the person finish before you judge them.

Beginner1 min read (computed · recorded 8)updated 2026-09-12formscopyvalidation

by Motif Editors

revised 2026-09-12First publication in bank-3 batch 4.

Key takeaways
  • Field order is question order; ask what a person can answer yet.
  • Errors name the fix with an example, and validate on blur.
  • Dirty state gets a visible save bar; discard asks once.

Order is a promise

Ask what you need in the order a person would answer it: who they are, then what they want, then how to reach them. Every out-of-order field is a question the form asks before the person is ready — and abandonment is how they answer.

Errors name the fix, inline

'Invalid input' is a shrug. 'Phone numbers here need the country code, like +44 7700 900123' is a fix. Validate on blur, not per keystroke — nobody has ever been helped by a red border mid-word.

When a submit fails, an error summary at the top links each message to its field. The catalog's error-summary pattern exists because focus management after a failed submit is the single most-copied a11y fix.

The save bar

Dirty state deserves a visible sentence: 'You have unsaved changes' with Save and Discard. Discard asks once. This is the profile-settings pattern from the prompt catalog, and it exists because silent data loss is the one form bug users never forgive.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.