Skip to main content

Form design in Cosmos

In case management applications, forms are a crucial element to good design. Work can advance only if users act on the required tasks. Pega designers typically use the following guidelines for forms:

Multi-step forms

Multi-step forms, or screen flows, allow users to work through tasks bundled into a single process. Multiple steps presented as one task help keep a process together for a single user to complete. Use only multiple steps if users need to do the work in one sitting, especially if one or more steps have conditional logic.  

As a guideline, avoid having more than seven steps in a flow. Otherwise, the process can become unmanageable or interrupted in that single sitting.

Forms with multiple steps might also display a form progress indicator. 

A typical multi-step claim form can include the following steps:

  1. The contact’s personal information
  2. Their current residential address
  3. Their contact methods 
  4. A description of the purpose of the claim

The following figure is an example of a multi-step form used to collect customer details.

Multi-step form example

Sample multi-step form

One topic at a time

When possible, limit each topic to a single step or task. This common practice consolidates information for your users and helps people with cognitive disabilities to focus on their tasks much easier. 

Be concise

Reducing the number of fields on screen per task or step can also keep from overwhelming users. Although it might not always be possible, as a best practice, use fewer than ten fields for each step. 

Provide clear context

Form fields allow designers to provide context for each field. Context can help explain the expected format of some data, for example, MM/DD/YYYY for dates. 

Designers can also include references to case data to help end users make decisions faster. 

The following image shows a sample form that references case data and offers context for fields.

Contextual data for forms

Example of context being shown in a form 

Note: Fields can also allow for a custom More information action that opens additional content in a popover for review if selected. Use this action sparingly. 

Field requirements

Like all design systems, the Pega Cosmos design system provides support for required fields. Failure to enter data properly causes an error. As a best practice, avoid adding non-required fields to your forms. 

The system handles error management in forms automatically. However, you might need to define the error messages and acceptance criteria for individual form fields.

Error handling

Aim to prevent errors entirely. For example, you cannot set a date in the past for scheduling future events. However, when users cannot avoid errors, you need to provide clear error messages that explain the expected solution, for example, Your password must be 8 characters long.

You can create validation logic that verifies inputs outside the normal flow of entry, in which case the server returns errors. Use validation logic for very heavy processes that cannot rely on client-side validation.

Pega supports the unique warning state for fields. You can use this feature for cases in which something might soon become an error, for example, an expiration date that is set that is too close to the current date. 

The following image is an example of a clear error message.

Example of a password error message

Sample error message for a field 

Form component selection

Pega recommends a series of questions to help guide you toward the right form component for your design.  

In the following figure, click the + icons to see the decisions that a designer must make to use the correct component in a form. 

Form layout

Cosmos forms components use one of the following layouts:

  • Single column
  • Dual column

The types of controls in use determine this layout. Simpler controls, such as a text input or combo box, use the dual-column layout. Rich text editors, text areas, radio groups, and checkboxes use a single-column layout. On smaller device sizes, all forms are single-column layouts. 

Check your knowledge with the following interaction.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice