Form Inputs

Review the following guidelines for optimal form design and development.
‍

Form Labels & Input Fields

1. Write clear and concise labels. Use simple and succinct labels that help the user understand what information is required at a glance.
2. Stack labels vertically above input field to:
   

• Allow the eye to scan the information more quickly.
• Reduce cognitive load so the user does not struggle to connect the label and input.
• Optimize design for mobile with full-width label and input.

Structure

1. Use a single-column layout. Single-column layouts are easier to follow, understand, complete and submit.
2. Clearly title your form so users understand exactly what they’ll achieve or receive once they submit it.
3. Add progress bars or a multi-step process for long forms. Chunking information helps users process, understand and recall content. It also gives a clear indication of how much effort is required to complete the form.
4. Group related fields together and provide clear section titles (e.g. Contact Information) and adequate spacing.

Action Buttons

1. Make action buttons descriptive, giving the user a clear understanding of what will happen upon selecting it. Avoid generic labels such as “Submit” and “Send,” using instead labels that describe the action.
2. Use the Default or Prominent button for the primary action and the Subtle or Ghost buttons for secondary actions.

Feedback

1. Tooltips. Address possible user concerns with information tooltips. For example, why you need to collect specific information or how you will use that information.
2. Error Messages. Craft error messages that do not blame the user. It should explain the issue at hand and provide clear, direct instructions on how to correct the error.
3. Success Messages. Notify users of a successful completion of a form with a toast and next steps (if applicable).

Development Considerations

1. Use inline form field validation. It should appear once a user has moved to the next field, not while the user is still working within a field.
2. Use auto-fill browsers. Title each field with a common attribute that browsers will recognize to help speed up the form completion process for your visitor.
3. Enable the ability to tab to next form field. Allow usage of the tab key on forms so users can move to the next form field without lifting their hands off a keyboard.
4. Offer field focus. Auto-focus the first input field in your form. Auto-focusing a field gives the user an indication and a starting point, so that they can quickly start filling out the form. Thereafter, make the active input field prominent and focused.
5. Provide matching keyboard for mobile users. Set HTML input types to show the correct keypad. Seven input types are relevant to form design:

There are many considerations that go into a well-designed form experience, beyond the styling of the elements. We’ve outlined some key areas to focus on to build a user-friendly form experience.
‍

Validation Types

Inline

Inline validation shows the user in real time if an error has occurred while filling out a form. It may be an input error such as using an incorrect character or the field is required and was tabbed through. Using inline validation is preferred.

Best Practice

• Errors should not appear before the user has finished completing the input.

• Error messages should be removed dynamically once the user has corrected their mistake. Messaging should live-update on a keystroke level.

Error messages appear after the label and before the input. A light red background is used to bring attention to the message, while a red border highlights the input.

See Alerts page for specifications on Error banners at the top of the page.
‍

For all inputs, the focus state is derived from the browser. We also change the input border color as outlined below.
‍

It’s important to differentiate between required and optional fields. When using forms that contain mostly required fields, we recommend indicating which inputs are optional, rather than marking the required fields. Do not use an asterisk in the label to indicate mandatory fields—instead, write out “Optional” or “Required.”
‍
To maintain consistency and set expectations for the user, select one approach to use within a single application.
‍