Form principles

Respect user's time

Tell users ahead of time if they need a piece of data or identification to fill out the form.

Don't ask for information on a digital form that they will have to enter again later in the form or in person.

If there is a benefit to filling out the form, inform users of that benefit. For example, tell people if a form will cut their wait time by days or weeks compared to other methods.

If possible, allow users to start a form and complete it later.

Follow accessibility and usability standards

Let users edit answers

Users must be able to update information throughout the form before they submit it. If using multiple screens, users must be able to easily navigate to previous screens.

Users must be able to recover from user-input errors. For more information on validation, visit the Error messaging section.

Use a single-column layout

Use a single-column layout for forms. Don't have multiple columns of inputs. Single-column forms are easier to understand and easier to complete. The single-column layout also performs better on mobile devices.

Group related tasks

For longer or more complex forms, group related fields together. Use headers, fieldsets, and legends for clarity and organization. Stepper processes help with performance and reduce cognitive load.

Make all forms understandable

Users must be able to understand and complete forms. Use helper text for longer or more complex guidance to users. For more information on Help text, visit the Help text section.

Every form field must have a label that is visible at all times. Labels should be short but descriptive. Place the label above or before the input. Programmatically associate the label to the input. Use ARIA tags and a logical tabbing order for keyboard users. For more information on field labels, visit the Field labels section.

Forms must be operable on desktop and mobile devices

The ways users interact with forms include using a mouse, touch, voice, or a keyboard. Users must be able to complete the form using the method of their choice. Users might use one method to complete the form or a combination of methods.
Provide adequate space between form elements for users with disabilities and touch input. For more information, visit Spacing and sizing.

Collect and store data responsibly

Don't require the user to log in unless it provides value.

Store data from public submissions securely. Don't store sensitive data in a content management system or in spreadsheets. For more information, visit Privacy and security while on Hennepin County websites.

Provide useful feedback

Error states must indicate which field or fields need to be updated and what the problem is. Error state text must be located above, below, or next to the form field that needs to be updated. The best location is above the input.

Provide feedback to the user upon form submission. Allow users to recover from user-input errors. If the form fails and it isn’t user-input error, inform the user. Confirm successful submissions. For more information on feedback and validation, visit the Feedback, error messaging, or validation for forms section.

Set reasonable expectations

List the information or identification needed to complete the form at the start of the form.

If the form will time out, warn the user. Whenever possible, avoid adding a time-out.

For longer or more complex forms, provide an estimate of how long it may take to complete the form.

Provide contact information for help completing a form

All forms must provide a way for users to get help while completing a form.

You must provide visible and easily accessible contact information on all pages of forms:

• An email address for assistance
• A phone number for assistance
• The form owner or department responsible for the form. Don't use the contact information of a single individual in order to maintain continuity. 

For PDF forms

State the email, phone, and form owner after the link to the form. 

For example:

Begin the application process by completing the record verification form (PDF).  For questions or issues, email xxx@hennepin.us or call 123-456-7890.

(Name of department) maintains this form.

Button placement

Consistent button placement and labeling helps users learn and understand our products. Users get used to where they should look for actions, and this reduces confusion.

Button design must make clear the difference between a primary task and a secondary task. Elements like color, contrast, and size make primary buttons stand out. Making them stand out lets users see them first, before secondary buttons.

Margin and padding

Use at least a 12-pixel margin, the space between buttons, to reduce the user selecting the wrong button. Maintain a touch target of 24x24 pixels for WCAG level AA standards or 44x44 pixels for WCAG level AAA.

Essential actions

Don’t overload forms with too many buttons. Focus on the 2 -3 essential actions to keep the user experience simple.

Consistent language

When possible, use plain language terms like Back, Next, and Submit in forms. Keep button text to two or three words. Use button labels that are specific to the task and list the action first, such as Submit payment. Use helper text as needed.

Disabled buttons

It’s best to avoid disabled buttons. But if you use them, provide helper text to explain what the user must do to enable the button. Also provide a visible focus state for keyboard users. 

Options for ordering your buttons

The way that you order your buttons depends on your users’ needs. It also depends on business needs.

Long complicated forms

Longer or more complicated forms are often easier to use when split onto multiple pages. Stepper components guide users through a linear process from left to right. Users expect secondary actions to appear at the left of the primary button. Secondary actions include Cancel or Go back. 

Buttons for secondary actions should display to the left of the primary button. Website and applications that use or may use stepper components in the future should put the secondary button to the left of the primary button.

Short simple forms

