Map Webflow forms directly to HubSpot to integrate with your marketing automation platform.
Note: We're transitioning to Workspaces, and are in the process of updating our content. Visit the blog post to read more about these updates and changes.
This video features an old UI. Updated version coming soon!
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.
Select the team that contains the HubSpot integration you want to delete
Delete the HubSpot integration:
Click the Integrations tab and scroll down to the Marketing automation integrations section at the bottom of the page
Press “Delete” next to the integration you want to remove
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:
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:
Make your form in Webflow if you don’t have one already
Publish (or republish) your project containing the form you want to connect to HubSpot
Fully fill out and submit your form on your live site
Remember, each Form block in your project 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.
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.
Go to the project settings of the project that contains the form you want to connect to HubSpot
Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
Click “Map new form”
Choose webflow.com(HubSpot) from the Marketing platform dropdown menu
Select your form from the Marketing form name dropdown menu
Choose your corresponding Webflow form from the Webflow form name dropdown menu
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)
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:
Open your live site, fully fill out,and submit your form
Log in to HubSpot
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:
Publish your project that contains the form you want to connect to HubSpot
Fill out your form
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:
Go to the project settings of the project that contains the form integration you want to update
Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
Click “Edit” next to the form you want to update
Make any changes to your fields as needed
Press “Update form connection” to save your changes
Delete your form integration
If you need to delete a form integration:
Go to the project settings of the project that contains the HubSpot form integration you want to delete
Click the Forms tab in the project and scroll down to the Form integrations section at the bottom of the page
Press “Delete” next to the form integration you want to remove
Type “DELETE” to confirm and press the Delete button