PSG Number: GM-14-005
Topical Area: Web Design and Development
Issue Date: 11/1/2013
Effective Date: 11/1/2013
Document Type: Guideline; Published (approved by Web Standards Group and GTA)
POC for Changes: Georgia.gov Interactive
Synopsis: Web Forms guidelines for State of Georgia web sites.

It is important to make online forms as user friendly as possible to ensure that visitors are able to complete the form process without complications. The more complicated or difficult a web form is, the higher the likelihood that a visitor will not complete the process. This can result in lost revenue, or an increase in phone calls and walk-ins to complete transactions that visitors would otherwise like to complete online.

The following is a guide to make your forms as usable and easy to complete as possible.

2.3.1 Linear Path

  • DO keep form interaction linear, with no diversions or loops.
  • DO lay out fields vertically (e.g., the “Last Name” field should appear below “First Name” instead of to the right of it).
  • DO ensure that users can navigate forward and backwards in a multi-page form without losing their data.
  • DO include a progress indicator for multi-page forms (e.g. “Step 1 of 3”).
  • DO end the form with a clear Confirmation page that helps users know what to do next.

2.3.2 Readability

  • DO keep text labels left-aligned to the left of the form input fields.
    Text labels should not appear above the input field if possible, as that breaks up the flow of readability. Similarly, having form fields right-aligned to the left of the form fields creates a jagged left edge that breaks up the readability flow (examples in the article on Creating Usable Online Forms from Usability.gov).
  • DO use simple terms in labels; avoid using jargon that not all users will be familiar with.

2.3.3 Accessibility

  • DO use HTML labels for form elements.
  • DO use tabindex attribute controls to enable ease of keyboard-only navigation.
  • DO use symbols to indicate required fields and error messages; do not simply rely on color for these indicators. (For example, use an asterisk to denote required fields, or the term “optional” to denote optional fields).

2.3.4 Usability

  • DO perform functionality and usability testing on completed forms and applications to ensure that they behave as expected.
  • DO describe the content type and other form attributes in your fields. e.g.:
    type=email
    autocapitalize=off
    autocomplete=off
  • DO hide optional fields when possible - only include essential form fields.
  • DO provide clear error messages and error indicators for fields that need correction.
  • DO ensure that all other form fields remain filled in when an error message appears.

2.3.5 Resources