Browser back button warning in a multipage Gravity Form

Browsers like Chrome and Firefox do understand what the users wants. If a user presses the browser back button they:

• go back to the previous form page;
• while remembering the data the user already filled in.

Also these browsers haven't tied the keyboard backspace as a shortkey to the browser back button. Which seems like very common sense, because users also often use the backspace key when they enter text when filling out forms. However, as most developers know, Microsoft has a long standing tradition to create unpredictable and unlogical browsers. When you click the IE or Edge back button, or even when you press the backspace key outside a textbox,  you get this message: "Page is expired, click refresh to reload." Of course you try the forward button, but that doesn't change anything. Then you click refresh, hoping your hard work filling in this form is not lost. In vain, there is no possible way to retrieve your hard work of filling this long form. How to solve this? Is there a way to block the browser back button? It would be a bad browser if it allows developers to block common browser functionality. But of course we did create the next best workaround.

There is no good way to create a cross browser safe way to block the back button and/or the backspace key. But there is a javascript event which fires before a webpages unloads itself from the browser window. We can use this to achieve a workable solution. But this event also fires when gravityforms loads another form page and we don't want to show the message when the user uses the form buttons to navigate through the form. Also we don't want to show this warning when the form is already submitted or saved. So we only show the warning when:

• Mousepointer is outside viewport, AND
• the page css doesn't contain html elements with classes only used in gravityforms saved or submitted confirmations

You can implement this by adding the script below in the html content in the page where the form is embedded.

<script type="text/javascript">
// only show the warning when the mousecursor is not on the webpage viewport
var unloadwarningglobal=true;
window.onmouseover = function() {mouseOver()};
window.onmouseout = function() {mouseOut()};
function mouseOver() {
    unloadwarningglobal=false;
}
function mouseOut() {
    unloadwarningglobal=true;
}

window.onbeforeunload = function() {
//don't show when mousepointer is in viewport or when form is submitted or saved.
    if(unloadwarningglobal == true && document.querySelector('.gform_confirmation_message') == null && document.querySelector('.form_saved_message') == null && document.querySelector('.form_saved_message_sent') == null){
// This message will not show in every browser. Most browsers will display a standard warning
		return "You are about the leave the form page, use the form navigation instead of the browser back button";
		}
}

</script>