Forms, Fields, and Feedback

Styling & Layout on Forms

To help users stay focused when completing a form, a single-column layout is generally ideal. However, when sets of individual fields distinctly rely on each other to make sense they may be laid out side-by-side.

Ensure input fields are clearly distinguishable from the surrounding area by adding a border or contrasting background color.

A web form with multiple text fields stacked vertically. The first two are labeled First Name and Last Name, and are side-by-side.

All form fields in this example align in a single column, except for the two related to name which are paired together.

Error & Success Messaging

Forms should provide feedback to the user, ideally in real time as the user completes each field, and in a manner that is informative and polite.

Any error on a specific form field should be indicated on or near the field itself. Clearly state the issue so that the user may correct it. Consider adding positive messaging as well to let the user know when they have completed a step successfully.

A form field labeled New Password that has been typed into. In the list of requirements beneath, one has a red x next to it, and the others have a green checkmark.

The four requirements for this password field are listed directly below it, with error and success indicators next to each item, helping the user as they go.

If errors are found when the user attempts to submit a form, they should be immediately communicated along with guidance on how to fix them.

Instructions and Helper Text

Form fields should be clearly labeled, and provide succinct instructions as needed. Any fields that are required should be clearly indicated. 

Labels should always stay visible so that they can be continually referred to before, during, and after the user interacts with the field. Avoid using placeholder text that disappears, forcing the user to rely on memory.

A small web form with the heading “Pet Portraits” reads “Capture your pup’s unique spirit by transforming your favorite photo into a stunning, hand-painted portrait.” An image upload button has helper text reading “1200px by 1200px minimum, 5MB maximum file size. Accepted formats: jpeg or png.”

This form has a useful introduction, along with a statement about which fields are required. The image field has an additional description to help the user along and avoid mistakes.

Showing Progress on Complex Tasks

For lengthy linear processes, like complex forms or self-guided courses, keep the user informed and on track by showing the current place within the process. This could include the current page number along with the total number of pages (e.g. “Page 2 of 5”), or a progress bar.

A segmented progress bar that includes text labels on each of its three segments, with checkmarks next to the first two.

This progress bar illustrates to the user which segments have been completed and which segments remain.

If the form includes a time limit, make sure to let the user know and provide an option to extend it. Keep in mind users with disabilities may require more time to complete a task at their own pace, including taking breaks.

Forms that span multiple pages should retain the user’s work as they go, so that it is not lost if they lose internet connection, move backwards, or accidentally navigate away from the page.

WCAG 2.1 AA Success Criteria