A form is a group of related controls that allow users to provide data or configure options. Forms can be presented as either 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.
A single form is comprised of multiple fields on a single page with a “submit” button at the bottom of the page. This should be used when users need to edit their entries frequently or review all entries at one time. Specific use cases include the "Beat my Loan" feature.
Progressive disclosure form
A progressive disclosure form is comprised of a series of screens that list prompts, presented one at a time. The tone is conversational. This should be used when there is a long or complex flow and users don’t need to edit past entries frequently. Specific use cases include mortgage onboarding and student and personal loan pre-qualification .
Use spacings and a single column for the layout
The spacing around each field should communicate its relationship with both its own label and other fields.
Don'tOmit spacing between fields.
ExceptionA zigzag reading experience can be used if 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 (e.g. if they will be contacted by 3rd parties or how their information will be used).
DoShow the explanatory copy in a prominent place (e.g. the header or 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 (e.g. in credit card pre-qualification flows).
Progressive disclosure forms can require 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 the terms to ensure the user has read through.