Forms

Forms are one of the most important components of our digital design. They are a part of a signup flow, a multipage flow, or a monotonous data entry interface.

Short description

Keep in mind that a single page form have other needs than a form that is a part of a multipage flow (wizard). For a single page form, the primary CTA button should be aligned to the left and to the right if the form is part of a multipage flow.

Try to gather items in logical groups (i.e. address, postal code and city) for an contextual understanding of what is needed in different sections.

Provide a clear heading of what is needed from the user in every step.

 

When and how to use it

Forms are a great way to simplify complex processes while also being able to validate the requested input.

Keep it simple and down to a bare minimum of fields. Use the ability to show/hide parts of a form depending on the answer to a question.

Behaviour

In narrow resolutions such as for mobile; expand the input elements to make use of the whole viewport width - same applies with buttons as well.

There is no need to use the whole width of a wide viewport. Stack the form elements on top of each other in new rows instead of aligning them horizontally.

Do's and don'ts

Do

  • Make CTAs descriptive, State the intent.
  • Grouping, By creating logical groups the user will make sense of the form much faster.
  • Positive inline validation, Reinforce a positive behaviour while typing.

Don't

  • Stack fields horizontally, keep it below two or three at the most.
  • Make input fields too long, they should match what is required. 

Do's and don'ts for forms

 

Templates

For detaild specifications: Form components

Desktop

Form template for desktop

Submit form template for desktop

Error form tempate for desktop

 

Mobile

Form template for mobile 

Error form tempate for mobile