Track when people drop out of a web form

Question

Hi,

Is there a way that I can track when people drop out of a form. If the form is, say, 10 fields long and they start entering their data and then decide to not submit half way through, is there a way to capture the data they've entered already to give an idea of when and why they didn't submit?

Many thanks

Answer 1

You can run a function on the onunload event handler that serializes the form and makes an AJAX request. No guarantees that this will work with every browser (especially if the user force quits the browser or the computer freezes, etc) but for the most part it would be the easiest way to get the data in the database.

Answer 2

Of course, you can use javascript events, and a AJAX call. Works even if user forse quits browser.

Answer 3

Ajax the data to the server with an onchange on every text field.

Answer 4

Yes. Of course there's a way :)

Essentially you are going to want to, at some point, check the form to see if there is any data to capture. You might do this when the user leaves the page, or even every time they press a key - it's up to you and how detailed you want to get.

What I would do is serialize the form, and pass it (via ajax) to a web service that handles the data appropriately.

This is a realy quick sample of how to serialize and pass the data. In this example, the form I am passing has an ID of "mainForm", and my web service is a local file called "makeList.php" that looks for $_REQUST['j'] to get the passed form data.

function makeList(){
    var r= getXmlObject();
    var json=$.toJSON($('#mainForm').serializeObject());
    var url= 'makeList.php?j=' + encodeURIComponent(json); 
    if (r.readyState == 4 || r.readyState == 0) {
            r.open("POST", url, true);
            r.onreadystatechange = function(){
            //do stuff when the ajax request is finished being received.
        }
        r.send(null);
    }
}

function getXmlObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');
    }
}

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};