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

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
© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.