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.
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.
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.
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.
4. Paste second snippet into the Form code in the Rich Text module
Note that you will have to do this for every HubSpot Form that you want enriched.
5. Enable Autofill or Form Shortening!