Track form abandonment in HubSpot Forms (via Insiteful: the first & only partial entry tracking solution for HubSpot)

form-abandonment-tracking_hubspot.md

With the code below, you can track abandoned forms and partial entries from your HubSpot forms.

There are a few form abandonment scripts on GitHub with varying quality, but only this one works for HubSpot forms.

Want to rescue & recover leads that start to fill out your HubSpot forms but don’t finish? It doesn’t have to be tedious to track partial entries from HubSpot forms (no coding knowledge required).

This code was pioneered by Insiteful Form Analytics: the first & only solution that helps you automagically track & optimize your existing HubSpot forms.

Make your existing marketing efforts more effective & capture more leads from your HubSpot forms with saved progress, auto follow-up, smart insights (ie. confused fields), native CRM sync, and more 1-click power up's for your lead forms.

With no further ado, here´s how: simply update the code for your existing HubSpot forms as seen below, and you will start tracking form abandonment (full instructions here):

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
   portalId: "{{ YOUR HUBSPOT PORTAL ID }}",
   formId: "{{ YOUR HUBSPOT FORM ID }}",
   onFormReady: function($form){
      window.f = $form;
      $form.append('<script id ="insiteful_1" type="text/javascript">const getScript=(e,t)=>{var a=document.createElement("script"),n=document.getElementsByTagName("script")[0];a.async=1,a.onload=a.onreadystatechange=((e,n)=>{(n||!a.readyState||/loaded|complete/.test(a.readyState))&&(a.onload=a.onreadystatechange=null,a=void 0,n||t&&t())}),a.src=e,n.parentNode.insertBefore(a,n)}; getScript( "https://a.insiteful.co/dist/compile.min.js", function() { \
      insiteful_activate("{{ YOUR INSITEFUL ACTIVATION KEY }}"); }); \
      <' + '/' + 'script> ');
      $form[0].ownerDocument.defaultView.eval($form.find("script#insiteful_1").text()); // insiteful
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      window.addEventListener('beforeunload', (event) => { win_hs.saveForm(); });
      window.addEventListener('unload', (event) => { win_hs.saveForm(); });
  },
  onFormSubmit: function($form) {
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      win_hs.in_fh = {}; win_hs.in_fe = {}; // insiteful
  }
});
</script>

Important: be sure to replace the unique IDs bolded in blue above with the appropriate values from Hubspot & Insiteful, respectively. The unique ID for HubSpot forms can be retrieved from the ‘formId’ attribute in the embed code (or even the editor URL), as seen below, and the portal ID is just above it (read more here, via the HubSpot documentation). Meanwhile, the Insiteful activation key is available when login and navigate to the Install page.

Read more here about how-to use this code to track your HubSpot forms.