Just a few months ago I was looking for a tool to gain insights on how visitors use the forms on our websites. I only had a few requirements. The tool or service should:

• be easy to implement;
• be free, or at least have a fixed price (I prefer not to pay for every x visitors, because the numbers on our websites can get really high);
• have raw data available;
• able to connect to existing analytics tools we already use (Google Analytics, Snowplow, SiteCatalyst).

I came across a lot of really, really cool tools and services, and most of them had comprehensive dashboarding. Unfortunately, most of them turned out to be pretty expensive and do not share the raw data. So in the end, none of them met my requirements.

After a few beers on a friday night, I decided to build something myself.

Basic concept

The concept of tracking user behavior on a form is pretty easy. At least from a technical perspective. It comes down to proxying interaction events to a remote endpoint, and maybe send some extra metadata along, like time spend. And that’s exactly what Formagical.JS does. Nothing more, nothing less.

We (well, mostly the data scientists) are very interested in the raw data, and we are willing to do the analysis ourselves. We also don’t need fancy dashboarding, because it’s already included in the tools we have been using for years. I think those expensive tools and services I’ve been checking out are mainly charging for the dashboards, the analysis itself and storing data, not for the collection of data.

So, Formagical.JS only sends user events to a remote endpoint. That’s all it does, no rocket science. The analysis and reporting of all the raw data is up to you.

What does Formagical track exactly?

Formagical tracks all of the following interactions on your form:

• user opened a page that has Formagical.JS on it
• user started using form by interacting with one of its elements
• user enters a certain form element (focus)
• user leaves a certain form element (unfocus)
• user starts typing in a certain element (input and text area only)
• users changes the selection of a certain form element (dropdown, radio button and checkbox only)
• users pauses typing and continues
• user submits form

Every interaction (event) will be individually send to the remote endpoint (Google Analytics by default). With all these interactions, Formagical keeps track of the time that each event takes.

With this data, you can simply answer questions like: How many percent of the users who visit the page start using the form? Which form element take most of the users’ time and is most likely to be a conversion bottleneck? How many people are filling in their email address? I’m sure you get the idea.

Out-of-the-box integration with Google Analytics

When you already have a Google Analytics account configured on your website, Formagical.JS will send events to that account out of the box.

Events show up like this, and can be treated like any other event:

All events for a specific form have a category value of Formagical_{name of the form}.

How do I use it?

Using Formagical is very easy. Make sure you download the latest copy from the Github repository and save the file somewhere in your project. Add this code to your main template file:

<script src="path/to/formagical.min.js" />
  <script>
    $('#your-form').formagical();
  </script>
  

Unfortunately, Formagical.JS is only available as a jQuery plugin for now, so you’ll need to include jQuery as well if you haven’t already done so. When you’ve implemented Google Analytics and all of your form elements have a name attribute, you’re good to go!

Writing a custom tracker

As I mentioned before, Formagical sends events to the Google Analytics account that is implemented on the page. You might want to send the data to another endpoint, like Snowplow, Site Catalyst or your custom endpoint. Well, that’s pretty easy. You can overwrite the track method when initiating the Formagical plugin.

(function(formagical) {
  formagical.yourTracker = function(element, typeOfInteraction, duration) {
    // manipulate and send the data to an andpoint of choice
  }})(window.formagical = window.formagical || {});

  /* Pass your custom tracker when initiating Formagical */
  $('#your-form').formagical({track: window.formagical.yourTracker});
  

What’s next?

I wrote Formagical after a few beers on a Friday night, so there are a lot of things I want to improve. These are the first things I’d like to address:

• Start over from scratch with proper code
• Take error messages into account when submitting the form
• Use vanilla JavaScript instead of a jQuery plugin

My friend and co-worker Erik Driessen, who is a web analyst at Blue Mango, will soon write a post on how to analyze the data that Formagical.JS sends to Google Analytics, and how to improve your form usability based on this data.

How do I get it?

You can go over to the Github repository and grab the code over there. There is also some more implementation documentation available on Github. Please note that I released it under the MIT license, which permits reuse within proprietary software, but allows reuse as long as your software/service is free of charge.