# Creation and edition modes

## Creation mode

This section describes the expected behavior of a creation form (create an object/add an element that did not exist before).

### Page Title <a href="#id-01b47e" id="id-01b47e"></a>

<figure><img src="https://mirakl.zeroheight.com/uploads/BHGlLQ8q59AbAe3ZQhq_ZQ.svg" alt="An example of a Page title within a form."><figcaption></figcaption></figure>

[Page Title](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/navigation/page-title) is always visible on a form in creation mode. Page Title always has a backlink to come back to the previous page.

#### Content <a href="#id-25b841" id="id-25b841"></a>

* "**Create (object)**" or "**Add (object)**"

{% hint style="info" %}
*Should I say Create or Add?* [Learn more about which verb to use](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/content/vocabulary/which-verb-to-use#14739e)
{% endhint %}

### Save Bar <a href="#id-0527f1" id="id-0527f1"></a>

<figure><img src="https://mirakl.zeroheight.com/uploads/3r7QHk5hoEmipbu8Fpk82g.svg" alt=""><figcaption></figcaption></figure>

The [Save Bar](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/actions/save-bar) is always visible on a form in creation mode. **Save** and **Cancel** buttons are always enabled while the Save Bar is visible.

### Form submission <a href="#id-885f1a" id="id-885f1a"></a>

There can be some loading time when the form is being processed by our back-end before triggering errors or a success message. Turn the form into read-only mode during loading time to prevent users from changing values in the form.

### Success behavior <a href="#id-999adc" id="id-999adc"></a>

When the user clicks the "Save" button in the Save Bar, the form is saved.

* Add a [success alert](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts#037415) (green) with a link to create another object + another action if needed
* The form goes from creation mode to edition mode

<figure><img src="https://mirakl.zeroheight.com/uploads/uxX40A_6ccyLslmCtUJJ0Q.png" alt="" width="375"><figcaption></figcaption></figure>

#### Content <a href="#id-5723ed" id="id-5723ed"></a>

Follow [Alert content guidelines](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts).

### Cancel form <a href="#id-54dd8b" id="id-54dd8b"></a>

When the user clicks Cancel or the backlink without saving form

* **Form pristine**: no modal + back to previous page
* **Form dirty:** *`Prompt-before-leave`* + back to previous page

<figure><img src="https://mirakl.zeroheight.com/uploads/WqeOgaKMTQnF9cg62bPdzg.png" alt="" width="375"><figcaption></figcaption></figure>

\
Edition mode
------------

This section describes the expected behavior of a form in edition mode (edit an object/edit an element that already existed).

### Page Title <a href="#id-31f410" id="id-31f410"></a>

<figure><img src="https://mirakl.zeroheight.com/uploads/I0DjB9Su8abz5cnY0W2GVg.svg" alt=""><figcaption></figcaption></figure>

[Page Title](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/navigation/page-title) is always visible on a form in edition mode. Page Title always has a backlink to come back to the previous page.

#### Content <a href="#id-084575" id="id-084575"></a>

* Title: "**(name of the object)**" or "**Edit (name of the object)**"

### Save Bar <a href="#id-120f27" id="id-120f27"></a>

<figure><img src="https://mirakl.zeroheight.com/uploads/6mYCm451GfRXEA2dqXOY8g.svg" alt=""><figcaption></figcaption></figure>

\
The [Save Bar](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/actions/save-bar) remains hidden until one field in the form has been changed. **Save** and **Discard** buttons are always enabled while the Save Bar is visible.

### Form submission <a href="#id-95884c" id="id-95884c"></a>

There can be some loading time when the form is being processed by our back-end before triggering errors or a success message. Turn the form into read-only mode during loading time to prevent users from changing values in the form.

### Success behavior <a href="#id-06b627" id="id-06b627"></a>

When the user successfully changes one or several inputs in the form.

* Add a success [snackbar](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar)
* The form stays in edition mode
* The user stays on the form page

<figure><img src="https://mirakl.zeroheight.com/uploads/OVpxkzhwOqWBe9994FRkxA.svg" alt="" width="375"><figcaption></figcaption></figure>

#### Content

Follow the \[item] + past participate verb format.

{% hint style="info" %}
You do not need to add words such as "successfully" or "with success". [Learn more](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar#0969f1)
{% endhint %}

### &#x20;Discard edits

When the user clicks Discard or the backlink without saving form.

* **Form Pristine**: no modal + back to previous page
* **Form Dirty**: Confirm Modal + form goes back to the initial state (before changes) + user stays on form page

<br>