How to integrate Webflow with HubSpot for your business

How to integrate Webflow with HubSpot for your business
Webflow Development
Apr 10, 2023
Veer Manhas
Founder and Creative Director

This blog provides information on integrating HubSpot and Webflow. It includes four main methods for integration: direct integration through Webflow enterprise, using a No Code integration platform such as Integromat or Zapier, or embedding a HubSpot form directly into Webflow. Additionally, using the Action URL with the HubSpot API allows for designing forms with Webflow and setting up functionality with JavaScript.

Let’s get into it!

Integrate Webflow Enterprise with HubSpot

Best for companies requiring enterprise-level security and scale - The direct integration removes any dependencies between Webflow forms and HubSpot.

This is a direct integration of Webflow forms with HubSpot, but it requires you to be on Webflow Enterprise.

To integrate Webflow Enterprise with HubSpot, follow the instructions on the Webflow University HubSpot Integration page.

Webflow Enterprise gives your teams advanced collaboration workflows and enterprise-grade security and scalability.

You can contact us, and we’ll set you up for Webflow Enterprise.

With No-Code Automation

Best for startups, entrepreneurs, and mid-size companies leveraging No Code. Also keep in mind each, most no code tools charge based on number of automations executed and if you have a large scale, do consider Webflow enterprise or investing into a backend system. Webflow Enterprise is fully managed and would not require additional resources and on the other hand setting up a backend for your integration would require additional running costs, people management and server management.

Use an integration platform like Zapier or Make to integrate HubSpot and Webflow without coding.

With Zapier

Zapier is a plug-and-play No Code integration system. With Webflow to HubSpot Integration, you would create workflows or Zaps(as they call them) and directly map your forms to HubSpot with relevant information. Here’s the link to learn more about it.

With Make

With Make, you can create the most complex ones, but it requires a more nuanced setup, and the cost to set up is more if you hire a freelancer or an agency.

With HubSpot form embedded with HubSpot form styler

If you are fine with HubSpot form designs, this is the best way for you. Create a form and add it Webflow embed. Simple!

To embed a HubSpot form directly into Webflow, it is necessary to style it with HubSpot’s styler. Although this method retains form functionality, you can only style with options provided by the HubSpot global form colors and fonts.

With HubSpot form embedded with custom CSS

Best for companies looking to style their HubSpot forms to match the branding on their website and provide a professional experience.

You can also style the HubSpot form with custom CSS using the same embed that would be used to add the HubSpot form in Webflow. Although this method retains form functionality, it requires styling for each element and state, which can be tedious for someone who doesn’t know CSS well.

Note: If you have a Marketing Hub or CMS Hub Professional or Enterprise subscription with your HubSpot account, only then can you change the form to RAW forms to add custom CSS.

For both options above, you can find how to do it on the HubSpot knowledge base: Set up and style a HubSpot form on an external site.

With Webflow forms using HubSpot API

Most complex setup to setup since it requires most things to be rebuilt unless you are using a backend system, even then you would have to put resources to manage it.

This method is ideal for Webflow forms designed to set up all functionality with JavaScript. You can send data directly to HubSpot with a client-side(front-end) API using the Action URL with the HubSpot API.

Now this one is a little complex, and based on your requirements, you should choose it if it fits the bill. This option requires to setup custom validations for the fields and mapping them correctly.

There are two ways to do it: Via frontend API and backend API.

The limitation of frontend API being it can only take 50 requests for 10 seconds.

The backend API requires a backend system to be set up with HubSpot App and is only suggested if it has to do something very complex and at scale. Also, it has been in beta for some time, so not sure if you should use it for production sites. Otherwise, you can always go with the No Code way.

Parting notes

The most favorite options are:

  • Webflow Enterprise: Direct integration, no maintenance, comes with Enterprise security, scale, and pricing.
  • No Code: If you have already adopted No Code, then this is the way to ensure you know how many leads you will have to guesstimate costs.
  • If you have a Marketing Hub or CMS Hub Professional or Enterprise subscription with your HubSpot account, you can directly style the raw forms and embed them into Webflow.

I hope this blog will allow you to decide on which way to work to integrate Webflow forms with HubSpot. Feel free to reach out. We help with all the options.

Subscribe to our blogs
be a part of the community
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Connect with ease

Your inquiries, ideas, and collaboration opportunities are just a click away. Let's start the conversation.