Warning a user before they leave a form

This post is more than 2 years old.

A reader asked me this today and I thought it would be a good topic for discussion.

I have a form and notice that not a lot of people complete it. Can you think of any way to catch those people that leave the page without filling out the form and direct them to a page that could get them to fill out something answering why they didn't fill out the form?

So, before getting into the technicalities, I think this touches on an incredibly important topic, one I actually raised way back in 2006, "How ColdFusion can save your business!" While that blog post was focused on ColdFusion, the point it raised was how you could use server-side technology to track when a user leaves the site. Or to be more precise, what the last URL was for a particular user. The example raised in the blog post was a multi-step form that may cause many users to abandon the site part way through. I asked the question - how would you determine that people were having an issue with one particular step?

In the blog post I used server-side tracking, but as folks brought up in the comments, Google Analytics (or any analytic program), could be used to help track this as well. At the end of the day, you as the owner of your site need to be proactive in looking for this type of information.

Now - let's discuss the user's particular question. You can detect, with JavaScript, when a user leaves a page. This fires an event on the Window object called onbeforeunload. As far as I can tell, you can only allow or prevent the navigation. So the user's particular request to go to another page wouldn't be possible client-side. In theory you could use a cookie (or Session value) when the user loaded the form page and on his or her next hit, see if that variable is there and then redirect the user. But sticking to JavaScript, we can only warn the user, not redirect them. Here's a simple example.

<html>
	<head>
	</head>
	
	<body>
		
		<form id="myForm">
		
			<p>
			<label for="field1">field1</label>
			<input type="text" name="field1" id="field1">
			</p>
			<p>
			<label for="field2">field2</label>
			<input type="text" name="field2" id="field2">
			</p>
			
			<p>
				<input type="submit" value="Send Form">
			</p>
		</form>
		
		<p>
		<a href="test2.html?x=1">Reload this page.
		</p>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
		<script>
		
		$(window).on("beforeunload", function() {
			return "Are you sure? You didn't finish the form!";
		});
		
		$(document).ready(function() {
			$("#myForm").on("submit", function(e) {
				//check form to make sure it is kosher
				//remove the ev
				$(window).off("beforeunload");
				return true;
			});
		});
		</script>
	</body>
</html>

An event handler is added to the Window object to listen for the user leaving and warn them beforehand. Then we can use the form submission handler to just remove the event.

leave

This works, but is pretty annoying, so I'd say use sparingly. Then again, it isn't as evil as those darn modal windows asking you to "Like" the site - but that's a rant for later.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by exex zian posted on 3/6/2015 at 4:07 PM

Warning is way too harsh - Title would have been suited to more polite versions as : Confirming or Notifying

