Forms

Purpose

Forms are a compilation of components that customers use to enter data or personal information. They can include inputs, checkboxes, radio buttons, dropdowns, buttons, and more.

Overview

Usage

Forms are vital throughout the American Express journey. Below is a compilation of form best practices. Use these to enhance the user experience and gather accurate information.

Keep Forms Short

The more information you ask for, the higher the chance a customer abandons the form. Only ask for information you need and avoid unnecessary fields and questions.

Write Clear Labels

Keep labels sentence case and describe the field in as few words as possible. Clear labels make forms accessible and limits the need for hint text. If additional instructions are needed to fill out a field, see guidelines around hint text or tooltips below.

Label Optional Fields

Customers assume all fields are required. Denote which fields are optional. Do not use an asterisk to mark a required field.

Example - Label Optional Fields

Top-align Labels

Top-align each label above its field. This format is mobile friendly and makes it easy for customers to scan a page quickly.

Example - Top Align Labels

Group Related Fields

Grouping related fields together establishes association.

Here are some tips for grouping information:

• If the form has more than six fields, group fields into logical sections.
• Write a header for each grouped section.
• Provide enough white space between sections to distinguish them apart.

Example - Group Related Fields

Use Input Masking and Proper Formatting

Input masking is a technique that helps users format entered text. Masking automatically formats the data provided by the user.

Formatting uncertainty occurs when a user doesn’t know how, or which format to use, to complete a field. This uncertainty can lead a user to abandon a form.

Here are some tips to follow when creating input masks:

• Do not use masking when the field is active. Apply input masking once the user clicks outside of the field.
• Use input masking for specifically formatted fields like Phone number and Social Security number.
• Localize input masking to the customer’s region. For example, phone numbers in the US are 10 digits, including area code. However, in Hong Kong, there are no area codes and phone numbers are 8 digits.
• Do not repurpose input masking for other regions without first researching, testing, and verifying that region’s data formatting.

Automate actions

Below is a list of common automated actions that can optionally be applied to forms.

Autocomplete: Provides a list of smart suggestions based on what has been typed. For example, a form could autocomplete “Illinois” in the State field if “Chicago” is typed in the City field.

Autocapitalize: Capitalizes the first letter of every word in a field. This is appropriate for fields like Name and Home address. Do not use for case-sensitive fields like Password.

Autocorrect: Corrects the spelling of perceived misspelled words. Disable this feature for fields with unique entries like Last name and Home address.

Hint Text

Hint text is important information that helps a user complete an input field. Hint text is always optional, but it may prevent the occurrence of error messages. For additional information for the field, use a tooltip instead.

Here are some guidelines around hint text:

• Place hint text between the field label and the input field.
• Write hint text in complete sentences with punctuation.
• Make sure hint text is accessible for those using assistive technology, like ARIA.
• Use hint text only when necessary to avoid overwhelming the user.

Example - Hint Text

Tooltip

Tooltips provide additional information to users who may be unfamiliar with a particular input field. Do not use tooltips for essential information. For essential information use hint text.

Tooltips appear as an information glyph.

Example - Tooltip for additional information

Placeholder Text

Placeholder text guides the user with an example on what to enter. It appears inside a field and disappears once a user begins to type. It is always optional.

Placeholder text is not recommended due to numerous usability issues, however, if you must use it, here are some things to remember when writing placeholder text:

• The default light grey color of placeholder text is poorly contrasted against most backgrounds. Users may mistake the placeholder for data that was automatically entered.
• Disappearing placeholders may confuse customers, especially those with cognitive or motor impairments.
• Don’t include an example as a placeholder. The user may think the text is pre-filled.
• Write placeholder text in sentence case. Punctuation is not necessary.

Form Layout

Design forms for efficiency and accuracy. Forms that are easy to scan help users fill them out quickly.

Columns

Single-column forms are the easiest forms to complete. In addition to being mobile friendly, they allow eyes to move naturally from top to bottom.

Multi-column forms are prone to misinterpretation, disrupt visual momentum, and present no clear progression order.

There are, however, exceptions. It might be preferable to place two or three short inputs on the same row if they are logically related. Here are some examples:

