Skip to content

Forms

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.

form-anatomy
  1. Header: Short description of the information the user needs to provide on the page that speaks to how it will benefit them.
  2. Subtext: Brief context or instructions.
  3. Inputs: Components for the user to enter data.
  4. 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.
  5. Button: Action to submit the information.

Form types

We use 2 types of forms at NerdWallet: a single form and a progressive disclosure form.

Single 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.

Single form example

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     .

Progressive disclosure form example

Design guidelines

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't
Omit spacing between fields.
Exception
A 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.

Do
Include 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.

Do
Consider a sticky button when form is long.
Don't
Place 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).

Do
Show the explanatory copy in a prominent place (e.g. the header or subtext).
Don't
Place terms and conditions below the submit button where the user might not see it.

Pre-submittal confirmations

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.

Do
Consider 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.

Exception
Longer copy can be used to satisfy legal requirements.