Last reviewed: 14 June 2022

Forms

Form design

Consistent and best practice form design makes our products intuitive. This means people can focus on their task without learning how a Co-op product works every time they use one.

Elements of a form

Forms can be made up of a range of elements.

Example

Diagram showing an example form in the Co-op style

The parts of a form are the:

  1. Form validation.
  2. Label.
  3. Select dropdown.
  4. Field icon.
  5. Hint text.
  6. Input field.
  7. Optional field label.
  8. Focus ring.
  9. Radio button.
  10. Inline validation message.
  11. Error field styling.
  12. Text link.
  13. Checkbox.
  14. Primary button.

Layout and hierarchy

Use a single column layout for forms

This allows the user to focus on one field at a time, making it easier for them to complete their task.

When form fields are in multiple columns, users have to scan across the page to understand the content. If they use a screen magnifier to zoom into the page they might not see some of the fields.

When each row of the form contains multiple elements it is harder to know what to fill in first, and the way to complete the form becomes unclear.

Single column form

User attention flows in a single direction.

Diagram showing a vertically stacked form with and arrow showing how a user will scan it top to bottom

Multi-column form

User attention flows in multiple and competing directions.

Diagram showing a form in 2 columns with an arrow showing how a user will scan it top to bottom, the back to the top of the second column

Grouping, structure and flow

Group related information

The flow from one set of questions to the next should have a natural progression from one topic to another. Grouping related fields helps with this and allows users to make sense of the information they need to fill in.

Sequence information logically

Display form fields in a logical sequence to reduce cognitive effort.

Sequence fields based on patterns that are natural for users or that reflect real things such as a credit card.

For example, for a credit card form, you should always start with the card number and end with the security code. This because it follows the layout on the real card and because whenever people enter credit card information this is the order they do it in.

Default spacing

Our form elements and components come with default padding. This example shows how these defaults apply to different form elements.

Example

Diagram showing the default spacing applied above and below a select dropdown and a text input

Do not use long forms

Lengthy forms can cause many usability issues, including overwhelming users. When you need to use a long form, there are design patterns which can help them feel less overwhelming.

Progressive disclosure

Progressive disclosure is a pattern through which content is revealed gradually to the user. Content is usually revealed as the user fills in specific parts of the form. This can help forms feel shorter, with more fields only appearing when relevant.

On page load, fewer fields are displayed on screen.

Diagram showing a basic form with no reviealed fields

As the user interacts with the form, additional fields are displayed.

Diagram showing a basic form with a new text input revealed

Multistep forms

Multistep forms are made up of multiple pages, with fields spread across pages. A multistep form can include a progress indicator to help users understand the different steps within a form.

When dividing a form into multiple pages, make sure that the content on each page is grouped. If 'Personal details' is the first step on a form, that page should contain all the questions relating to personal details.

Labels and input fields

Labels

Always put the label above the field. This helps create a clear relationship between the label and input field. They also make the form easier to scan, which helps improve understanding.

Give labels their own row. This allows the length to vary, without impacting the position of the field.

Input fields

Input width

Use a text input that is appropriate for the amount of information someone needs to enter. While it may be tempting to make all text input fields the same width for a more uniform interface, it can lead to usability issues. Too wide and it might intimidate or confuse, too narrow and it might frustrate.

The width of the text input can act as a guide to the user for how much information is expected. This can help improve completion rate of a form.

Varying input widths help the user understand how much information is required in each field.

Diagram showing a vertically stacked form with and arrow showing how a user will scan it top to bottom

Consistent input widths require more effort from the user to understand input requirements

Diagram showing a form in 2 columns with an arrow showing how a user will scan it top to bottom, the back to the top of the second column

Optional and required fields

Only highlight optional fields on a form, not the mandatory or required fields. Optional fields also should not have any validation rules applied to them.

To see how to style an optional field, go to the form elements

Fieldset spacing

Forms vary in length and complexity. Consider what spacing is appropriate for your fieldsets. Think about spacing when moving from larger to smaller screens.

As well as our default spacing units, we also have CSS classes that allow you to experiment with variations of spacing. You can multiply the 2px, 4px, 8px, 16px, 32px or 64px by either 1.5 or 2 and use these values for spacing field sets.

For example, if your form requires a large vertical space, you can multiply the 32px unit by 1.5. The will give you a vertical spacing of 48px.

Vertical spacing of 24px

Diagram showing 24px form spacing

Vertical spacing of 32px

Diagram showing 32px form spacing

Vertical spacing of 48px

Diagram showing 48px form spacing

Buttons

Alignment

Buttons that perform the main action on a form (such as submit) should always be left aligned to the edge of the input fields.

Left aligning buttons and inputs makes the path to completion clearer. Aligning buttons to the right, or using a mix of right and left alignment can lead to usability issues. People might not see the buttons to the right, particularly if they use a screen magnifier to zoom the screen.

If you need more buttons, place them next to the primary action button, aligned left. For keyboard users, this means that the tabbing sequence will always select the primary action button before selecting any others.

Left aligned buttons make the path to completion clear.

Diagram showing a form with left aligned buttons

Right aligned buttons make the user shift focus from left to right and might be missed.

Diagram showing a form with right aligned buttons

The button is still visible even when the user is zoomed into the screen.

Diagram showing a zoomed in form with the primary button aligned to the left inline with the input field

The button is not visible when the user is zoomed into the screen.

Diagram showing a zoomed in form with the primary button aligned to the right and the primary button cannot be seen

Visual hierarchy

Place buttons in a logical order. A clear visual hierarchy between buttons on the same screen is important as it can help users identify the primary action easily.

Avoid having buttons of the same prominence next to each other. It can create confusion and force the user to question which action is the primary one.

Button width

The width of the button should be determined by the content inside it. Avoid making buttons full width (especially on larger screens) as they stop looking like buttons and can confuse users.

This is important for screen magnifier users, as the primary button content can be found without having to pan to the right. This ensures the product or service is accessible.

Disabled buttons

Do not use disabled buttons on forms. Allow the user full access to all actions, even if that means the user fails and has to take an action to remedy the problem.

Navigation buttons

Placing these buttons at the bottom of a form takes prominence away from more important buttons, and creates confusion for screen reader and keyboard users.

Button spacing

It's important to use space around the primary button to help give it prominence on the screen. Use larger vertical spacing between the last field set and primary button.

Example

Diagram showing button spacing

Which button styles to use

Form button type Description Examples Styling
Primary Submits the form and takes the user to the next part of the journey Confirm, Submit form, Place order, Next page Primary Button Green
Secondary Make a change within a form Apply offer code, save and exit, Add another guardian TBC
Related Starts a journey related to the form being completed Forgotten password, Privacy policy Text link
Cancel Cancels the progress made with the a form Cancel, Delete, Remove Text link
Navigation Navigates the user away from the form Back, Previous TBC

Changelog for this page

Date Notes
9 June 2022 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.

Back to top