HubSpot forms integration

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

To connect HubSpot to your Webflow team, you need to add the HubSpot integration to your team account:

1. Visit the Teams dashboard
2. Select the team to connect to HubSpot
   

Add the HubSpot integration:

1. Click the Integrations tab and scroll down to the Marketing automation integrations section at the bottom of the page
2. Click “Add marketing integration”
3. Choose HubSpot from the dropdown
4. Press “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 press Choose account
6. Press Connect app to give Webflow access to your HubSpot account (you’ll then be routed back to the Integrations tab in your Webflow account)
   

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

Delete your HubSpot integration

Go to your team account: 

1. Visit the Teams dashboard
2. Select the team that contains the HubSpot integration you want to delete
   

Delete the HubSpot integration:

1. Click the Integrations tab and scroll down to the Marketing automation integrations section at the bottom of the page
2. Press “Delete” next to the integration you want to remove
3. Type “DELETE” to confirm and press the Delete button
   

Important: If you delete your team’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 projects and re-add them to ensure they function as expected.

How to map individual forms to HubSpot

When somebody fills out the Webflow form on your 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 project (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 project containing the form you want to connect to HubSpot
3. Fully fill out and submit your form on your live site
   

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 the project settings of the project that contains the form you want to connect to HubSpot
2. Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
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. Press “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 project 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 the project settings of the project that contains the form integration you want to update
2. Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
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 project settings of the project that contains the HubSpot form integration you want to delete
2. Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
3. Press “Delete” next to the form integration you want to remove
4. Type “DELETE” to confirm and press the Delete button