Tracking Form submissions with Hull.jsUpdated 11/12/2019

You can automatically track form submissions using Hull.js. This allows you to track all form properties and consume them inside of Hull in the form of events. There are multiple ways to set this up:

  • Manual Tracking Setup
  • GTM (Google Tag Manager)

See below for a real scenario that demonstrates how you can track forms with Hull.js.

HTML Form Example:

<form name="test" onsubmit="return handleClick()">
  <input id="fName" type="text">
  <input id="lName" type="text">
  <button type="submit">Submit</button>

Using Hull.trackForm()

You can simply insert the snippet below into any page that contains a form - some code may need to be changed depending on how your site is built.

Step 1: Keep in mind that var forms must be an array of HTMLFormElements.

Step 2: The first function (function event(form){}) must return a string which will be the name of the event, in Hull. The second function (function properties(form){}) must return an object which contains the properties of the event to be sent to Hull.


  // Step 1: Get all form elements via native code, jQuery, etc.

  var forms = document.getElementsByTagName('form');

  // Step 2: Pass form elements and extract data

  Hull.trackForm(forms, function event(form){
    // Step 2a: Get the event name based on the form, 
    // can be just the name or some more complex logic.
  }, function properties(form){
    // Step 2b: Write code to extract the form properties,
    // this one assumes that input elements have all the data and 
    // that the id is the property name:

    var inputs = form.elements;
    var formData = {}; 
    for (i = 0; i < inputs.length; i++) {
      if (inputs[i].nodeName === "INPUT") {
        formData[inputs[i].id] = inputs[i].value;
    return formData;

Google Tag Manager (GTM) Setup

If you'd rather use Google Tag Manager to deploy Hull.trackForm, simply add a new tag, with the following custom HTML:

  Hull.track({{EventName_Placeholder}}, {{Event_Properties_Placeholder}})

Please note that Support document.write must be enabled for this tag to work.