When using a multipage form, users might try to go back to previous pages by using the browser back button instead of using the previous button in the form. In Internet Explorer (IE) and Edge this triggers the browser to navigate away from the page where the form is embedded and the users often looses the information he already entered. Even worse is that IE and Edge use the backspace key as a shortkey for the browser back button. And backspace is a key most people use, when they fill out forms…

Browser back button warning in a multipage Gravity Form
The browser back button and multipage forms problem
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.
How to warn users when pressing browser back button of backspace in a multipage form
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
<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>