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.

Guidelines

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.

Usage

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

Related to

  • Wizard

Template for desktop

Form template for desktop

 

Submit form template for desktop

Submit form template for desktop

Error form tempate for desktop

Error form tempate for desktop

 

Template for mobile

Form template for mobile 

Error form tempate for mobile

Error form tempate for mobile

Form example from onboardning of corporate customers (June 2018)