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
All Entries
All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.
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.
JWT Prefill
Fill forms with data you can trust. Prefill Gravity Forms fields with a secure token instead of links with editable url parameters, so your data is accurate, tamper-proof, and ready to use.
Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.
Read tutorials about
Gravity Forms Airtable Integration: Create Records From Form Submissions
Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.
Gravity Forms Asana Integration: Create Tasks From Form Submissions
Learn how to connect Gravity Forms to Asana with GravityWP API Connector. This tested workflow creates Asana tasks from form submissions and saves the returned task ID and URL back to Gravity Forms.
Gravity Forms Google Calendar Integration: Create Events From Form Submissions
Connect Gravity Forms to Google Calendar with GravityWP API Connector. Learn how to create calendar events from form submissions, map event details, configure OAuth 2.0, handle time zones, and save the returned Event ID and URL.
Gravity Forms Notion Integration: Create Database Pages Without Zapier
Connect Gravity Forms to Notion without Zapier. This tested tutorial shows how to create Notion database pages from form submissions and save the returned page ID, URL, creation time, and API response.
