Form Best Practices

Optimize Form Navigation

Use Plain, Precise, and Inclusive Language

Write clearly and concisely, using gender-neutral words. Use sentence-style capitalization for all text elements, except for proper nouns.

Allow Users to Save and Resume Forms

Ensure users can easily save and resume forms using buttons. Users may need breaks to consult others, verify information, or handle other tasks. Losing work can cause frustration and erode trust in the form or organization. Whenever possible, implement auto-save features to increase trust in our systems.

Create Task-Based Question Groups

Arrange related information, such as Mailing Address, Personal Information, or Preferences, within a fieldset for clear visual separation. Breaking up content into small, meaningful chunks helps users absorb information efficiently and maintain focus, leading to better data integrity and fewer support requests.

Show Essential Information Only

Clearly mark optional fields and use conditional logic to show or hide information based on user responses to previous questions; additional fields may appear based on earlier answers.

Anticipate Steps

To enhance efficiency, minimize redundancy, and ensure accuracy, pre-populate fields with known data and apply smart defaults for information previously entered by the user.

Differentiate Between Primary, Secondary, and Tertiary Actions

Use the appropriate button hierarchy and size to distinguish primary actions (e.g., saving or submitting a form) from non-critical secondary and tertiary actions. Consistently place buttons in the most intuitive locations for users, such as the bottom of a form or pop-up modal.

Prioritize User Experience

Show Consideration for Users

Respect users' time, privacy, and accessibility needs by only requesting essential information and ensuring compliance with all privacy and accessibility regulations.

Keep Users Informed of Their Progress

For long forms that span multiple pages, use a progress bar to show users where they are in a process. Refer to the component guidelines for proper implementation. Use notifications and clear messaging to inform users when they have completed a process or need to take additional steps.

Provide Contextual Information

Offer additional guidance and instructions through tooltips and help text, especially for non-standard or USAC-specific terminology. Use help text for instructions and form field requirements, such as formatting, and use tooltips for additional clarifying information.

Alert Users to Errors

Validate input fields in real time. Highlight errors in red and provide an explanatory message below the field. Errors should disappear once corrected.

Use global alerts to inform users of multiple inline validation issues or larger issues, such as form submission failures. For more information, see the notification component.

Offer Support

Provide users with an option to get help such as a phone number or email address.

Maintain a Standard Layout

Compose Field Elements with Input Groups

Use input groups to assemble a field's label, input, help text, input notification, tooltip, and “Optional” tag. This approach ensures consistency and accessibility.

Use the Grid to Arrange Fields Horizontally

Use input groups with the grid to lay out fields horizontally. Apply grid columns directly to input groups, as in the following example:

• Assign a grid cell to each i-input-group that requires layout. The default value is indi-col-lg-12 which stretches to fill the container.
• Cell widths are defined by modifier classes added to the cell element. For example, a cell with a indi-col-lg-4 class will be 1/3 width.

Group Related Fields

Use the fieldsets and legends component to group related fields under a higher-level question or label (i.e., a legend), such as Mailing Address or Personal Information. Incorporate an i-grid block within each fieldset to control the layout.

Use Consistent Sizing

Use the default (medium) size fields in data entry forms. Use small size fields in data tables, toolbars, maps, and other dense UI arrangements. Do not mix and match field sizes within the same row.

For touchscreens, always use medium fields optimized for touch interaction.

Resources

• Complete form example
• The USAC Style Guide for writing and language tips.