Legacy: Implement Identify Calls with HubSpot Forms

🔍 Please note: This article is for customers on Standard Bundle, Enrichment, or Clearbit Platform plans. 

Last Updated: October 6, 2023

❗Please note: If you are using Clearbit's HubSpot Form Shortening solution, you do not need to follow these steps, instead make sure you've toggled on 'Track Web Activity' on the Forms Management page.

Working with HubSpot forms? You can take advantage of the form embed code to make your identify call to Clearbit without having to rely on a developer.

As a reminder, an identify call allows you to get a clear picture of the person behind the anonymous IP address visiting your website. Tracking Form submissions is essential to understand your customer’s journey and Conversion Rate Optimization (CRO). You can find a more detailed explanation of identify calls here. If you're using Google Tag Manager, you can find implementation instructions here. 

💡 Please note: You'll first need to setup the Clearbit Tag before continuing. If you haven't yet, here is where you can start!

Let's start with a simple HubSpot form that includes First Name, Last Name, and Email fields. It should look like this:

Once you publish your form, click on the Embed button in the upper right corner of the screen and copy the code.

A standard HubSpot form embed code looks like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
  region: "YOUR-REGION-HERE",
  portalId: "YOUR-PORTAL-ID-HERE",
  formId: "YOUR-FORM-ID-HERE"
});
</script>

We'll use HubSpot's onFormSubmit callback from their configuration options to modify this code and do the following:

• Fetch all form fields
• Find the email field
• Grab the email field's value (i.e. the email submitted by the person viewing your website)
• Send the identified person to Clearbit

onFormSubmit: function ($form) {
  // Fetch all form fields
  let formFields = $form.serializeArray();
  // Find the email field
  let emailField = formFields.find(function (field) {
    return field.name === "email";
  });
  // Grab the email field's value
  let submittedEmail = emailField.value;
  // Send the identified user to Clearbit
  clearbit.identify(submittedEmail, {
  email: submittedEmail
  });
}

The new embed code should look like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
  region: "YOUR-REGION-HERE",
  portalId: "YOUR-PORTAL-ID-HERE",
  formId: "YOUR-FORM-ID-HERE",
  onFormSubmit: function ($form) {
    // Fetch all form fields
    let formFields = $form.serializeArray();
    // Find the email field
    let emailField = formFields.find(function (field) {
      return field.name === "email";
    });
    // Grab the email field's value (i.e. the submitted email)
    let submittedEmail = emailField.value;
    // Send the identified user to Clearbit
    clearbit.identify(submittedEmail, {
      email: submittedEmail
    });
  }
});
</script>

Now, when your website visitors submit your HubSpot forms, you'll be able to identify what pages they have been visiting through Clearbit.