Custom styled HubSpot form in Framer

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:

1. Go to your HubSpot form overview. On the form you want to embed, click Actions > Share > Embed code

2. Go to Framer, click on Insert > Forms > HubSpot and drag the HubSpot form embed component into the page where you want it

3. 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.

1. Create your form in HubSpot with all the fields you want to have

2. Create a form in Framer styled as you wish with the same fields as in your HubSpot form

3. Create a free Make account

4. Open Make and create a new scenario. Select: Custom webhook > Create webhook > Copy webhook address

5. Head back to Framer, select your form and click on send to webhook. Paste in the address you copied.

6. Save scenario in Make and set it to run “immediately as data arrives”. Click “Run once”.

7. Publish your Framer website / changes and make a form submission. You should see the data being submitted in Make.

8. In Make, click on creating another module and select the HubSpot option “Submit data to a form”. From there connect your HubSpot account and enter the Form ID and Portal ID. You can find these in the HubSpot embed code when you click on sharing your form.

9. Then simply match the data entries (from the form submission in step) to the HubSpot form fields as shown in the image below.

   
   

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 :)