Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Layout - Overview
  • Page Title
  • Save Bar
  • Form submission
  • Success
  • Cancel
  • Prevent changes while submission
  • Take aways

Was this helpful?

  1. Design
  2. Patterns
  3. Forms

Form - Creation mode

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

Last updated 1 year ago

Was this helpful?

Layout - Overview

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.

Save Bar

  • 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.

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)

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

Don't

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

Additional Information: .

Refer to page to guide users through the whole form experience

Learn more about Page Titles and Backlinks
Error Management
Exemple of a Page Title
Save Bar in a creation mode form
Exemple of a success alert when creating multiple objects in a row
exemple of a Prompt Before Leave