# Form - In a modal

## Overview <a href="#id-57c4c2" id="id-57c4c2"></a>

For forms, the main guideline is to display it in a dedicated page. But in few cases it may be complex to create a new page for a form. Thus, to ease the experience, in those cases you may create a form in a modal :&#x20;

* When there are not many fields (3 to 5 fields)
* When forms are embedded (a form in an another form)
* When creating an object in a form (create a rule, add a parameter (...) in a form)

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F0wZhsuumATcgGc6RqRj6%2Fform%20modale.png?alt=media&#x26;token=2535cb6c-6823-49b3-9e3c-54aef7398843" alt=""><figcaption><p>Form in a modale</p></figcaption></figure>

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

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

* **Visibility:** The Save Bar is always shown in a form in modal&#x20;
* **Functionality:** Both '*Save*' and '*Cancel*' buttons are enabled

### Behaviors <a href="#id-84d749" id="id-84d749"></a>

* `Save` action closes the modal and triggers a [snackbar](https://design.mirakl.com/design/components/feedback/snackbar) on the main page
* Same [error management](https://design.mirakl.com/design/patterns/forms/error-management) as a regular creation form

### Limitations <a href="#id-905563" id="id-905563"></a>

{% hint style="warning" %}
A modal should not trigger another modal. You may be obliged to do so, but be aware of possible poorer experience. You should test your mock-up in those cases to be sure users are able to navigate through the form.
{% endhint %}

Thus, those inputs may be complex to use in a form within a modal:

* `DateRange Picker`
* `Date Time Picker`

There is one component that can never be used in a form within a modal :

* `Advanced Picker`

However, a modal can trigger overlays such as `Dropdowns`, `Tooltips`, etc.&#x20;

## Create an object in a form through a modal

When a form involves creating an object, it’s important to determine whether the object should be created within the form itself or through a modal.&#x20;

1. **Simple Objects**:
   * If the object is simple and requires only a few fields, use a specific panel or a card within the form.
   * This approach is less intrusive and allows users to quickly input necessary information without navigating away from the form.
2. **Complex Objects**:
   * When the object involves dynamic blocks with more than one field, it is better to use a modal.
   * Modals provide more flexibility and space to handle complex data inputs.
3. **Benefits of Using Modals**:
   * **Separation of Concerns**: Modals allow for a clear distinction between the main form and the sub-form used for creating the object.
   * **Error Management**: It becomes easier to handle errors specific to the object creation separately from those of the main form.
   * **Data Management**: Results from the modal can be returned and displayed in a datatable within the main form, ensuring a clear organization of nested objects.
4. **Implementation Tips**:
   * Ensure the modal is user-friendly and intuitive, providing clear instructions and feedback.
   * Use appropriate validations and error messages within the modal to ensure data integrity.
   * Upon successful creation of the object, update the datatable in the main form to reflect the new data without requiring a full page refresh.