Send Framer Forms to HubSpot

Routing Framer forms to HubSpot can be a pain. There are three reliable ways to connect HubSpot with your Framer site, depending on how much control you need over design and data flow.

1. Embed a HubSpot Form (easiest, least flexible)

This is the simplest method. You use HubSpot’s native form and drop it into Framer.

Steps

1. In HubSpot:
   ‍
   • Go to Marketing → Forms
   • Create or select a form
   • Click Embed
   • Copy the embed code
2. In Framer:
   ‍
   • Add an Embed component
   • Paste the HubSpot code

Limitations

• You cannot customize styling at all.
• You have to design the form with HubSpot which is extremely limited compared to Framer forms.
• You cannot set custom states such as redirects or thank you messages upon submitting the form.

HubSpot's official plugin for Framer works exactly the same as embedding, there's no control over anything.

2. Using Framer Forms Connect plugin

With a few steps you can design your form in Framer, but submissions go directly to HubSpot via the plugin.

Steps

1. Install Framer Forms Connect plugin
2. Open plugin → log into HubSpot
3. Select your form
4. In Framer:
   • Build your form. All Framer functionality is supported by the plugin.
   • Ensure field names match in both Framer and HubSpot (email → email, name → firstname, etc.)

What you get

• Fully custom UI
• Security: unlike some alternative solutions Framer Forms connect does not store your submissions and does not expose your API key.
• No need for third-party services. No need for Zapier or Make. All work is being done within Framer.

3. Framer Forms Connect (without logging in)

This is for cases where:

• Client doesn’t want to grant access
• You’re working across accounts
• Security policy forbids authenticating into an external services

Instead of logging in, you connect manually with a few extra steps.

What you need from HubSpot

1. In HubSpot:
   ‍
   • Go to Marketing → Forms
   • Create or select a form
   • Click Embed
   • Copy the embed code
2. In Framer:
   ‍
   • Go to Framer Forms Connect
   • Click onto "Don't have the login details? Configure manualy"
   • Paste the HubSpot code
   • Follow the video instructions within the plugin

What you get

• Same result as login method
• No need to authenticate
• Works in restricted environments

‍

Framer Forms Connect is the fastest, most secure way to connect Framer to popular CRMs and newsletters.

🚀  Start collecting submissions today with zero technical headaches.