Multipage form want to leave messsge

Get Help
,
1

How can I add a message “Are you sure you want to leave? Your unsaved changes will be lost” on multipage form?

My form is a complex file that requires the user to access additional pages (not in the form) to receive data, so the user moves between tabs in the browser.

I am looking for a solution that if the user clicks on the previous button in the browser or tries to go to another page on the site or tries to close the current page.
I was able to find a partial solution regarding the previous button in the browser, but the problem in Gravity Forms, when you click on the previous button, the message is also received, when I need the message to be only when clicking on the previous button in the browser.

2

@erez123 That type of “exit-intent” popup is triggered by a Javascript “mouseleave” event.

document.addEventListener("mouseleave", function(event){
    alert("Are you sure you want to leave? Your unsaved changes will be lost.");
})

Without overly complicating where to add the above snippet. You could just add it to the same page your form is on by adding a Gutenburg HTML block and then prepending and appending some script tags before and after. For example:

<script>
document.addEventListener("mouseleave", function(event){
    alert("Are you sure you want to leave? Your unsaved changes will be lost.");
})
</script>
3

I know this script but it is not good for me.
My form is a complex file that requires the user to access additional pages (not in the form) to receive data, so the user moves between tabs in the browser.
In the proposed solution, every time the user switches between tabs, he will receive the message, which is not good.

I am looking for a solution that if the user clicks on the previous button in the browser or tries to go to another page on the site or tries to close the current page.
I was able to find a partial solution regarding the previous button in the browser, but the problem in Gravity Forms, when you click on the previous button, the message is also received, when I need the message to be only when clicking on the previous button in the browser.

4

@erez123 thanks for clearing that up. Here’s a jquery Snippet for you, should be good to go.

<script>
var submitted = false;
 
jQuery(document).ready(function() {
  jQuery("form").submit(function() {
    submitted = true;
  });
 
  window.onbeforeunload = function () {
    if (!submitted) {
      return 'Changes you made may not be saved.';
    }
  }
});
</script>
5

Graet. it works!!!
One last thing:
The problem is that currently the message is received even if you enter the page directly and exit and regardless of whether the customer has started filling in the form.
Is it possible to add a condition that only if the customer starts filling out the form will the message be received?

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.