Track when people drop out of a web form

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

---

One thing to do could be to save their data in a cookie, for their own sake if they leave the site and come back. This could be done using eg. http://code.google.com/p/cacheform/ . This would be to increase usability.

It really takes some coding to collect, aggregate and visualize the data you mention. Time on field, conversion rate, average input length or dropout rate per field etc are all super useful indicators of web form usability and what to keep or remove in a form.

I pitched an external tool for this to a client, which took me five minutes to implement. I used Form Analytics. There is also clicktail.com which might be of use to you.

---

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;
};

---

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.

---

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

---

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