Lead:  Liav Nadler

Description

A form is a collection of input fields, allowing users to enter data that is then sent for further processing.
Forms may appear in workspaces, dialog popups, popovers,wizards,filter panes, details panes and cards.

...

Update image

Usage & Behavior

Structure

• A form consists of two areas: the input area and the action area.

• The input area may contain any set of input fields, including text fields, dropdown menus, checkboxes, radio buttons etc.

• The action area usually consists of a submit button (Save, or Create, or Update etc.) and additional actions, if needed.

• In dialog popups, wizards,filter panes, details panes and cards, it is common to have an additional Cancel button.

...

• Where possible, field labels will appear above the input field (for example, above a text field or a set of radio buttons).

• Where relevant, a red mandatory indicator (*) will show next to the label.

• Where relevant, a help icon will appear next to the label (aligned to the right side of the field, if possible).

• A collection of related fields can be grouped into a section. For example, fields like Email and Phone can be found under a section called Contact Information.

• For forms with inline inputs, see Inline inputInputs.

The Action Area

• The action area will always be visible:

  • In case the form takes up the entire workspace, the action area will appear at the top of the page.

  • In any other case, the action area will appear below the form, separated by a horizontal line.

    • In dialog popups, popovers,wizards,filter panes, details panes and cards, the action area will appear at the bottom of the container.

    • In workspaces:

      • If the form does not exceed the height of its container, the action area will appear below the last field of the form.

      • If the form exceeds the height of its container, the action area will stick to the bottom of the container, allowing users to scroll the form above it.

Replace with UI (CM Pro)

• Buttons for main actions will be aligned to the right. Buttons for secondary actions, such as Clear or Reset will be aligned to the left.

...

• Forms can have two states:

  • Idle / Saved - the state when entering a form or after clicking the submit button. In this state:

    • The submit button is disabled.

    • Exiting the form will not save it.

  • Edited - the state of a form after making changes but before clicking the submit button. In this state, exiting :

    • The submit button is enabled.

    • Exiting the form will trigger a confirmation message (see below).

Interaction

• Clicking the submit button sends the data for further processing. In some cases, a confirmation toast may appear.

• Clicking the Cancel button will close the dialog popup / wizard or filter pane (if not pinned), without saving the form.

...

• For input-specific validations see Field Validation.

• A form cannot be submitted if one or more of its fields are in error state. Here is a typical flow:

  • When entering a form, the submit button is disabled (the Cancel button is always enabled).

  • On updating any field, the submit button becomes enabled.

  • In case of an input error, the submit button becomes disabled (an additional form-level message may appear). Only after the error was resolved, it becomes enabled again.

  • After clicking the submit button:

    • it becomes disabled,

    • a toast message may appears, indicating that the form was saved.

• This flow is similar where the form is in a dialog popup, but in this case, clicking the submit button closes the popup.

• When a form has a single required field, the validation will appear only after the user clicks the submit button.

...

• In case a single submit button applies to multiple forms (for example: tabs or a master-detail layout), making changes to a form and then navigating to another form will save the changes in a local storage.
  This way, navigating back to the first form, will show the updated values.

Edge Cases

• In case the user tries to navigate away from a form after updating one or more fields , a message popup will appear, allowing him to either keep editing or leave (see Common Messages Repository). In case the user tries to navigate away from the form while there are errors, a message popup will appear, allowing him to either keep editing , or leave (see Common Messages Repository).

...

• Creating or updating entities (e.g., users, roles, channels).

• Configuration (e.g., services level indicators, storage retention periods).

...

• When?

General

• Provide a clear navigation order:

  By default

  In general, form fields should

  form

  have one column.

  Closely related fields (e.g., first name and last name) can appear side by side.

• A collection of related fields should be grouped under a clear title

  .

  Make sure label texts are not selectable(see examples above).

Issues to cover

...

Form-level elements:

• Status tags

• Messages

...

Distances between buttons (if more than 2)

...

• Form instructions

• Field help

Ask Femi about web SDK form guidance

Autosave

Examples

Update screen

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

text highlight when using a keyboard + using arrows when in edit mode (left, up or home to set the insertion point at the beginning; right, down or end to set it at the end).

Design

...