Setting up Clearbit Enrichment for HubSpot forms

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.

To begin setting up Clearbit Enrichment for HubSpot forms, go to hubspot.clearbit.com/enrichment and scroll to the bottom of the page. There, you will find two steps to complete.

 

1. Update your Allowed Referrers in Clearbit

In order to make sure that no one but you is using your Clearbit account to enrich forms, you'll need to whitelist your domain(s).

  • Go to the API settings of your main Clearbit dashboard.
  • Scroll down to the Allowed Referrers portion of the API Settings section.
  • 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.
  • After you're done, click the Update account button.

allowed-referrers.png

 

2. Confirm whether jQuery is installed on your website

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.

Screen_Shot_2021-03-22_at_3.04.37_PM.png

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 2.

Screen_Shot_2021-03-22_at_3.03.16_PM.png

 

3. Copy/paste Clearbit's form enrichment snippet into the header of your website

In step 2, you'll see a JavaScript snippet that you need to paste it into the header section of your website. It looks like this:

Screen_Shot_2021-03-22_at_3.14.02_PM.png

Click "Copy code" and then paste the snippet into the header of your site.

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.

You will need to add this snippet to the header of each page containing a HubSpot form that you want Clearbit to enrich.

 

4. Enable Autofill or Form Shortening

Now that you're set up, you can return to hubspot.clearbit.com/enrichment and toggle Autofill or Form Shortening on/off. These settings apply the same to all Forms that you enabled by pasting the two scripts on your site. If don't want to enable Autofill or Form Shortening for some Forms but not all, be sure to remove the javascript snippets from the pages with those Forms.