• first name, mi, last name
• city, state/province, zip code
• credit card number, expiration date, security code
• day, month, year

Example - Columns

Do this.

Don't do this.

Buttons

Alignment

The type of form you are building should advise button alignment. Single-column forms should have left-aligned buttons that are in the users visual path throughout the form.

Complex forms, such as multi-column or multi-page forms, should have right-aligned buttons.

For multi-page forms, the Continue button goes on the right while the Back button goes on the left. This maps to the direction users want to go when they paginate.

Primary and Secondary Buttons

Avoid secondary actions, like Cancel or Discard. These can distract users from submitting the form. If you must use a secondary action, always use the primary button for the main action to the right of the secondary action.

For more information, visit Horizontal Buttons.

Make Button Text Descriptive

Button text is clear and simple. Avoid vague labels, like Submit or Send, to describe an action. Use task-specific labels that describe the action. Examples include: Create Account, Subscribe Now, Send Message, Register Free.

To learn more, visit Button Text.

Disabled Buttons

Disabled buttons are not user friendly. For example, disabling the Submit button when users try to submit a form does not inform them what is wrong with their entries.

Be sure to provide real time validation for each field and use a loading button once the form is submitted to prevent duplicate submissions.

Spacing

Users consider items in close proximity to be related to each other. Allow ample space between your fields, so they don’t feel crowded.

You can also group your sections under section headers. This creates a more user friendly, scannable form. For more guidelines, visit Group Related Fields.

Example - Single-Column Form

Usage of single-column form is recommended.

Usage of single-column form is recommended.

<div class="col-xs-12 col-md-12 col-lg-8">
    <form class="dls-white-bg border pad-responsive stack" onsubmit="event.preventDefault();">
        <h3 class="heading-5 margin-b-3">Form Title</h3>
        <div>
            <label for="lt-1" class="label-3">Label text</label>
            <input id="lt-1" class="form-control">
        </div>
        <div data-toggle="inputfield" class="has-warning">
            <label class="label-3" for="lt-2">Label text</label>
            <input id="lt-2" class="form-control focus" aria-describedby="inputAlert" required />
            <div id="inputAlert" class="alert-form" role="alert">
                <span class="icon icon-sm dls-icon-warning-filled valign-top margin-1-r"></span>
                <span>Error message</span>
            </div>
        </div>
        <div>
            <label for="lt-3" class="label-3">Label text (optional)</label>
            <input id="lt-3" class="form-control">
        </div>
        <div>
            <label for="lt-4" class="label-3 margin-bottom">Checkbox label text</label>
            <div fieldset class="stack">
                <div class="checkbox">
                    <input id="lt-4-checkbox-1" type="checkbox" name="example-checkbox" value="1" />
                    <label for="lt-4-checkbox-1">Label</label>
                </div>
                <div class="checkbox">
                    <input id="lt-4-checkbox-2" type="checkbox" name="example-checkbox-checked" value="1" />
                    <label for="lt-4-checkbox-2">Label</label>
                </div>
                <div class="checkbox">
                    <input id="lt-4-checkbox-3" type="checkbox" name="example-checkbox-b" value="1" />
                    <label for="lt-4-checkbox-3">Label</label>
                </div>
                <div class="checkbox">
                    <input id="lt-4-checkbox-4" type="checkbox" name="example-checkbox-c" value="1" />
                    <label for="lt-4-checkbox-4">Label</label>
                </div>
            </div>
        </div>
        <div class="margin-4-b">
            <label for="lt-5" class="label-3">Dropdown label</label>
            <div class="select fluid form-control">
                <select id="dropdown-lt-5">
                    <option value=""></option>
                    <option value="1">Selection 1</option>
                    <option value="2">Selection 2</option>
                    <option value="3">Selection 3</option>
                    <option value="4">Selection 4</option>
                    <option value="5">Selection 5</option>
                </select>
            </div>
        </div>
        <button class="btn">Primary Button</button>
    </form>
</div>

Example - Single-Column Form with Section Headers

Usage of single-column form is recommended.

