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


---

# 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/design/patterns/forms/form-in-a-modal.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.