Browser warning when closing tab when editing/filling out a form!

hello, as with the default wordpress editor, it would be great if Gravity Forms were able to prompt (warning popup confirm/cancel) you when you if click close the browser or tab without submitting the form.

This is especially essential for those who use frontend post submission forms.

Some users have already told me that they were writing a text longer than 500-800 words and lost everything by accidentally closing the tab or crashing the system/browser :astonished:

P.S: the save and resume function does not solve the problem.

2 Likes

That’s a good idea. I will add that to our list of requested features. Thank you.

1 Like

I’m happy with that Chris. Thank you :partying_face::partying_face::partying_face:

1 Like

My main problem has been on multi-page forms when the user forgets to click “Submit” on the last page.

1 Like

Good point there …

I added an HTML field to a form and added this script to it:

<script>
	jQuery(document).on('mouseleave', leaveFromTop);
	function leaveFromTop(e){
		if( e.clientY < 0 ) 
		  alert('Please be sure you submit the form before you go!');
	}
</script>

You can test that out on the form on my site here:
https://gravityforms.chrishajer.com/auto-tab-to-next-input/

Screen capture of how that worked for me:

2 Likes

Thank you Chris. But this function only gives a simple warning. If the user accidentally clicks in close, this javascript does not prevent it. I would like it to be the same as in Wordpress post edit screen, which issues the warning with button ask to confirm whether you really want to close the tab or the browser.

basically is to prevent window closing unless the user clicks “confirm”

1 Like

You can of course extend that example to catch all sorts of manner of closing. That was just a quick proof of concept. You would copy what WordPress is doing, or add other conditions.

Hello Chris, but I’m not a developer. I even tried using this code snippet https://jsfiddle.net/sogata/Lx82optd/ but it does not work for gravity forms.

Try this. It checks if the user has clicked on any of the inputs, if they have then it’ll fire the warning when they go to close the tab. If the user doesn’t click on any of the inputs it’ll let them leave without bothering them. I just did a rough test on this, it may not be perfect.

<script>
    var userStartedForm;
    jQuery(document).on('focus', '.gform_wrapper input', function(){
        userStartedForm = true;
    });
	jQuery(window).on('beforeunload', function(){
        if(userStartedForm){ return ''; }
    });
</script>
3 Likes

It worked perfectly Nick, thank you very much! :clap:

1 Like

@nickhempsey, The provided code triggers a warning every time the user clicks “Next” or “Submit” on a multi-page form.

@lonepc Yeah, it wasn’t meant for multi page use. and I did mention I wrote when I was leaving for the day and didn’t do any testing on it. My apologies.

Give me a few I can rewrite it to work properly.

Hmm… this is actually harder than I thought it would be.

I have to leave for the day, but I’ll think about it tonight and let you know if I come up with a solution tomorrow.

Just a thought while at a red light. What happens if you use AJAX? That might be a quick way around your issue.

AJAX submits the form without the need for the page to unload. ¯\_(ツ)_/¯. Worth a shot.

1 Like

@nickhempsey, Where do I enable AJAX? My form is conditional logic / calculation heavy - Would AJAX affect the form’s speed in either direction?

I am nervous about using AJAX because I use a bunch of add-ons and I’m not sure whether using AJAX may introduce some compatibility issues. Ideally I would appreciate a modified version of the snippet you wrote.

@lonepc You enable ajax in the shortcode [gravityforms id="##" ajax=“true”]

AJAX shouldn’t affect any of the addons, conditional logic, or calculations. AJAX just allows the form to be submitted without the need for a page refresh. You can also just do some testing on a separate page before moving to production.

While I understand you’d appreciate a modified version of that snippet it’s actually a complicated problem, I’m a bit hung up on it, and frankly I’m just another GForm user trying to help out. Not trying to be rude but I’m not being paid to do any of this work and I have a full time job and 4 children. lol

The Problem
Essentially you have to somehow change the $userStartedForm variable to false when the user clicks the submit button but before the form starts to refresh the page. This is where I’m struggling a bit, because in all of my testing what happens is this:

  1. Start using form.
  2. $userStartedForm is set to true.
  3. Click Submit or Next Page
  4. Page Refreshes
  5. $userStartedForm is set to false.

I need to figure out a way to interrupt the page refresh and change the $userStartedForm variable. Unless someone else has an idea of how to do this I’m a bit stuck… and therefore you’re stuck as well.

Currently don’t have time to test it myself, but this seems relevant: https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes

© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.