# Form - Edition mode

## Layout - Overview <a href="#id-604785" id="id-604785"></a>

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

<figure><img src="https://mirakl.zeroheight.com/uploads/I0DjB9Su8abz5cnY0W2GVg.svg" alt=""><figcaption><p>exemple of a page title</p></figcaption></figure>

* **Visibility:** The page title is always visible on a creation form.
* **Content:**  "Add *\[object name]*" or "Create **\[object name]**"&#x20;
* **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](https://design.mirakl.com/design/components/navigation/page-title).

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

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F93njCaXjNAdCFByOcJAi%2FSavebar%20Card.png?alt=media&#x26;token=bb767cf9-b04e-43a0-9c35-ab6efe1785ce" alt="" width="548"><figcaption><p>Close-up on Save Bar</p></figcaption></figure>

<br>

* **Visibility:** The Save Bar remains hidden until one field in the form has been changed.&#x20;
* **Functionality:** Both '*Save*' and '*Cancel*' buttons are enabled when the Save Bar is visible.

{% hint style="info" %}
This behavior cannot be automated in ROMA. Designers must specify to developpers this behavior during handoff.
{% endhint %}

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

### 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/design/components/feedback/snackbar)
* The form stays in edition mode
* The user stays on the form page
* 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/components/feedback/snackbar#0969f1)
{% endhint %}

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

### &#x20;Discard edits

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

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

### Prevent changes while submission

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

## Take aways

{% hint style="success" %} <mark style="color:green;">**Do**</mark>

* Respect Layout guidelines
* Refer to [Error Management](https://design.mirakl.com/design/patterns/forms/error-management) page to guide users through the whole form experience
  {% endhint %}

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>

* Custom any behavior : form creation must remain consitent throught all products
* Show the Save Bar before any changes has been made
  {% endhint %}

<br>