Exit Window Pop-Up in Morf Forms

​

Setup

​

1. Add a hidden field

​

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.

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:

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

​

4. Replicate to other steps

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:

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