Comment 2 (In reply to #1) by Raymond Camden posted on 3/6/2015 at 4:08 PM

Sorry, what? You mean the text I used? That was just for demo purposes.

Comment 3 by Raymond Camden posted on 3/6/2015 at 4:17 PM

As an aside, I was talking on IM with the person who emailed me about this and I made the point that you may not want to add the warning unless the user actually interacts with the form. You can add a blur/change/etc type handler to input fields and only add the beforeunload listener then. That way if the user hits the page and has no interest in doing the form, you don't annoy them when they click away. If folks need a demo of that, just ask.

Comment 4 (In reply to #2) by exex zian posted on 3/6/2015 at 4:33 PM

No I was referring to word "Warning" in Title of the content: Warning a user before they leave a form

Comment 5 by Joe Rinehart posted on 3/6/2015 at 4:36 PM

Ray - https://github.com/codedanc... is the magic ticket on this one. Handles dirty/undirty form checking, ignoring fields by adding a class, ignoring disabled fields, and all those unsightly subtle edge case things.

Comment 6 (In reply to #4) by Raymond Camden posted on 3/6/2015 at 4:38 PM

Err... so you have a problem with the title of the blog entry? That seems to be a rather odd comment. ;)

Comment 7 (In reply to #6) by exex zian posted on 3/6/2015 at 4:46 PM

Not problem exactly. i was suggesting from a user experience point of view. Warning sounds quite harsh.

Comment 8 (In reply to #7) by Raymond Camden posted on 3/6/2015 at 4:48 PM

Ok, but to be clear, that word is used in my blog title, it isn't what the end user is seeing per se. :)

Comment 9 (In reply to #5) by Greg posted on 3/6/2015 at 4:50 PM

Joe does your code have the ability to direct a user to a form if they didn't complete the form?

Comment 10 by Joel Mueller posted on 3/6/2015 at 10:38 PM

If I've already decided that I can't be bothered to finish filling something out for some reason, a pop-up demanding that I fill out something else to tell you why I didn't want to fill out the first thing is a sure-fire way to enrage me and guarantee I never come back for any reason.

Comment 11 (In reply to #9) by Joe Rinehart posted on 3/6/2015 at 10:39 PM

Hey Greg - it's not my code. It's got events, so you could certainly listen for something and then scroll to a form/focus a field.

Comment 12 by Phillip Senn posted on 3/6/2015 at 11:22 PM

I wanted to post a simple:



(function() {
$(window).on('beforeunload', beforeunload)

function beforeunload() {
var local = {}
local.url = 'Finished.cfm'
local.data = {}
local.data.UsrID = $('#UsrID').text()
result = $.ajax(local)
result.fail(dom.fail)
};
})()


But then I realized there were too many dependencies, so I created a gist https://gist.github.com/Phi...

It includes all my normal includes that I use with every page of every project.

Comment 13 (In reply to #3) by Dan Kraus posted on 3/7/2015 at 4:26 PM

I think that is the key difference. It's not begging to fill out the form but a positive UX feature telling them "hey you started this, but you didn't finish it. You sure you're done?" Kind of reminds me of a server at a restaraunt asking if you'd like the rest of the meal wrapped up instead of just up and taking it away as you leave.

Facebook comes to mind and it might be the first place I saw this idea put to use. You can start to enter a comment but if you try to navigate away, it prompts you.

Comment 14 (In reply to #10) by Mark Gregory posted on 3/8/2015 at 4:44 AM

This is no less user hostile than popups or pop-unders in my book. Yes you can do it, but should you? Probably not. Having said that, there are a few rare scenarios that warrant its use. Marketing concerns is not one.

There seem to be more of these lately too.
Confirm Navigation: Do you really want to navigate away from this page?
Yes, and the site, and will go to considerable lengths to avoid coming back.

Comment 15 by Ichvan Ibragimov posted on 10/23/2015 at 12:56 PM

Is it possible to get the message only trying to close the browser? Not other buttons etc.?

Greetings from Germany

Comment 16 (In reply to #15) by Raymond Camden posted on 10/23/2015 at 12:59 PM

I don't think so. If you could, you could stop someone from closing the browser which would suck.

Comment 17 (In reply to #16) by Ichvan Ibragimov posted on 10/23/2015 at 1:32 PM

Thanks for the reply.

Maybe I did not explain my point good enough.

The thing is I have a popup with a formula where applicants can apply. One of my customers want it like this: If the applicant closes the popup then fire the message , but only then... I made a save button with a ID="saveButton", if they click on that button , then the message appears also.. It makes me insane to be fair...

I get your'e point and I think this is also not a bad idea. But sites like Facebook etc. they also have this... Do you have any ideas for it?

many greetings!

Comment 18 (In reply to #17) by Raymond Camden posted on 10/23/2015 at 2:33 PM

I think, stress think, if you use a form and edit it and then close the browser, it may notice and ask you first.

Comment 19 by Jake posted on 2/18/2016 at 12:05 PM

Hey Raymond, great post! (i don't think 'Warning' is too harsh, personal opinion here)

I was wondering whether you think this would work for compliance?

Basically i have a client who works as a financial advisor and their website has a third party site linking from it, they need to have a warning pop up similar to the above that states they are leaving "WEBSITE1" and moving to "WEBSITE 2" for example.

Is this something easy to do from the code above?

I have tested your code and works just fine on the website but for all links, if i wanted to specifically target selected URL's would this be easy to do?

Jake

Comment 20 (In reply to #19) by Raymond Camden posted on 2/18/2016 at 12:20 PM

Hmm. I'm not sure. I don't have this sample code anymore, but if you modify the beforeunload func to include the event object, and then examine it, you may see the destination value, and if so, you could selectively do stuff.

Comment 21 (In reply to #19) by Raymond Camden posted on 2/18/2016 at 12:27 PM

I did some basic testing, and as far as I know, it isn't supported. However, instead of a generic 'beforeunload' func, it would be trivial to listen for anchor links where the target matches website2. I'd take over those clicks.