Place the main action button in an easy-to-notice place on the page. When possible, align the primary button with the form fields on simple forms. Left aligning the primary button follows the user’s scanning pattern.

For more complex forms that don’t follow linear patterns, place a primary action button in the center of the form. If there are secondary actions, like Cancel, place it to the right of the primary button.

Mobile considerations

In mobile, stack the primary button first.

Interface elements of forms

Input fields

Input fields are the core component in any form. They include text fields, dropdowns, check boxes, radio buttons, and date pickers. 

For detailed information on input fields, visit the Text input component. 

Buttons

Label buttons with words that describe the users’ action. Use words like Apply, Register, Search, Log in, Order, Submit, Request, or Create account.  

Avoid using a Reset or Clear button on forms. These create more drawbacks than benefits for users. Reset or Clear buttons work well when search or filter are used in a form.

For more information about buttons, visit the Buttons component.

Form pagination

We can display long forms on more than one page (pagination or progressive disclosure). Long forms can use a progress tracker to let the user know where they are in the process.

When using pagination:

• Show which step the user is on. 
• Show which steps the user has completed. 
• Allow users to go back to previous steps.  
• Consider a review step so users can see a summary of information before they submit the form. 

Field labels for forms

Every form field must have a label. Keep labels short. Keep them clear and meaningful. Use precise language so the user understands the information they should provide.

Required and optional fields

When all fields are required

• Add an instruction near the top of the screen. For example: All form questions are required. 

When most fields are required

• Add instructions near the top of the screen. For example: All fields are required, unless marked (optional).
• Add (optional) to the end of the label for every optional field.
• Don’t mark required fields.

When most fields are optional

• Add an instruction near the top of the screen. For example: All fields are optional, unless marked (required).
• Add (required) to the end of the label for every required field.
• Avoid using only an asterisk for required fields. 
• Don’t mark optional fields.

Help text and tooltips within forms

Help text

Help text clarifies the purpose of a field label. It also helps users find the information they need, to answer the question. 

Using help text:

• Put help text under the field label.
• Use help text only when necessary. When every field has help text, it adds distraction and makes it harder to complete. 
• Use help text when you know users struggle with the question, and why.  

Tooltips

Tooltips help users learn a product while they use it. Tooltips let users learn by displaying information on the screen only when they need it. They’re most helpful for information users will need only on occasion. They’re most effective in products users often return to. 

Users view tooltips by hovering or tabbing on active elements on screen, like an icon or button. The tooltip explains how to use a feature or function of the interface. For example, users could select a tooltip to explain the action that a button will trigger if they select it. Avoid hover-only tooltips. 

Feedback, error messaging, or validation for forms

Keep users informed. Provide appropriate feedback at the correct time and in the right place based on users’ input. 

When possible, use inline validation for user errors. Inline validation happens in real time once the user leaves the field. Inline validation lets users complete forms faster and with less frustration. 

Best practices for displaying errors: 

• Display the message as soon as possible after the error happens. 
• Make clear which field the error applies to.  
• Display the error message close to the field where the error takes place. This ensures the user doesn’t miss the error message. A common place to display the message is right below the field. 
• Style the error message in a different way than normal fields and help text. When possible, use icons and color to draw attention to the error message, such as red text and a red caution icon. The icon helps communicate to users who experience color blindness.  
• Make the error message concise and meaningful. Communicate possible solutions to the error and never blame the user. 
• Remove the error message once the user corrects the error. 

Avoid these things: 

• Don’t validate fields before users’ input is complete. 
• Don’t erase the user’s input when showing the error message. 
• Don’t hide error messaging in tooltips. 

Success page of forms

Let users know when the form is complete. Show a success message on the screen. Also use a secondary method, like email, when necessary.

Confirmation reassures users they have filled out the form correctly. It also reduces doubt and builds trust in our services. 

Best practices for success messages: 

• Make the message clear and succinct. For example: We have received your submission. 
• Where relevant and possible, include next steps and wait time. For example: We will call you in 2 to 3 business days. 
• Where relevant, include a way for the user to contact someone if they have questions.

Types of forms

There are a variety of forms. They can be static or dynamic and change as the user inputs data. They can provide instant results or they can indicate a timeline for response.

Forms that need follow-up or results include:

• Search forms
• Contact form
• Meeting request form
• Request for information (FOIA)
• License or credential requests
• Payment for services
• Registration forms

Forms to submit information include:

• Log-in forms
• Surveys
• Feedback forms
• Incident report forms
• Consent or waiver forms