Forms

Overview

There are 2 main types of forms, those found on set up pages and those on settings pages. Both are used to collect user data via form elements like text, or select inputs. Forms on set up pages are used to set up accounts, processes, or features, and can have a Form Footer, whereas a settings page form allows the user to alter data they defined previously on a set up page.

Set up page forms

Set up page forms can either be contained on a single page or be broken out into multiple pages using a Stepper. Use a Stepper if the sequence of the form steps are known. Do not use a Stepper for settings page forms.

If the set up form starts with a text input, have that input auto-focus on-load. Do not use this pattern for setting page forms.

Setting page forms

Simple setting page forms can live on a single page. If they are long with many sections, they can be broken up into several different pages. For these types of forms, do not use a Form Footer, and if needed, place a back link on the top left of the page.

When possible, it is also good practice to help the user by pre-filling the form.

UI design & label placement

Consider the user’s mental model when designing your form. Usually, if it’s a set up form, the user will progress linearly from one input to the next. In this case, having labels above the input is best. 



On a settings page, if the user is scanning the form for a specific line item, consider placing the labels on the left of the input instead. For more information on label placement, view this article.

Single column forms perform better than multi-column forms

Exceptions to this rule are short and/or logically related fields such as City, State, and Zip Code. Learn more.

Progressive disclosure

You can decrease the cognitive load of your set up form by only surfacing the immediate inputs the user needs to complete before surfacing other secondary inputs. Learn more about progressive disclosure.

Form modals

Ideally, forms in Modals allow the user to complete simple tasks (with usually less than 4 inputs) while maintaining the context of the page they’re on. Proceed with caution when integrating Steppers in modals, as we generally recommend that complex tasks be dedicated to a page to remove any potential of clicking outside the modal.

Expandable Cards

Expandable Cards in set up forms can be used to display advanced or secondary parts of your form that are non essential to the form’s completion. Use Expandable Cards on settings pages, that have many sections, to improve scan-ability. 



Don’t make all your sections in set up forms collapsible. Avoid making sections with only one input expandable/collapsible. 



Consider having the first card open by default. To learn more about when to use Expandable Cards, click here.

Form buttons

Buttons are sorted by importance from right to left, with the primary button on the right.

Form confirmation buttons should remain disabled until the form can be submitted or the user can move on to the next step. Never use a reset button.

Back Buttons

Only surface a back button on a set up form that uses a Stepper. If needed, place the back button on the bottom left of the Form Footer after the user has completed the first step. To learn more about how to use Form Footers, click here.

Autosave

When possible, design setting page form inputs to validate inline and autosave (when not making destructive changes).

Accessibility

Users should be able to navigate forms via keyboard, and tab through each form input. All elements of the form should be accessible via keyboard, even areas of the form that are nested or collapsed.

When possible try to provide inline validation, doing so allows keyboard users not to navigate as far back to fix their entries.