# 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](/~/changes/DpgERwSwrKIthStzL4D6/components/navigation/page-title.md) 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](/~/changes/DpgERwSwrKIthStzL4D6/content/vocabulary/which-verb-to-use.md#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](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/save-bar.md) 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](/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts.md#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](/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts.md).

### 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](/~/changes/DpgERwSwrKIthStzL4D6/components/navigation/page-title.md) 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](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/save-bar.md) 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](/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar.md)
* 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](/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar.md#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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/patterns/forms/creation-and-edition-modes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.