Build a fully customizable HubSpot form in Framer

HubSpot is a great CRM tool. Their form builder is good but the styling options are super limited.

So simply embedding a HubSpot form on a Framer website looks like this:

But if you take a few more steps, you can have a setup where the form is fully customizable in Framer.

This is how I build fully customizable forms in Framer and integrate them with HubSpot.

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.

And that's it, now you have a fully customizable form in Framer. When a user fills in the form, the data is sent to HubSPot via Make.

In Framer you can also send an email confirmation to any email you want for each form submission or add it to a spreadsheet as a backup.