Set Up Clearbit Enrichment for HubSpot Forms

Last Updated: June 10, 2022

❗Disclaimer: If you signed up after Feb 15, 2022, please follow these instructions on Set Up Clearbit Forms for HubSpot .

Forms Enrichment is a powerful tool to dramatically increase the conversion of your HubSpot Forms. It comes in two flavors:

  • Autofill - Automatically populates fields in a form with Clearbit data based on your Field Mapping settings when a user types their email.
  • Form Shortening - Hides all Form fields until a user types in their email. Any field that could not be autofilled is shown to the user to fill in.

The first step to complete is to update your Allowed Referrers in Clearbit to make sure that no one but you is using your Clearbit account to enrich forms. To do so, follow the instructions below.

  1. Go to the API settings of your main Clearbit dashboard.
  2. Scroll down to the Allowed Referrers portion of the API Settings section.
  3. Add the domain(s) your form is going to appear on. For example, if your form is going to display on a landing page at https://example.com/my-landing-page, you would add example.com. Also, to make sure the form works on all subdomains, like any testing sites, you can also add the domain *.example.com.
  4. After you're done, click the Update account button.
    allowed-referrers.png
  5. To confirm jQuery is installed on your site, open your browser's developer tools and navigate to the JavaScript console. In Chrome, you can do this by right-clicking the page, selecting Inspect, and going to the Console tab. Type a $ sign into the console, and press Enter.

    If you see "undefined", then jQuery is not added to your site and you need to follow jQuery's docs to get it added there. We recommend using the latest version.

    If you see something like "ƒ (e,t){return new m.fn.init(e,t)}", then jQuery is added to your site and you can proceed with Step 3.
    Screen_Shot_2021-03-22_at_3.04.37_PM.png Screen_Shot_2021-03-22_at_3.03.16_PM.png
  6. At the bottom of hubspot.clearbit.com/enrichment, you'll see a JavaScript snippet that you need to paste into the header section of your website. It looks like this:
    Screen_Shot_2021-03-22_at_3.14.02_PM.pngClick Copy code and then paste the snippet into the header of your site.
    Disclaimer: The steps you take to accomplish this will vary based on your site's setup, but you should not use Google Tag Manager to perform this deployment.Google Tag Manager often loads this script before jQuery, which will prevent it from working properly, so we recommend using another method that will give you a higher degree of control over the order in which jQuery and the Clearbit script load. If you are not sure how to add this code to your site you may have to ask a developer on your team.
    📝 Please note: You will need to add this snippet to the header of each page containing a HubSpot form that you want Clearbit to enrich.
  7. Now that you're set up, you can return to hubspot.clearbit.com/enrichment and toggle Autofill or Form Shortening on/off.
    Screen_Shot_2022-01-28_at_12.19.56_PM.png
    These settings apply the same to all Forms that you enabled by pasting the two scripts on your site. If you want to enable Autofill or Form Shortening for specific forms, be sure to remove the javascript snippets from the pages with these forms on.