Framer

Framer is an AI-powered website builder with high-fidelity prototyping and interactive design.

Website

framer.com

Industry

Website

Share this article:

How to activate Hubspot plugin into Framer

How it works

First open your Framer project and click on the "plugins" button at the top left
Next search "Hubspot" in the search bar
Click the "Log in" button to sign in to your account
Then click the "Connect app" button to authorize HubSpot integration
To create a form, click on the "Create form" button in the HubSpot Forms dashboard
Complete all the required settings and click on "Update" to save and publish your form
After publishing, copy the embed code of your form
You can now start using HubSpot. Select the component you'd like to add to your project, such as a form
Click on form to add it to your canvas
In the right sidebar, find the "Portal ID" and "Form ID" under Hubspot form section. Paste the embed code if empty; otherwise, it's already connected
Place the form in your desired section within your project
Next preview your Framer project to confirm it works
Fill in the form fields and click "Submit" to confirm that submissions are being captured
Go to your HubSpot account, and you'll see that the data submitted through the form has been recorded successfully

Create your own interactive guide with Guideflow

Why should you use this feature?

Framer is a dynamic platform designed to empower designers and developers with intuitive prototyping tools.

Integrating the HubSpot plugin into Framer enhances your marketing and design synergy effortlessly. By activating this feature, you enable seamless data flow and enriched user experiences without breaking your design flow.

This integration allows you to leverage HubSpot's robust marketing tools directly from your design workspace, optimizing efficiency and collaboration.

As a result, teams can design with actionable insights in mind, fostering smarter decision-making and greater project success.

Last update

December 19, 2025

Tutorials