Warning a user before they leave a form

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.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.