TutorialBrowser Back button Warning in a Multipage Gravity Form

Tutorials » Rocketgenius, Inc. » Browser Back button Warning in a Multipage Gravity Form

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

Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.

JWT Prefill
Create JSON Webtokens to populate fields in your Gravity Form. With a secure key you can validate the data you don’t want to be tampered with.

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.

Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.

List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.

Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.

List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.

List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.

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.

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.

Read more tutorials about Rocketgenius, Inc.

Rocketgenius builds advanced software solutions. Rocketgenius is the team behind Gravity Forms. Visit GravityForms.com

Gravity Forms Shortcode: The Complete Guide for Embedding and Customizing Forms

Learn how to use the Gravity Form shortcode to embed forms in WordPress. Covers AJAX, prefilled fields, and PHP integration with simple examples.

Modify the Field Type in Gravity Forms by swapping Field ID's

Evolving requirements for your form might require switching from a text input to a dropdown menu for predefined options, or using a date picker instead of a text field for dates. But often you want to retain the field id, because of conditional logic or you want to retain the values of existing entries.

Change field type in an existing Gravity Form

Do you want to change the type of an existing field in an existing Gravity Forms? This handy little snippet does the trick.

Gravity Forms Inception - Building a Form with a Form

With Gravity Forms in combination with some Add-ons, you can create a form to create another form. This can be particularly handy when you have a solid structure for a form, but the only difference is the questions you ask.

iDEAL payments with Gravity Forms Stripe Add-On

Do you want to support iDEAL payments in Gravity Forms when using Stripe as a payment provider in stead of Mollie?