Badge Webflow Award Winner 2023

How to integrate HubSpot with Webflow - using Webflow Apps

Published on 
30/8/2023
-
Amended on 
31/8/2023
Reading time: 5 min
Webflow and Hubspot logo with arrow representing integration from Webflow
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

Find out how to connect your HubSpot account to your Webflow site in just a few clicks with this step-by-step tutorial for successful integration with Webflow Apps.

Key points to remember

Introduction

Until recently, integrating HubSpot into your Webflow site required either the use of a third-party automation tool like Zapier or Make, or a trick with custom code.

Fortunately, all that has changed.

→ You can now carry out this integration on your CMS in just a few clicks, directly from the Webflow Designer interface, thanks to the"Apps" tab.

And in this tutorial, we'll show you how, step by step.

Webflow and HubSpot: Possible integrations

  • Add a HubSpot form directly to your page
  • Connect your Webflow forms to HubSpot
  • Incorporate HubSpot assets into your Webflow site
  • Integrating HubSpot chatbots
  • Enable site tracking
Connecting Webflow to Hubspot
Just. Like. That. 🪄

Integration in 3 easy steps

Webflow Apps makes integration child's play:

  1. Install the App on the Webflow site or workspace of your choice.
  2. Connect the App to the desired HubSpot account.
  3. Once back in the Webflow Designer, launch the HubSpot App from the "Apps" panel and start integrating!

Example: Integrating and customizing a HubSpot form with Webflow Apps

When using HubSpot as a CRM, you may be tempted to use their integrated forms as well. However, these forms are often limited in terms of visual customization, which can result in a mismatch with the overall design of your Webflow site.

But with Webflow's new Apps feature, it's now possible to combine the best of both tools: HubSpot 's centralized lead management and Webflow's design flexibility. So now you can :

→ Integrate a HubSpot form into your Webflow site and fully customize it using Webflow's CSS styling options.

💡 How do I do it?

1 - Create your form in HubSpot: Start by creating the form you want to use in the HubSpot interface.

1/3

2 - Access the HubSpot App in Webflow: Open your Webflow project and go to the "Apps" panel. Select the HubSpot App.

HubSpot application on Webflow Apps
2/3

3 - Integrate and customize: Once the App is open, choose the HubSpot form you wish to integrate. You can then customize it like any other element in Webflow, using the CSS style options.

HubSpot form customizable with CSS classes in Webflow
3/3
Webflow + HubSpot = Superpower 💪

The benefits

  • Quick integration: add a HubSpot form to your Webflow site in just a few clicks.
  • Design consistency: Your HubSpot form can now be seamlessly integrated into the design of your Webflow site.
  • Efficient lead management: Continue to benefit from HubSpot's robust lead tracking and management features.

And this HubSpot form integration is just one example. Webflow's new Apps functionality opens up a whole new world of possibilities.

Because with this Webflow Apps update, we can expect to see many more innovative integrations in the coming weeks, revolutionizing the way we've used Webflow up to now. So stay tuned by subscribing to our YouTube channel, because the best is yet to come!

_____

Find out more about all the plugins available on Webflow?

Discover all the tools available on the Webflow Apps Store

Watch the Webflow Apps Store introductory video

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop