Install and use the HubSpot App

Add forms to your site that connect to HubSpot.

The HubSpot app gives you three flexible ways to connect forms between Webflow and HubSpot. You can embed HubSpot forms with an iframe or embed fully stylable HubSpot forms using developer embed — which leverages the latest HubSpot Form Editor and allows you to style HubSpot forms directly in Webflow. You can also connect native Webflow form elements to HubSpot seamlessly with this app.

Compare connection options

iframe

HubSpot forms embedded in an iframe are managed entirely in HubSpot. All you need to do is embed the form and publish it to your site. If you make any styling or structural changes to the form in HubSpot, the saved changes are automatically applied to the form on your live site (i.e., you don’t need to republish your site).

Developer embed

Developer embed requires a HubSpot Marketing Professional or HubSpot Enterprise plan, but unlocks the most options in Webflow. An HTML template of the form is rendered in Webflow, letting you style the elements like you would any Webflow element. Use the app to switch between different form states (e.g., error states or success state). The HubSpot form will load on your published site, but inherit your Webflow styling — giving you full control over the look and feel without losing key HubSpot functionality.

Webflow form

The app maps Webflow form elements to HubSpot, using the non-HubSpot forms script, enabling form submissions to go directly to HubSpot. You can style and structure these form elements like any Webflow element.

• You must enable “non-HubSpot forms” in HubSpot to leverage this option
• Only text input fields are supported (i.e., not dropdowns, radio buttons, checkboxes, text areas, etc.)

How to install the app

To install the app on a Webflow site, you’ll need Site Admin or Designer permissions, and a HubSpot account with access to the forms you want to embed.

1. Go to the HubSpot App details page
2. Click Install App
3. Choose the Webflow site you want to connect
4. Click Authorize App
5. Choose your HubSpot account
6. Click Connect app

How to launch the app

1. Open the Apps panel
2. Hover over HubSpot App and click Launch

How to embed a HubSpot form

1. Launch the HubSpot App
2. Select the element you want to embed the form into
3. Click + HubSpot form
4. Choose a HubSpot form
5. Click Developer embed or iframe
6. For developer embed forms:
   • Select individual form elements and use the Style panel to style them
   • Choose different states (e.g., error, success, dropdowns) in the app to reveal and style each state
7. Publish to staging and confirm the form displays and functions as expected
   • Verify that styles appear correctly
   • Verify that submissions are received in HubSpot
8. Publish to production when ready

How to connect a Webflow form

This leverages non-HubSpot forms script, which looks at any static form on your site and as long as the name attributes match to HubSpot form name attributes, the form field submissions can be mapped directly to HubSpot.

1. Launch the HubSpot App
2. Select the element you want to embed the form into
3. Click + Webflow form
4. Name the form
5. Select the form fields to add
6. Click Add form to page
7. Use the Style panel to style the form
8. Publish to staging to test that form submissions are received in HubSpot
9. Publish to production when ready

How to refresh a developer embed HubSpot form

Any time you change a developer embed form’s structure in HubSpot, you’ll need to refresh the embedded form in Webflow to re-sync the structure and styles.

1. Launch the HubSpot App
2. Go to the site page with the embedded form
3. Select the form inside the HubSpot App
4. Click Pull Layout at the bottom
5. Check all form states and restyle as needed to ensure proper styling
6. Publish your site to apply the changes

How to enable the HubSpot tracking script

1. Launch the HubSpot App
2. Click the Settings tab
3. Toggle Track user activity on site to On

How to enable the HubSpot Chatbot

1. Launch the HubSpot App
2. Click the Settings tab
3. Toggle Add a HubSpot Chatbot to On

FAQs

What’s the difference between this HubSpot app and the legacy HubSpot app?

This is our latest version of the app and it supports HubSpot’s new Form Editor and developer embed, which allows you to style HubSpot forms directly in Webflow. You can also sync changes from HubSpot to your embedded forms in Webflow and enable reCAPTCHA.

Why don’t my published form styles match the designer styles?

The most common reason is a form structure change in HubSpot that breaks style inheritance. If the app detects invalid modifications (outside of the Style panel), the embedded form reverts to an iframe to protect form submissions.

To fix the form:

1. Refresh the form in Webflow
2. If refreshing doesn't work, delete the embedded form in the Navigator and add it again

Why can’t I embed a developer embed form?

Developer embed forms require a HubSpot Marketing Professional or Enterprise plan.

If you don’t have one, you can:

• Embed the HubSpot form using the iframe option
• Use the Webflow form option to add and connect a Webflow form to HubSpot

Can I change the HTML structure of a HubSpot form in Webflow?

No. The HTML is generated based on the HubSpot form. If you need to change the structure, update the form in HubSpot and refresh it in Webflow.

You can click Update form at the bottom of the HubSpot app to launch the form in HubSpot and make your changes.

Can I add a form built with the legacy HubSpot Form Editor?

No. The app only supports forms created with the new HubSpot Form Editor. However, you can still access the legacy app using these steps to manage and build legacy HubSpot form editor forms:

1. Launch the HubSpot app
2. Click the Settings icon
3. Click Install legacy app
4. Choose your Webflow site and complete the authorization flow

Learn how to use the legacy HubSpot app.