Setting Up Forms Enrichment on a HubSpot Website

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.

Once set up, you can toggle either of these on and off from hubspot.clearbit.com/enrichment. If you are setting up Forms Enrichment on your own website (and not a HubSpot website), please see these instructions. Otherwise continue below:

 

1. Copy/paste the first snippet into the header of your HubSpot site

In the Forms section of hubspot.clearbit.com/enrichment or Onboarding, you'll see two code snippets. The first step is to copy the larger snippet (shown below) and paste it into the header section of your website. Note that depending on how your website is built, you may need to paste this snippet on each page that includes a HubSpot form that you want to enrich.

Screen_Shot_2019-10-29_at_1.10.52_PM.png

Now click "edit" on the website or landing page you want to work on and go to the "Settings" tab. Scroll down and expand "Advanced." There, you will find a Head HTML section in Additional code snippets. Paste the snippet you copied here.

Screen_Shot_2019-11-05_at_4.10.53_PM.png

 

2. Create a Rich Text module and place it where you would like the Form

Click edit on the Website or Landing Page you would like to work with. Click "edit modules" on the left side bar, click "add new module" in the right section, and then select Rich Text. In the side bar editor, you'll see a text area - go ahead and delete all the default text here. Now, click "advanced > source code" - this is where you'll paste the Form code in the next step.

Screen_Shot_2019-11-05_at_3.53.24_PM.png

3. Paste the Form code into the Rich Text module source code section

Go to the edit page for the form you would like to put on your site and click "publish." Copy the embed code and go back to the site editor. Paste this code into the source code section of the Rich Text editor. As a reminder, you'll find this section when you click "advanced > source code" in the side bar editor when the Rich Text module is selected. Don't click "save changes" yet - we still need to add a snippet in the next step.

Screen_Shot_2019-11-05_at_4.05.55_PM.png

 

4. Paste second snippet into the Form code in the Rich Text module

Now we'll take the smaller of the two snippets (below) from hubspot.clearbit.com/enrichment and paste it directly within the javascript for the HubSpot Form. This is within the script you just pasted into the source code section of the Rich Text module on your page.

Screen_Shot_2019-10-29_at_1.17.50_PM.png

The javascript for the HubSpot Form you are enabling should look like this after you've completed this step. The portalID and formID values will be different, however.

Screen_Shot_2019-11-05_at_4.08.05_PM.png

Note that you will have to do this for every HubSpot Form that you want enriched.

 

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