> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morf.health/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Exit Window Pop-Up in Morf Forms

> Set up a custom exit window pop-up in Morf Forms using custom HTML and logic rules to re-engage users who are abandoning your sign-up flow.

Window pop-ups within Feathery forms are a great way to customize your form to your specific business goals — for example, using an exit pop-up to re-engage users who are abandoning your sign-up flow.

## Setup

### 1. Add a hidden field

In your form, go to **Settings > Data Tracking > Edit Hidden Fields**. Create a new hidden field named `show_exit_menu`, set the type to **Any Value**, and save.

### 2. Add a custom logic rule

1. Go to **Logic > Create Rule**.
2. Name the rule `Exit Pop-up Trigger`.
3. Set the event trigger to **Form Step is Loaded** and click **Create**.
4. Go to the **Advanced Logic** tab and paste the following code. It listens for mouse movement events where the mouse nears the top or left edge of the browser window.

> [accordion] View code
>
> ```jsx theme={null}
> window.addEventListener("mousemove", function(event) {
>   if (event.clientY <= 20 || event.clientX <= 20) {
>     console.log("exit");
>     show_exit_menu.value = "true";
>   }
> });
> ```

### 3. Update the form

1. Go to the **Designer** tab and select the step where you'd like to add the exit pop-up.
2. Add a new container beneath the step container and name it `exit_menu`. Make sure `exit_menu` is one level below the Step.
3. Click the `exit_menu` container, go to **Properties** in the right pane, and add the following to **Embed Custom HTML**:

> [accordion] View code
>
> ```html theme={null}
> <style>
> div[data-feathery-id="exit_menu"] {
>     position: fixed;
>     top: 0;
>     left: 0;
>     width: 100%;
>     height: 100%;
>     background-color: rgba(0, 0, 0, 0.5);
>     z-index: 9999;
>     display: flex;
>     align-items: center;
>     justify-content: center;
> }
> </style>
> ```

4. Still on the `exit_menu` container, go to **Show Conditionally** and create a rule to show `exit_menu` when the hidden field `show_exit_menu` is **True**.
5. Inside `exit_menu`, create a nested container named `window_popup`. This is the visual content of the pop-up.

> [!TIP]
>
> Customize `window_popup` with whatever you'd like the user to see when they attempt to close the form — a discount offer, a message, a CTA, etc.

### 4. Replicate to other steps

Repeat the following for each additional step where you want a pop-up:

1. Copy and paste the `exit_menu` container into the new step.
2. Rename it (e.g. `exit_menu2`).
3. Update the **Embed Custom HTML** to reference the new container name:

> [accordion] View code
>
> ```html theme={null}
> <style>
> div[data-feathery-id="exit_menu2"] {
>     position: fixed;
>     top: 0;
>     left: 0;
>     width: 100%;
>     height: 100%;
>     background-color: rgba(0, 0, 0, 0.5);
>     z-index: 9999;
>     display: flex;
>     align-items: center;
>     justify-content: center;
> }
> </style>
> ```

4. Under **Show Conditionally**, create a rule to show `exit_menu2` when `show_exit_menu` is **True**.

## Testing

1. Click **Publish** to publish all changes.
2. Open the **Test Form** and move your mouse toward the top of the browser window.
3. Confirm the pop-up appears as expected.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.