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
List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.
Entry to Database
Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.
DateTime Field
The GravityWP - DateTime Field add-on adds a dedicated Date/Time field to Gravity Forms so users can enter both a date and a time in a single input.
API Connector
Connect Gravity Forms to External API's: Query the API using form field values and automatically fill other form fields with the API response.
Read tutorials about
Gravity Forms Discount Code Field: Apply Fixed or Percentage Discounts in a Form
Learn how to create a Gravity Forms discount code field that applies fixed or percentage discounts. This tutorial shows how to calculate subtotals, discount amounts, and final totals using tested form logic.
Gravity Forms Zoom Integration: Create Zoom Meetings From Booking Forms
Learn how to connect Gravity Forms to Zoom without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create Zoom meetings from booking form submissions and save the returned meeting details back to Gravity Forms.
Gravity Forms monday.com Integration: Create New Items From Form Submissions
Learn how to connect Gravity Forms to monday.com without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create new monday.com items from form submissions and save the returned monday.com item ID back to Gravity Forms.
Gravity Forms Pipedrive Integration: Send Form Contacts to Pipedrive Without Zapier
Learn how to connect Gravity Forms to Pipedrive without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to send form contacts, custom fields, and the returned Pipedrive Person ID directly from WordPress to Pipedrive CRM.
