Back to all lessons
Lesson library

HubSpot forms integration

Map Webflow forms directly to HubSpot to integrate with your marketing automation platform.

Note: We’re transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes.
If your account hasn’t yet switched over to Workspaces, please visit our legacy lesson about the HubSpot forms integration. You can also learn how to check if your account is on Workspaces.
This video features an old UI. Updated version coming soon!
Webflow’s “Connect form to Webflow” modal displays fields to map to a HubSpot form. 

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
The Workspaces & Teams Dashboard. There is 1 Workspace named “Laurence’s Workspace.”

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.
The Integrations tab in Workspace settings.
Webflow’s “Add marketing integration” button is highlighted in the Marketing automation integrations section of a team’s Integrations tab. 
Webflow’s “Add marketing integration” modal shows HubSpot selected in the dropdown menu. 
HubSpot’s interface to connect Webflow to a HubSpot account is shown. 
HubSpot’s interface to allow access to Webflow is shown. 

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.
A “Delete” button is highlighted in the Marketing automation integrations section in Webflow to illustrate how to delete a HubSpot integration. 
The “Delete Marketing integration” modal appears after pressing the delete button. 

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.
The Forms tab in Site settings.
The “Map new form” button in the Form integrations section.
Webflow’s “Connect form to Webflow” modal displays fields to map to a 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
Webflow’s “Edit” button is highlighted next to a HubSpot form integration in the Form Integrations section of a project’s Forms tab. 
The “Update form connection” button is highlighted in Webflow’s “Connect form to Webflow” modal for a HubSpot form integration. 

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
A “Delete” button is highlighted in the Form Integrations section to illustrate how to delete a HubSpot form integration.
The “Delete form integration” modal appears after pressing the delete button.


Try Webflow — it's free