HubSpot forms integration

Important: As of August 29th, 2023, you can connect your Webflow site with HubSpot’s marketing and CRM platform with the HubSpot App. For more information, check out our lesson on the HubSpot App.

Avoid middleware connection tools and handwritten CSS for form embeds by mapping your Webflow form fields to your setup in HubSpot. When customers submit their information on your website’s forms, the integration automatically routes those details over to HubSpot.

Note: This feature is only available to Webflow Enterprise customers. If you or a client are interested in learning more, please contact our enterprise team.

In this lesson you’ll learn:

1. How to connect HubSpot to Webflow
2. How to map individual forms to HubSpot

How to connect HubSpot to Webflow

First, you’ll need to add the HubSpot integration to your Workspace. To access your Workspace:

1. Open the Account dropdown in the navbar
2. Click Workspaces‍
3. Select a Workspace to connect the HubSpot integration to

To add the HubSpot integration:

1. Go to Workspace settings > Integrations tab > Marketing automation integrations
2. Click Add marketing integration
3. Choose HubSpot from the dropdown
4. Click Add marketing integration (you’ll be routed automatically to HubSpot so you can connect the 2 applications together)
5. Select your HubSpot account in the “Connecting Webflow Prod to HubSpot” page and click Choose account‍
6. Click Connect app to give Webflow access to your HubSpot account (you’ll then be routed back to the Integrations tab in your Webflow Workspace)

Note: To update your integration, you'll need to delete and replace it.

Delete your HubSpot integration

To delete your HubSpot integration, first go to your Workspace: 

1. Open the Account dropdown in the navbar
2. Select Workspaces
3. Select the Workspace you want to remove the HubSpot integration from

Then, delete the HubSpot integration:

1. Go to Workspace settings > Integrations tab > Marketing automation integrations
2. Click Delete next to the integration you want to remove
3. Type “DELETE” to confirm and click the Delete button

Important: If you delete your Workspace’s HubSpot Marketing automation integration and re-add it at a later time, you will also need to delete any previous HubSpot form integrations in your sites and re-add them to ensure they function as expected.

How to map individual forms to HubSpot

When somebody fills out a form on your Webflow site, each Webflow form field that you’ve mapped to a HubSpot form field automatically pulls the submitted form data into your corresponding HubSpot fields’ values. In other words, this integration shares mapped fields’ submitted data between your Webflow form and your HubSpot form. You can map your form and manage it with the following steps:

1. Publish your form and create a test submission
2. Map your Webflow form to HubSpot
3. Test your mapped form
4. Edit your form integration settings
5. Delete your form integration

Publish your form and create a test submission

Before you can map your dynamic Webflow forms to a global HubSpot form, you need to make your form in Webflow, publish your site (or republish it if you already have a form in use), and create a test submission:

1. Make your form in Webflow if you don’t have one already
2. Publish (or republish) your site containing the form you want to connect to HubSpot
3. Fully fill out and submit your form on your live site

Remember, each Form block in your site needs to have a unique Form name. If 2 or more forms use the same name, this can cause issues with Webflow's API and how it fetches mappable form fields. By default, our API fetches forms with the most recent submission, and if 2 forms use the same name, this can disconnect or break the expected mapping between Webflow and HubSpot. Multiple forms with the same name can also cause other issues (e.g., multiple forms submitting to HubSpot when you wanted only 1 to submit).

Important: Even if you have already published your form, you will need to republish it to have the integration function as intended.

Learn more about forms.

Map your Webflow form to HubSpot

After you have created a test submission from the form you want to connect to HubSpot, and after you have added the HubSpot integration to Webflow, you can map the form to HubSpot. 

1. Go to Site settings of the site that contains the form you want to connect to HubSpot
2. Go to Forms tab > Form integrations
3. Click Map new form
4. Choose webflow.com (HubSpot) from the Marketing platform dropdown menu
5. Select your form from the Marketing form name dropdown menu
6. Choose your corresponding Webflow form from the Webflow form name dropdown menu
7. Map your Webflow form fields to Marketing lead fields (e.g., a “FirstName” field in Webflow maps to a “firstName” field in HubSpot — you don’t have to map all your fields if you don’t want to)
8. Click Connect form to connect your Webflow form to HubSpot

Good to know: When mapping form fields, you’ll need to make sure your HubSpot form contains any Webflow form field as a corresponding field in the HubSpot form itself. You can add these corresponding fields in your HubSpot form by selecting your matching HubSpot form, opening it up, editing it, and adding any necessary fields to your HubSpot form.

Test your mapped form

You can test your integration after you’ve mapped your Webflow form to your HubSpot form to make sure it’s pulling data into HubSpot as you’d like: 

1. Open your live site, fully fill out, and submit your form
2. Log in to HubSpot
3. Check the submission log in HubSpot to confirm your form information was pulled into HubSpot correctly

Edit your form integration settings

If you want to update your form integration settings, you need to create a form test submission:

1. Publish your site that contains the form you want to connect to HubSpot
2. Fill out your form
3. Submit it
   

After you have created a test submission from the form you want to connect to HubSpot, you can update your form fields in your current form integration:

1. Go to Site settings of the site that contains the form integration you want to update
2. Go to Forms tab > Form integrations
3. Click Edit next to the form you want to update 
4. Make any changes to your fields as needed
5. Press Update form connection to save your changes

Delete your form integration

If you need to delete a form integration: 

1. Go to the Site settings of the site that contains the HubSpot form integration you want to delete
2. Go to Forms tab > Form integrations
3. Press Delete next to the form integration you want to remove
4. Type “DELETE” to confirm and press the Delete button