---
url: https://docs.juniper.bot/en/cmd/custom/actions/modal-form.md
description: >-
  Modal Form action type is used to show modal form and get some input from user
  with great UI.
---

[`modal.values`]: ../../../message-templates/types/custom-commands/modal

# Modal Form

"Modal Form" action type is used to show modal form and get some input from user with great UI.

## How it is useful? { #why }

You can create an action that will show a modal form with some inputs that user can fill and submit, executing another
action to process the data.

## The behavior and settings { #settings }

Modal Forms consist of [components](../../../message-templates/components/index#modal-forms) and can be executed by only:

* [Slash Commands](../index#slash);
* [Context Menus](../index#context-menus).
* [Message Components](../../../message-templates/components/index).

Please check [Components](../../../message-templates/components/index#modal-forms) article for the list of available components.

Submit Action must be selected in modal form settings. Its template will receive [`modal.values`] variable map
with keys as component identifiers and values as data entered by member.

## Limitations { #limitations }

::: warning Limitations
Modal Forms have some limitations:

1. Modal Form must have at least one component, and up to 5;
2. Modal Form can't execute another Modal Form as Submit Action.
   :::

## Example { #example }

For example, you want to create a simple user profile command. To do it:

1. Create a new custom command (note the already existing action, it's the default one, don't touch it just yet);

2. Create a new action named "Submit" and select "Send Message" as action type, check "Ephemeral Message" and enter the following in the template:

   ```template
   {% do member.getAttribute('profile').update(modal.values.profile) %}
   New profile has been successfully saved.
   {{ modal.values.profile }}
   ```

3. Create a new action named "Dialog" and do following:
   1. Select the "Modal Form" as action type;
   2. Set its title to "Update Profile";
   3. Set its submit action to "Submit" you have previously created:
   4. Add a new multiline [Text Input](../../../message-templates/components/text-input/index) component, fill label with "Enter profile", enter `profile` as identifier, check "Required" and enter the following template as its Default Value:

      ```template
      {{ member.getAttribute('profile').value }}
      ```

4. In the default action from first step, make sure it's a "Send Message" action, enter the following as a template to show the current profile information:

   ```template
   {{- (member.getAttribute('profile').value) ?: 'No information' -}}
   ```

   Add a new [Button](../../../message-templates/components/button/index) component with label "Update", any identifier and set its action to "Dialog" action.

5. Save.