Form - Creation mode

A creation form is when users create an object or add an element that did not exist before.

Layout - Overview

Page Title

Exemple of a Page Title

• Visibility: The page title is always visible on a creation form.

• Content: "Add [object name]" or "Create [object name]"

• Navigation: Include a backlink for easy return to the previous page, unless this is the first page in the hierarchy.

  • Backlink Content: "Back to [landing page title]", where [landing page title] is the exact title of the return page.

• Additional Information: Learn more about Page Titles and Backlinks.

Save Bar

Save Bar in a creation mode form

• Visibility: The Save Bar is always visible in creation mode.

• Functionality: Both 'Save' and 'Cancel' buttons are enabled when the Save Bar is visible.

Form submission

Success

When users have successfully saved the form

• Single Object Creation:

  • Process: After creating a single object, users are redirected to the previous page, accompanied by a success notification.

  • Notification Content: "[Object name] added" or "[Object name] created".

• Multiple Object Creation:

  • Process: After saving the form, users have the option to create another object.

  • Notification: Display a success alert with options for additional actions.

Exemple of a success alert when creating multiple objects in a row

Cancel

When users clicks Cancel or the backlink without saving form

• Form pristine (unmodified) : no modal + back to previous page (in the hierarchy)

• Form dirty: Prompt-before-leave + back to previous page (in the hierarchy)

exemple of a Prompt Before Leave

Prevent changes while submission

• Processing Time: The form becomes read-only during backend processing to prevent changes.

Take aways

Do

• Respect Layout guidelines

• Refer to Stepper Form guidelines for long and/or complex forms

• Refer to Error Management page to guide users through the whole form experience

Don't

• Avoid custom behaviors: keep form creation consistent across all products.