A form is a group of related controls that allow users to provide data or configure options. Forms can be presented as dedicated pages or modals.
- Header: Short description of the information the user needs to provide on the page that speaks to how it will benefit them.
- Subtext: Brief context or instructions.
- Inputs: Components for the user to enter data.
- Disclaimer: Explanation of how a user’s information is used and/or terms and conditions that the user must consent to per legal requirements. Disclaimers are only displayed when we share data with a third party.
- Button: Action to submit the information.
We use 2 types of forms at NerdWallet: a single form and a progressive disclosure form.
- Is: comprised of multiple fields on a single page with a “submit” button at the bottom of the page.
- Use when: users need to edit their entries frequently or review all entries at one time.
- Product use cases: Beat my loan feature
Progressive disclosure form:
- Is: comprised of a series of screens that list prompts, presented one at a time. The tone is conversational.
- Use when: there is a long or complex flow and users don’t need to edit the form frequently.
- Product use cases: Mortgage onboarding , Student and personal loan pre-qualification.
Use spacings and a single column for the layout
Space between each field should communicate the relationship between the field and its label and the fields from each other.
Don'tMiss spacings between fields.
ExceptionAvoid zigzag reading experience unless fields are correlated.
Add a progress bar in a long form
Consider visual cues to show the user what they’ve completed and what they have left to do.
DoInclude a visual cue to show progression.
Make it easy for the user to progress
The user should be able to easily advance to the next page of the form or view their results.
DoConsider a sticky button when form is long.
Don'tPlace the submit button below the fold.
Be transparent about the terms and conditions
Set clear expectations about what will happen after the user completes the form (i.e. if they will be contacted by 3rd parties, how their information will be used.).
DoShow the explanatory copy in a prominent place (i.e. header, subtext)
Don'tPlace terms and conditions below the submit button where the user might not see it.
- Users may need to actively opt into terms and conditions before submitting their information.
- Use case: Credit cards and Loans pre-qualification flows.
- Progressive disclosure forms can have a number of confirmations. In those cases, we use the final confirmation to deliver info about the form (approved or declined) and set user expectations for the next page.
DoConsider using a checkbox or other confirmation interaction above the submit button to ensure users have read the necessary information.
Keep the confirmation copy simple
- In most cases the confirmation copy (located directly next to the checkbox) should be short and simple.
- The checkbox should default to inactive until the user scrolls to the bottom of terms to ensure the user has read through.