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…
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.
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.
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
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>Our Premium add-ons for Gravity Forms
n8n Connector
Connect Gravity Forms to n8n and automate your workflows with secure, flexible, and powerful webhooks. Go beyond simple notifications and build advanced, two-way automations.
Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.
Advanced Number Field
Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.
List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.
Read tutorials about
How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)
Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.
How to Create an Event Workshop Registration + Waitlist System in WordPress
This guide shows how to set up a workshop registration + waitlist system in WordPress: register attendees until capacity is reached, waitlist the rest, approve entries, and auto-promote people when a seat opens using Gravity Forms, Gravity Flow, and GravityView.
Gravity Flow Form Submission Step Tutorial
The Gravity Flow Form Submission step pauses a workflow until another form is submitted, then continues once the handoff is complete. This guide shows how to connect two forms, prefill fields with mapping, send the correct secure link, and troubleshoot the most common “workflow didn’t move” issues.
Gravity Flow Delete an Entry Step Tutorial
The Gravity Flow Delete Entry step lets you trash or permanently remove Gravity Forms entries as part of a workflow. This guide covers the key settings, scheduling options (delay or date-based), and safe testing tips so you can follow retention and privacy rules with confidence.
