Custom styled HubSpot form in Framer
Jan 20, 2025
If you have a website built in Framer and want to use HubSpot forms, you have two main options to embed the form: via the standard embed component or with a webhook in Make.com or Zapier.
Option 1: Standard HubSpot embed
When you've created a form in HubSpot, you get an embed code.
If you want to make life easy for yourself, you can simply grab this embed code and paste it into Framer following these steps:
Go to your HubSpot form overview. On the form you want to embed, click Actions > Share > Embed code
Go to Framer, click on Insert > Forms > HubSpot and drag the HubSpot form embed component into the page where you want it
Paste in the portal ID and form ID. You can find both of them in the embed code from step 1
This will give you something that looks like this:
Option 2: Custom Framer form with webhook
However, if you ask me this doesn't look great…
In Framer you can natively build very nice forms with full control over all design elements.
However, you can't natively sync the form submissions to a CRM of your choice (yet). This requires some extra work.
The best way I have found to achieve this is to connect Framer and HubSpot via a webhook, synced via the Make.com automation platform. Zapier is another option but you need to pay to use webhooks. Make.com is free for this use case.
Log into Make.com and create a new scenario. In the scenario editor, search for and select the "Webhooks" module and choose "Custom Webhook". Click "Add", and give your webhook a name. Make.com will generate a webhook URL. Copy this URL.
Go to your form in Framer and click Send to > Webhook. Here paste in the webhook URL you just copied from Make.com
Go back to Make.com and click "Run Once" in Make.com to activate the webhook listener.
Submit a test form from your Framer website. In Make.com, you should see the data from the form submission.
After the webhook module, search for and add the "HubSpot" module in the scenario. Choose the desired HubSpot action, in my case it's "Create a Contact". Follow the prompts to log in to your HubSpot account and authorize the connection.
Map the fields from the webhook (e.g., name, email) to the corresponding HubSpot fields.
Finally, click "Run Once" in Make.com and submit the form again from Framer. Verify that the data appears correctly in HubSpot. If all good, you can turn on the scenario by clicking "Activate". Make sure it's set to run "immediately as data arrives". This ensures that form submissions in Framer are automatically sent to HubSpot.
This will give you something that looks like this:
Much better!
With this setup we get a custom styled Framer form where each submission automatically creates a new contact in HubSpot. And we did this without paying for anything or writing a line of code. Nice!
I figured all of this out by tinkering and mainly chatting with ChatGPT. So if you face any issues I'd suggest giving that a try. If you have issues, feel free to reach out to me and I'll be happy to help :)