Form Tracking for HubSpot Forms

HubSpot forms are an extremely popular way to capture leads and pass data into your CRM. There are two potential ways to add Zuko tracking to your HubSpot form depending on your setup:

‍

a) The HubSpot form is fully integrated into your site.

At higher pricing package levels, you are able to add HubSpot forms directly to your site as part of the build. If this is the case, you can install Zuko like you would for any other form. Simply add the two code tags on form load and form completion and Zuko will pull in all the form tracking data automatically.

‍

b) The HubSpot form is iFramed in

More commonly, your HubSpot form may have been embedded by pasting a piece of code generated by HubSpot.

‍

In this case, the form will be iFramed into your site and you won't have direct access to add Zuko code tags.

‍

To track an iFramed form, locate the tag where you are currently showing your HubSpot form. It will look something like this:

_{<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>}

_<script>

 _{hbspt.forms.create({}

   _{region: "na1",}

   _{portalId: "YOUR_HUBSPOT_PORTAL_ID",}

   _{formId: "YOUR_HUBSPOT_FORM_ID",}

 _});

_</script>

‍

Then, locate your Zuko form ID. This can be found on the settings page of the form in the Zuko app in the "Edit Form" section:

‍

‍

Replace the HubSpot tag above with the following:

_{<script src="https://assets.zuko.io/js/v2/client.min.js"></script>}

_{<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>}

_<script>

 _{const zukoFormId = "YOUR_ZUKO_FORM_ID";}

 _{const slug = zukoFormId;}

 _{hbspt.forms.create({}

   _{region: "na1",}

   _{portalId: "YOUR_HUBSPOT_PORTAL_ID",}

   _{formId: "YOUR_HUBSPOT_FORM_ID",}

   _{onFormReady: ({ 0: $form }) => {}

     _Zuko

       _{.trackForm({ slug })}

       _{.trackEvent(Zuko.FORM_VIEW_EVENT);}

     _{for (const eventType of Zuko.eventTypes) {}

       _{$form.addEventListener(eventType, ({ type: eventType, target: { tagName, type, name } }) => {}

         _{const element = document.createElement(tagName);}

         _{element.name = name;}

         _{try {}

           _{element.type = type;}

         _{} catch (_) {}

           _{// Ignore}

         _}

         _Zuko

           _{.trackForm({ slug })}

           _{.trackEvent({ type: eventType, target: element });}

       _})

     _}

   _},

   _{onFormSubmit: () => Zuko}

     _{.trackForm({ slug })}

     _{.trackEvent(Zuko.COMPLETION_EVENT),}

 _});

_</script>

‍

Remember to replace the following placeholders with the correct values for your HubSpot form and the corresponding form in Zuko:

• YOUR_HUBSPOT_PORTAL_ID
• YOUR_HUBSPOT_FORM_ID
• YOUR_ZUKO_FORM_ID (also known as the form ‘slug’)

Zuko events should then be firing on your HubSpot form and be pushing into the Zuko dashboards.

‍