How to embed a HubSpot form on your website

In this video, we'll show you how to embed HubSpot form on your own website so you can do something like this here I've made a registration page for an upcoming webinar and the form you see on the right is actually a HubSpot form.

But if you need to embed a different type of lead generation form.

For example, if you're running a partner program or if you're collecting product signups, the process will be exactly the same.

So here is our form on HubSpot, and the first thing we'll do is change a bit the styles, because as you can see, HubSpot applies some default styles for font and colors, and it may not match the styles of your website.

So it's very easy to change that.

We need to go in the styling section and from there we can customize the different elements.

For example, we can change the font of the input, we can make the text black, the borders gray, and the background white.

We can also change the font of the main CTA and use our brand color and also use rounded corners.

So now the form looks completely different.

Before we can embed the form on the website, we need to publish it.

So let's click on review and update and then update.

Once it's published, we need to click on get embed code and HubSpot gives us the code to add to our website, so let's just copy it.

Since my website is hosted on Framer, I will show you how to do it on that platform.

But if you're using Webflow or WordPress, the steps are very similar.

In the end, what we need to do is add the code HubSpot provided to us on the page.

So to do that on Framer, we need to go in insert and then utility, drag and drop that embed widget at the right place.

Then we can go in the embed section and make sure the type is set to HTML.

And here we can add the code we copied from HubSpot, we can adjust the size of the element, and there you go.

We have our form on the page.

So now let's check the form is working properly.

So let's fill out the form and see if a new contact is created on HubSpot with all the correct info.

So I need to give my website.

Let's submit the form.

And now let's check on HubSpot in the contact section.

And voila.

We have the new contact with all the info that went through the form.