Connect your Webflow site and your HubSpot account.
You can integrate HubSpot on your site using the Certified HubSpot App available through the Webflow Marketplace. The App lets you embed and style HubSpot forms, map your existing Webflow forms to your HubSpot instance, add HubSpot assets and chatbots to your Webflow site, and set up site tracking.
If you are looking for information about the legacy, Enterprise-only, HubSpot forms integration, please visit our lesson on HubSpot forms.
How to install and authorize the HubSpot App
To use the HubSpot App, you’ll first need to create a HubSpot account. Then, you can install and configure the App:
- Visit the HubSpot App detail page
- Click Add to site
- Choose the Webflow site you’d like to connect to the HubSpot App
- Review the requested scopes
- Click Authorize App
- Select your HubSpot account
- Click Choose account
- Click Connect App — this will redirect you to your Dashboard
Important
You cannot connect the HubSpot App to an entire Workspace. Please be sure to select the individual sites you wish to connect the App to when installing and authorizing the App.
Once you’ve successfully installed the App, you can launch it in the Designer:
- Open the Apps panel
- Hover over the HubSpot App
- Click Launch
Learn more about using Apps in the Designer.
HubSpot App features and functionality
The HubSpot App makes it possible for marketers and site owners to connect their Webflow site directly to HubSpot and includes five key pieces of functionality:
- Embed and style HubSpot forms in Webflow
- Connect your Webflow forms to HubSpot
- Add HubSpot assets to your Webflow site
- Manage site tracking
- Add a HubSpot chatbot to your Webflow site
The HubSpot App lets you embed any supported HubSpot forms on the Designer canvas so you can style your forms to match your site and design. To embed a form:
- Launch the HubSpot App
- Click Add existing HubSpot form to your page
- Select the element where you wish to embed the form on the canvas
- Choose the HubSpot form you wish to embed (if supported)
- Choose whether to inherit the form styling from HubSpot or use an unstyled version of the form
- Click Add Form to Page
- (Optional) Style the form however you like
Learn more about managing HubSpot forms.
Note
When you embed your HubSpot forms on your Webflow site, form submissions post directly to HubSpot (i.e., form submissions to embedded HubSpot forms bypass Webflow servers and are not processed by Webflow). Form submissions to HubSpot forms embedded on your site do not count toward form submission limits under your Site plan.
Important
Certain HubSpot form fields, such as reCAPTCHA fields, are not yet supported due to limitations of the HubSpot developer platform. If the App alerts you that it is unable to embed your form, or if you prefer to use an iframe, you can paste the form’s Share URL (available in HubSpot) into the HubSpot Share URL field in the App to embed the form as an iframe. While you won’t be able to style the iframe embedded form, this form will automatically reflect any changes made on the HubSpot side.
You can also connect existing Webflow forms to your HubSpot account using the HubSpot App. To connect an existing form:
- Launch the HubSpot App
- Click Map Webflow form to HubSpot form
- Select the form you wish to map from on the Webflow canvas
- Check to ensure the form you selected has form labels present
- Select the matching HubSpot form field for each corresponding Webflow form field
- Click Save
Note
When you connect your Webflow forms to HubSpot, form submissions post to Webflow first and then send a copy of the form submission data to HubSpot. Form submissions to Webflow forms connected to HubSpot count towards form submission limits under your Site plan.
Below is an overview of the compatible form field types across Webflow and HubSpot. For each Webflow form input type listed, you’ll find the corresponding HubSpot input types that ensure seamless data integration. Use this guide as a tool to streamline your form mapping process:
Webflow field type |
Corresponding HubSpot field type |
Plain (Text) |
- Single line text
- Multi-line text
- Paragraph
- Date (YYYY-MM-DD)
|
Email |
Single-line text |
Phone |
Single-line text |
Number |
- Number
- Single-line text
- Multi-line text
|
Radio button |
Radio |
Checkbox |
Single checkbox |
File upload |
File |
Text area |
Multi-line text |
Select |
Dropdown |
Note
The App does not support mapping to password fields in HubSpot.
You can update the connections or remove mapping from any form on the page by opening the App menu and selecting Connected forms.
Learn more about managing HubSpot forms.
Note
For the Webflow form to appear under Connected Webflow forms, you must view the page where the form is located. If you don’t find your form under Connected Webflow forms, make sure you’re on the right page in Webflow.
Add HubSpot assets to your Webflow site
The HubSpot App lets you view and add any assets from your HubSpot account to your Webflow site. To get started:
- Launch the HubSpot App
- Click Import HubSpot assets to your site
- Search and select the asset you which to import
- Select the element on your canvas into which you’d like to add the asset
- Click Add to page
Learn more about managing HubSpot assets.
Note
Assets added to your Webflow site from your HubSpot assets using the App are not added to the Webflow Assets panel.
Manage site tracking
The HubSpot tracking code is unique to each HubSpot account and allows HubSpot to monitor your website traffic. To manage site tracking:
- Launch the HubSpot App
- Click Manage site tracking
- Toggle Enable HubSpot site tracking code to On
- Click Save
In order to ensure tracking is active, you will need to publish your site.
Learn more about HubSpot’s tracking code.
Note
Once your HubSpot tracking code is enabled, HubSpot will automatically track all form submissions across your site (whether the form has been mapped to HubSpot or not), and will store them in a new form using the Webflow Form ID. If you don’t want this to happen, you can disable this functionality in your HubSpot account settings.
Add a HubSpot chatbot to your Webflow site
The App also provides step by step instructions for adding a HubSpot chatbot to your Webflow site using custom code.
To get started:
- Launch the HubSpot App
- Click Add a HubSpot chatbot to your site
- Click View HubSpot chatbot library to view and modify your library of HubSpot chatbots
- Ensure that your HubSpot tracking code is enabled
-
Publish your site
Learn more about setting up and configuring HubSpot chatbots.
How to uninstall the HubSpot App
There are two ways you can uninstall the HubSpot App from your Webflow site: from Site settings, or from the Designer.
To uninstall the App via Site Settings:
- Go to Site settings > Apps & Integrations tab > Connected Apps
- Find HubSpot
- Click View Details
- Click Uninstall App
To uninstall the App via the Designer:
- Open the Apps panel
- Click HubSpot
- Click Remove app
FAQ and troubleshooting tips
The HubSpot App is open, but nothing is loading.
Open Site settings > Apps & Integrations tab and check that the HubSpot App is listed as an installed app.If the HubSpot App is not listed, visit the HubSpot App detail page and reinstall the App on your site. If HubSpot is listed, open the Apps panel, launch the HubSpot App, and click Manage connections to view all of your HubSpot accounts connected to Webflow sites.
I embedded a HubSpot form using the App, but submissions aren’t coming through to HubSpot correctly.
Paste the form’s Share URL (available in HubSpot) into the HubSpot Share URL field in the App to embed the form as an iframe and see if the issue persists. If it does, please contact Webflow’s customer support team for further assistance.
I made changes to my HubSpot form, but they aren’t automatically updating on my Webflow site.
After making changes to your HubSpot form, you can launch the App in the Designer and replace the existing HubSpot form with the new one. If you need your changes instantly synced between HubSpot and Webflow, we recommend using the Share URL for your form to embed as an iframe.
I mapped my Webflow form to HubSpot using the App, but don’t see submissions.
Please ensure your Webflow form fields have field labels. If labels are present, please contact Webflow’s customer support team for further assistance.
How can I check which HubSpot accounts are connected to each Webflow site?
Open Site settings > Apps & Integrations tab and check that the HubSpot App is listed as an installed app. If the HubSpot App is not listed, visit the HubSpot App detail page and reinstall the App onto your site. If HubSpot is listed, open the Apps panel, launch the HubSpot App, and click Manage connections to view all of your HubSpot accounts connected to Webflow sites.
I embedded a HubSpot form using the App but certain fields or logic don’t carry over.
We recommend you either enter the Share URL for the form and embed it as an iframe using the App, or embed the form as a custom code embed element.
I added an asset from my HubSpot assets to my site, but the image isn’t showing up in my Webflow Assets panel.
Assets added to your Webflow site from your HubSpot assets using the App will not also be automatically added to your Webflow Assets panel.
If you’re still experiencing issues with the HubSpot App, please contact Webflow’s customer support team.