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.
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.
Archived Comments
Warning is way too harsh - Title would have been suited to more polite versions as : Confirming or Notifying
Sorry, what? You mean the text I used? That was just for demo purposes.
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.
No I was referring to word "Warning" in Title of the content: Warning a user before they leave a form
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.
Err... so you have a problem with the title of the blog entry? That seems to be a rather odd comment. ;)
Not problem exactly. i was suggesting from a user experience point of view. Warning sounds quite harsh.
Ok, but to be clear, that word is used in my blog title, it isn't what the end user is seeing per se. :)
Joe does your code have the ability to direct a user to a form if they didn't complete the form?
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.
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.
I wanted to post a simple:
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.
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.
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.
Is it possible to get the message only trying to close the browser? Not other buttons etc.?
Greetings from Germany
I don't think so. If you could, you could stop someone from closing the browser which would suck.
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!
I think, stress think, if you use a form and edit it and then close the browser, it may notice and ask you first.
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
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.
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.