Integrate HubSpot forms

Track form submissions, enrich user profiles, test, and personalize forms.

HubSpot forms are a common way to capture leads and contact information. By connecting them to Croct, you can track form submissions, enrich user profiles with the submitted data, test, and personalize which form is shown to each visitor.

Which form type do you have?

This tutorial covers both legacy and new Hubspot forms.

Prerequisites

Before you start, make sure you have:

A Croct account with a workspace and application set up.
The Croct SDK installed on the page where your HubSpot form is embedded.
A HubSpot account with at least one form set up.

Track form submissions

Tracking a form submission as a Goal completed event lets you measure conversion rates in your dashboards and use them as goals in experiments.

You can listen for submissions using a global event or a callback (legacy forms only).

// Register the listener before the HubSpot form script loads// to avoid missing early submissions.window.addEventListener(  'hs-form-event:on-submission:success',  function() {    croct.track('goalCompleted', {      goalId: 'form-submission',    });  },);

For details on additional properties like currency and value, see the goal completed event reference.

Enrich user profiles

You can send form field values to Croct user profiles to use them for audience segmentation and personalization.

// Register the listener before the HubSpot form script loads// to avoid missing early submissions.window.addEventListener(  'hs-form-event:on-submission:success',  async function(event) {    var fieldValues = await HubSpotFormsV4      .getFormFromEvent(event)      .getFormFieldValues();
    var values = Object.fromEntries(      fieldValues.map(item => [item.name, item.value])    );
    croct.user.edit()      .set('firstName', values['0-1/firstname'])      .set('lastName', values['0-1/lastname'])      .set('email', values['0-1/email'])      .set('company', values['0-1/company'])      .save();  },);

You can customize the patch payload to track data based on your form fields. Check the user reference to see available profile attributes.

Dynamically render the form

HubSpot allows you to create as many forms as you want, and each form has its own ID. To run an AB test or build a personalized experience and show different forms to different users, you only need to define which form to render.

With Croct, you do this by storing the form ID in a slot. Instead of hardcoding the form ID in your page, you fetch it from the slot and render whichever form ID it returns. From there, an AB test or personalized experience can change the form ID per user, and your page renders the matching form automatically.

Set up the slot

Open the components page and create a component with the ID hubspot-form and the following attribute:
Attribute Type Required
formId Plain text Yes
Open the slots page and create a slot with the ID hubspot-form, associated with the hubspot-form component.
Set the default content to the form ID you are currently using.
Add the slot to your project:
npm
npx croct@latest add slot hubspot-form
Run

Attribute	Type	Required
formId	Plain text	Yes

Render the form dynamically

Fetch the slot content and use the form ID to embed the correct form:

<div id="hubspot-form" data-portal-id="YOUR_HUBSPOT_ACCOUNT_ID" class='hs-form-frame'></div><script>  var {content} = await croct.fetch('hubspot-form');
  document.getElementById('hubspot-form')    .setAttribute('data-form-id', content.formId);
  var script = document.createElement('script');  script.src = 'https://js.hsforms.net/forms/embed/YOUR_HUBSPOT_ACCOUNT_ID.js';  document.body.appendChild(script);</script>

Now that the form ID comes from a slot, you can create an AB test or a Personalized experience using the hubspot-form slot. Each variant or experience can display a different form.

Example

If you plan to track submissions, enrich the user profile, and test or personalize the form, this is how the final code might look like:

<script>  window.addEventListener(    'hs-form-event:on-submission:success',    async function(event) {      croct.track('goalCompleted', {        goalId: 'form-submission',      });
      var fieldValues = await HubSpotFormsV4        .getFormFromEvent(event)        .getFormFieldValues();
      var values = Object.fromEntries(        fieldValues.map(item => [item.name, item.value])      );
      croct.user.edit()        .set('firstName', values['0-1/firstname'])        .set('lastName', values['0-1/lastname'])        .set('email', values['0-1/email'])        .set('company', values['0-1/company'])        .save();    }  );</script><div id="hubspot-form" data-portal-id="YOUR_HUBSPOT_ACCOUNT_ID" class='hs-form-frame'></div><script>  var {content} = await croct.fetch('hubspot-form');
  document.getElementById('hubspot-form')    .setAttribute('data-form-id', content.formId);
  var script = document.createElement('script');  script.src = 'https://js.hsforms.net/forms/embed/YOUR_HUBSPOT_ACCOUNT_ID.js';  document.body.appendChild(script);</script>

Explore

SlotsLearn how slots help you manage and personalize content.

ExperiencesDiscover what an experience is and how it works.