Implement Identify Calls with HubSpot Forms

Last Updated: May 24, 2022

For pricing information, please fill out the demo-request form on our pricing page to get in touch with a sales representative.

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:

hubspot-identifycall-1.png

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

hubspot-identifycall-2.png

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.