CODEWITHSUNDEEP
phpajax
Mike Watts
Mike Watts

Reputation: 13

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

Upvotes: 1

Views: 122

Answers (5)

Alexander Thiel
Alexander Thiel

Reputation: 21

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.

Upvotes: 2

Dutchie432
Dutchie432

Reputation: 29160

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

Upvotes: 0

Byron Whitlock
Byron Whitlock

Reputation: 53901

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

Upvotes: 0

pilotstarmedia.com
pilotstarmedia.com

Reputation: 577

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

Upvotes: 0

Jeff Rupert
Jeff Rupert

Reputation: 4840

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.

Upvotes: 0

Related Questions