Capturing Form SubmissionsUpdated 31/10/2019


How to track a form that's present in your page and send data to Hull


After you have successfully installed the Hull Library in the page (by creating a Hull Platform), you need to add the following code to start tracking form submissions, as described in Form Tracking

<script>
 window.hullAsyncInit = function(hull){

   //Define which forms to capture. Here we capture all forms in the page
   var forms = document.getElementsByTagName("form");

   // This will run automatically on Form submission.
   hull.trackForm(forms, "Ebook Form Submitted",function(form){
     var _ = hull.utils._;
     var inputs = _.toArray(form.getElementsByTagName('input'));

     // Transform the Form's fields to an object
     var properties = _.reduce(inputs, function(m, v) {
       m[v.name]=v.value;
       return m;
     } , {});

     // Also capture those properties as Attributes on the User Profile.
     Hull.traits({
           email: { value: properties.email, operation: "setIfNull" },
           first_name: { value: properties.first_name, operation: "setIfNull" },
           last_name: { value: properties.last_name, operation: "setIfNull" }
    });

    // Return the form Properties so they're captured in the Event.
    return properties;
  });
 );
</script>

This snippet can be applied to all form types. Some forms such as those generated by Hubspot might require a bit more configuration. contact us so we can help!

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:

<script>
  Hull.track({{EventName_Placeholder}}, {{Event_Properties_Placeholder}})
</script>

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