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:
[SITE REMOVED]

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