# Show Popup Form

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Action

Block Type: [Regular](/app-editor/page-flow/block-anatomy.md#regular-block)
{% endhint %}

The **`Show Popup Form`** block is used to present an existing [Form](/app-editor/pages-and-forms/create-a-form.md) in your app as a [modal](https://en.wikipedia.org/wiki/Modal_window) popup. It allows your app's users to add or edit existing data and then save it in your app's [database](/app-editor/data.md).

<div align="left"><figure><img src="/files/TIXXHQQA1kieNab7zXFb" alt="" width="374"><figcaption><p>Show Popup Form block</p></figcaption></figure></div>

The block consists of the following (from top to bottom):

* *Form Slug*: [Input](/app-editor/page-flow/block-anatomy.md#input) configuration setting to specify the [URL slug](/app-editor/page-settings.md#page-url) of the form to be shown.
* *Title*: [Value Parameter](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types.md) value to use for the title of the popup.
* *Data*: Optional [Value Parameter](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*object*](/app-editor/page-flow/references/value-types.md) value to edit. If omitted  the form is presented in "create" mode where a new record is added to the app's database.
* *Customization*: Optional [Value Parameter](/app-editor/page-flow/block-anatomy.md#value-parameters) that accepts a [*object*](/app-editor/page-flow/references/value-types.md) value with properties for [customizing the popup](/app-editor/page-flow/references/popup-customization.md).
* *Save Success Tasks*: a [Flow Parameter](/app-editor/page-flow/block-anatomy.md#flow-parameters) where you connect blocks that specify what you want done after the data has been saved successfully (but before the popup is closed). To access the data entered by the user refer to [Popup Form Data](/app-editor/page-flow/toolbox-blocks/popup-form-data.md).
* *Form Close Success Tasks*: a [Flow Parameter](/app-editor/page-flow/block-anatomy.md#flow-parameters) where you connect blocks that specify what you want done after the popup has been closed following a successful save operation. To access the data entered by the user refer to [Popup Form Data](/app-editor/page-flow/toolbox-blocks/popup-form-data.md).
* *Form Close Fail Tasks*: a [Flow Parameter](/app-editor/page-flow/block-anatomy.md#flow-parameters) where you connect blocks that specify what you want done after the popup has been closed following a failed save operation.

{% hint style="success" %}

* For more information about customization options, please see [Popup Customization](/app-editor/page-flow/references/popup-customization.md).
* To access the data entered by the user refer to [Popup Form Data](/app-editor/page-flow/toolbox-blocks/popup-form-data.md).
  {% endhint %}

***

## Usage Example

The example below shows the Show Popup Form block used to present the Form1 form with the title "New Student". Since the Data parameter has been omitted, the popup will add a new record into the app's database if the user enters valid data.

When the popup is closed, an [Alert element](/app-editor/page-editor/built-in-elements/alert.md) is shown using the [Alert Text](/app-editor/page-flow/toolbox-blocks/alert-text.md) block with either a Green color or a Red color depending upon the result.

<div align="left"><figure><img src="/files/I2qufgORouWx8uApay6t" alt=""><figcaption><p>Example of Show Popup Form</p></figcaption></figure></div>


---

# 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://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-popup-form.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.