Form design

Well-designed forms are a crucial component of any web application. Follow best practices of form design, supported by tools in Pega, for the most success.

Basics

A basic form should be in a one-column layout with labels on top. Strongly related fields are grouped together on one line. Fields are an appropriate width for the content. Research shows that this is the best default form design to optimize for speed. This should be the starting place for all form designs.

Please review our documentation on text inputs for clarification on when to use specific fields.

In some cases, a one-column layout is not the best way to lay out the screen. Designers should use two-column layouts when:

There are a lot of fields (>=6) on a single screen, and real estate is at a premium.
Specific fields have strong associations.
Speed is not a primary need.

Do not use a two-column layout to display one line of fields.

In our new Cosmos Design System, only one and two-column layouts are used for field design.

Form layouts

Same-line grouping

Some items in a form are more closely associated than others. Examples of this are:

First and last name
Date ranges
City/state/zip in an address
Currency type and amount

When you have this type of data, make the grouping more clear by having them on the same line.

Example of a grouping two items on one line in a form

Avoid multi-column layouts with this kind of grouped data. As seen here, “Start date” and “End date” are now on different lines.

An example of what not to do, where grouped items are broken up.

Headers

Use headers to separate information.

Required fields

Required fields should be shown before non-required fields. Having required fields at the beginning of the process makes sure that users do not miss them. Avoid mixing a required field in with many non-required fields. If a field is strongly recommended (but perhaps not strictly “required”) it should be as near to the beginning of the form as possible. This reduces the chance of a user skipping it.

Long and wide fields, and grids

When reasonable, put long and wide fields under short ones. If long and wide fields are at the top of a form, they can hide other fields by pushing them below the visible area of a webpage. When possible, put these at the end of your form.

Examples of long and wide fields include:

Text areas
Rich text editors
Simple grids
Maps
Any custom control taller than 60px

Tab order

The default, and recommended, tab order is Left -> Right, Top -> Bottom. Never tab back and forth from one header area to another.

This is the preferred tab order, as it lays fields out predictably, and groups tightly related fields into one line.

This layout is a two-column layout with correct tab order. Use this when space is at a premium and there are many fields under a particular header. Refer to the guidelines about choosing one or multi column layouts for more guidance.

Example of tab order from left to right, then top to bottom

Last updated: Feb 2020

Common form layouts

One-Column Layout

This should be the starting place for all designs, especially when designing forms. Actions areas, such as assignemnts and Pulse feeds, will stack on top of one another in the vertical space.

Two-Column Layout

In some cases, a one-column layout is not the best way to organize necessary content on the screen.

Use two-column layouts when:

There are many text input fields (>6) on a single screen, and real estate is at a premium.
Specific fields do not have strong associations.
Speed is not a primary need.
Additionally, avoid using a two-column layout to display one line of fields.

When using a two-column layout design, text will follow an inline wrapping pattern.

Last updated: Feb 2020