Design Specs


Form spec

  1. Form Title Text ­ T3:
    • OpenSans Semibold in #001733
      • For Desktop, the font size is 21px.
      • For Mobile, the font size is 14px.
    • padding of 20px above and below form title
  2. Field Label Text ­ T5:
    • Label: OpenSans Semibold in #001733
      • For Desktop, the font size is 15px.
      • For Mobile, the font size is 14px.
    • Instructive Text (ex: required, optional): OpenSans Regular Italic in #666
      • For Desktop, the font size is 13px.
      • For Mobile, the font size is 12px.
    • padding of 10px below field label (and its respective field)
  3. Entry Field:
    • Height 36px
    • Border Top­ 2px, 666666
    • Border Right, Left, Bottom­ 1px, #D0D0D0
    • ON focus border color is browser default
    • padding of 20px below field (i.e. above field label)
  4. Help Text:
    • OpenSans Regular in #005CCC
      • For Desktop, the font size is 15px.
      • For Mobile, the font size is 14px.
    • padding of 14px below help text and above button
  5. Button alignment:
    • For in-page forms, the primary button should reside below the last input field and be left aligned. Secondary button(s) would then follow the primary button to its right.
    • For forms within a modal, the primary button is right aligned to the edge of the modal. Secondary button(s) would then be to the left of it.

Production Examples

  • Sears
  • Kmart



When Do I Use This?

Use when you need to collect information from a user such as shipping and delivery addresses or payment information.

Usage Guidelines

1. Build vertically

Build forms in a vertical manner as a single column.

2. Labels

Field labels should be above each field. They should consist of only two elements:

  1. The field label - It should clearly let the customer know what info needs to be entered.
  2. The priority flag - required or optional. [Exception: Do not show a priority flag on very simple forms: 1-2 fields (e.g., login, ZIP change)] DO NOT put required/optional in the field itself.

3. Input length

Field length should be close in width to the information being entered. This helps visually communicate what goes in a field. i.e. ZIP is 5 digits, it doesn't need to span the width of the page. Address fields can be a little longer to accommodate address variations.

4. Do not use instructional placeholders within text fields

The field label provides direction as to what input is required from the user. It is incorrect to use instructional text within a field (i.e. "Enter email address" in a field labeled 'Email').

5. Be forgiving of inputs

Don't make the user adapt to our system; rather, adapt the system to the user. Allow all reasonable user entries, then adjust formatting during submission to meet database criteria. Example: phone number may be entered many different ways; last names exist with apostrophe (') and hyphens.

6. Pre-population and data retention

If the information for a field is available, then that information should be pre-populated. Examples include:

  1. Data from a user's profile–Example use: checkout payment and billing
  2. Data entered during a user's session - example use: Checkout - if a user jumps back to step 1 to fix a typo, don't lose entries from step 2 or 3
If not, the field input remains blank.

7. Group related form elements into logical groupings

For large forms, consider using modules or multi-step processes where each has an individual submission element to decrease cognitive load, improve error handling and perceived progress.

8. Use only button CTAs

Use only buttons to submit the form or cancel the submission. Do no use links.

ADA Compliance

Many users can only use a keyboard to navigate and use the web. You must ensure that the forms on your web site can be completed using only the keyboard.
The accessibility issue for forms is whether or not users with disabilities, especially those who are blind or visually impaired, can determine the purpose of a specific form control and interact with it. Web-based forms can be inaccessible if users cannot identify form elements when attempting to complete the form. The two major accessibility issues associated with completing forms: understanding which text label describes each form field and understanding which fields are required to complete the form.
Screen reader users need the ability to tab through a form and understand the purpose of each form element. A screen reader user will be aware that a text entry field has focus, or a text area or check box,, but may not know what information to type there or what is being agreed to with the check.

Useful Links:


Using a layout that is left-aligned in a vertical column supports an F-shaped scanning pattern – where each subsequent element and label is placed consistently and naturally for Western (L-R) readers.
Field Labels above (vs inside) of text fields is an industry best practice and have performed well in our own Research studies. For example - field labels above offer persistent context and information to the user on what to enter and how, rather than within a field where a user's entry removes the label.
Also, field labels above handle translation better - changing languages changes character counts; which, if the label is within the field may not be long enough.
Stating both required and optional decreases user's mental burden and eliminates ambiguity.
Styling: Previous standards were re-styled to align w/ "Enterprise" system in Fall 2014.


Best Practices for Design

External study on best practices. Validates many of our guidelines, provides others yet to be considered.

view article

Primary & Secondary Actions in Web Forms

"primary actions directly aligned with input fields tend to increase completion rates."

view article

Mobile 6.1 Benchmark

When no "required/optional" indicator made along w/ label text, users failed to understand which fields are required. In this case, the approach was to state "optional" inside of the text field; the rationale being that the user will assume that all others are required; again, it failed. - p35

view full study

Group Form Elements Effectively Using White Space

"Improve the layout of your online forms by placing form labels near the associated text field and by grouping similar fields." Whitespace is an effective grouping method. Also recommends "field labels above the corresponding text fields"

view article

Placeholders in Form Fields Are Harmful

"Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments."

view article

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.