Forms
A form is a set of fields in the order a person can answer them, plus the validation, error reporting and submit behaviour that decides whether those answers survive. The layout carries more than it appears to: one column, a heading wherever the subject changes, and two fields on a row only where the values are read as a single thing, a first and last name, and not much beyond that. The primary action comes last, on its own.
The submit path is where forms are won and lost. When something fails, say what failed at the top, link each item to its field, move focus to the first problem, and keep every value already typed: a form that empties itself on an error is worse than one that never submitted at all. Steps deserve the same scrutiny. They are justified when a later section depends on an earlier one, and they are pure friction when the sections are independent and a single scroll would have done the job.
Contact form
Best for
A marketing or support form: the drawn banner carries the ask, the column carries the answers
Anatomy
Drawn banner with its gradient and two lines · one column of fields 12px apart · counted message · Submit last, on its own
Got a project in mind?
Reach out with your idea, question, or feedback. We read every message and reply within 24 hours.
Contact form · stacked
Best for
The same form where the width is the page's, not a column's: the banner spans it
Anatomy
Banner across the top · first and last name paired on one row · email and message under them · Submit last
Got a project in mind?
Reach out with your idea, question, or feedback. We read every message and reply within 24 hours.
Application form
Best for
A form long enough to need steps, and whose last step depends on the first four
Anatomy
Header with a Sign in action · five-step indicator · a heading per step · Back and Next, Next dead until the step is answered
QuickApply
Complete your application in minutes. We'll guide you through every step.
Tell us about yourself
Using Forms
Reach for it when
- A contact or support request short enough to answer in one sitting
- An application long enough that one page would hide its own end, where a later section depends on earlier answers
- Settings a person edits and saves, read out of order by somebody hunting one control
- Any flow where a rejected answer has to be reported without losing the accepted ones
Reach for something else when
- One value changes and applies at once: a switch or an inline field that saves itself, with no Submit to press
- There is a single question: a prompt with two buttons, or one field in a dialog, costs far less than a form does
- Steps are being added for their own sake: if nothing in the last section depends on the first, one column and a scroll is faster than Back and Next
Where it shows up
Contact and support requests
A marketing page asks for a name, an email address and a message, with the message counted so its limit is visible while it is being written. The banner carries the ask and the column carries the answers.
Multi-step applications
An application collects enough that one page would hide its own end. A step indicator names the sections, each step gets a heading, and the last reviews what the earlier ones collected before anything is sent.
Account settings
Settings are read out of order by people looking for one control, so each field keeps a visible label and its own hint, and the save action stays at the foot where the changed values end.
Checkout details
Billing and address entry pairs a first and last name on one row because they are read as one value, keeps the rest in a single column, and reports a declined card at the top without clearing the fields.
Questions
Should form labels sit above the field or inside it?
Above. A placeholder used as a label disappears the moment somebody types, so they lose the name of the field exactly when they are checking their answer, and it behaves badly for screen readers and browser autofill. Keep the label visible above the input, and use the placeholder, if at all, for an example of the format expected.
When should a form validate, while typing, on blur, or on submit?
Validate on blur for the first pass, so nobody is told they are wrong halfway through typing an email address. Once a field has been marked invalid, re-check as they type, so the error clears the moment it is fixed. On submit, list everything that failed at the top, link each entry to its field, and move focus to the first one.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPForms
A form is a set of fields in the order a person can answer them, plus the validation, error reporting and submit behaviour that decides whether those answers survive. The layout carries more than it appears to: one column, a heading wherever the subject changes, and two fields on a row only where the values are read as a single thing, a first and last name, and not much beyond that. The primary action comes last, on its own.
The submit path is where forms are won and lost. When something fails, say what failed at the top, link each item to its field, move focus to the first problem, and keep every value already typed: a form that empties itself on an error is worse than one that never submitted at all. Steps deserve the same scrutiny. They are justified when a later section depends on an earlier one, and they are pure friction when the sections are independent and a single scroll would have done the job.
Contact form
Best for
A marketing or support form: the drawn banner carries the ask, the column carries the answers
Anatomy
Drawn banner with its gradient and two lines · one column of fields 12px apart · counted message · Submit last, on its own
Got a project in mind?
Reach out with your idea, question, or feedback. We read every message and reply within 24 hours.
Contact form · stacked
Best for
The same form where the width is the page's, not a column's: the banner spans it
Anatomy
Banner across the top · first and last name paired on one row · email and message under them · Submit last
Got a project in mind?
Reach out with your idea, question, or feedback. We read every message and reply within 24 hours.
Application form
Best for
A form long enough to need steps, and whose last step depends on the first four
Anatomy
Header with a Sign in action · five-step indicator · a heading per step · Back and Next, Next dead until the step is answered
QuickApply
Complete your application in minutes. We'll guide you through every step.
Tell us about yourself
Using Forms
Reach for it when
- A contact or support request short enough to answer in one sitting
- An application long enough that one page would hide its own end, where a later section depends on earlier answers
- Settings a person edits and saves, read out of order by somebody hunting one control
- Any flow where a rejected answer has to be reported without losing the accepted ones
Reach for something else when
- One value changes and applies at once: a switch or an inline field that saves itself, with no Submit to press
- There is a single question: a prompt with two buttons, or one field in a dialog, costs far less than a form does
- Steps are being added for their own sake: if nothing in the last section depends on the first, one column and a scroll is faster than Back and Next
Where it shows up
Contact and support requests
A marketing page asks for a name, an email address and a message, with the message counted so its limit is visible while it is being written. The banner carries the ask and the column carries the answers.
Multi-step applications
An application collects enough that one page would hide its own end. A step indicator names the sections, each step gets a heading, and the last reviews what the earlier ones collected before anything is sent.
Account settings
Settings are read out of order by people looking for one control, so each field keeps a visible label and its own hint, and the save action stays at the foot where the changed values end.
Checkout details
Billing and address entry pairs a first and last name on one row because they are read as one value, keeps the rest in a single column, and reports a declined card at the top without clearing the fields.
Questions
Should form labels sit above the field or inside it?
Above. A placeholder used as a label disappears the moment somebody types, so they lose the name of the field exactly when they are checking their answer, and it behaves badly for screen readers and browser autofill. Keep the label visible above the input, and use the placeholder, if at all, for an example of the format expected.
When should a form validate, while typing, on blur, or on submit?
Validate on blur for the first pass, so nobody is told they are wrong halfway through typing an email address. Once a field has been marked invalid, re-check as they type, so the error clears the moment it is fixed. On submit, list everything that failed at the top, link each entry to its field, and move focus to the first one.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