<div class="col-xs-12 col-md-12 col-lg-8">
  <form class="dls-white-bg border pad-responsive stack" onsubmit="event.preventDefault();">
    <h3 class="heading-5 margin-3-b">Form Title</h3>
    <h3 class="heading-4 dls-deep-blue margin-1-b">Section header</h3>
    <p class="body-1 margin-2-b">Optional sub copy can go here.</p>
    <div>
      <label for="lt-1" class="label-3">Label text</label>
      <input id="lt-1" class="form-control">
    </div>
    <div class="margin-3-b">
      <label for="lt-3" class="label-3">Label text (optional)</label>
      <input id="lt-3" class="form-control">
    </div>

    <h3 class="heading-4 dls-deep-blue margin-2-b">Section header</h3>
    <div data-toggle="inputfield " class="has-warning">
      <label class="label-3" for="lt-2">Label text</label>
      <input id="lt-2" class="form-control focus" aria-describedby="inputAlert" required />
      <div id="inputAlert" class="alert-form" role="alert">
        <span class="icon icon-sm dls-icon-warning-filled valign-top margin-1-r"></span>
        <span>Error message</span>
      </div>
    </div>
    <div class="margin-4-b">
      <label for="lt-5" class="label-3">Dropdown label</label>
      <div class="select fluid form-control">
        <select id="dropdown-lt-5">
          <option value=""></option>
          <option value="1">Selection 1</option>
          <option value="2">Selection 2</option>
          <option value="3">Selection 3</option>
          <option value="4">Selection 4</option>
          <option value="5">Selection 5</option>
        </select>
      </div>
    </div>
    <button class="btn">Primary Button</button>
  </form>
</div>

Example - Multi-Column Form

Multi-column forms are not recommended, as they can be easily misinterpreted.

<div class="col-xs-12 col-md-12 col-lg-9">
  <form class="dls-white-bg border pad-responsive stack" onsubmit="event.preventDefault();">
    <h3 class="heading-5 margin-1-b">Form Title</h3>
    <p class="margin-3-b">Optional sub copy can go here</p>
    <div class="row">
      <div class="col-xs-12 col-md-6 margin-2-b">
        <label for="lt-1" class="label-3">Label text</label>
        <input id="lt-1" class="form-control">
      </div>
      <div class="col-xs-12 col-md-6 margin-2-b">
        <label for="lt-2" class="label-3">Dropdown label</label>
        <div class="select fluid form-control">
          <select id="dropdown-lt-2">
            <option value=""></option>
            <option value="1">Selection 1</option>
            <option value="2">Selection 2</option>
            <option value="3">Selection 3</option>
            <option value="4">Selection 4</option>
            <option value="5">Selection 5</option>
          </select>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 margin-2-b">
        <label for="lt-3" class="label-3">Label text</label>
        <span id="inputHint" class="hint">Hint Text.</span>
        <input id="lt-3" class="form-control">
      </div>
      <div class="col-xs-12 col-md-6 margin-2-b margin-auto-t">
        <label for="lt-4" class="label-3">Label text</label>
        <input id="lt-4" class="form-control">
      </div>
      <div class="col-xs-12 col-md-6 margin-2-b">
        <label for="lt-5" class="label-3 margin-1-b">Label text</label>
        <div class="flex flex-wrap flex-align-items-center">
          <div class="radio margin-3-r margin-0-b">
            <input id="radio-1" type="radio" aria-invalid="false" name="example-radios" />
            <label for="radio-1">Radio label</label>
          </div>
          <div class="radio">
            <input id="radio-2" type="radio" aria-invalid="false" name="example-radios" />
            <label for="radio-2">Radio label</label>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 margin-2-b">
        <label for="lt-6" class="label-3">Label text (optional)</label>
        <input id="lt-6" class="form-control">
      </div>
      <div class="col-xs-12 margin-4-b">
        <label for="lt-7" class="label-3">Label text</label>
        <input id="lt-7" class="form-control">
      </div>
      <div class="col-xs-12 flex flex-justify-end">
        <button class="btn">Primary Button</button>
      </div>
    </div>


</div>

</form>
</div>