How do I add custom css to a form in Hubspot?

Develop, Build & Integrate CMS Development
3

Hi @CGattucio,

like it’s said in the KB - you can modify the embed code.

If you’re embedding it - you’re form get’s the styling from the page you’re embedding the form in. So if you want to change the styling you have to modify the CSS from the page, not HubSpot.

What I like/recommend to do is add

css:""

to the embed code.

It should look something like this:

Default embed code:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "6987863",
 formId: "8f88e5b6-98a4-4888-9543-86a5d46f024c",
 version: "V2_PRERELEASE"
 });
</script>

modified:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "6987863",
 formId: "8f88e5b6-98a4-4888-9543-86a5d46f024c",
 version: "V2_PRERELEASE",
 css:""
 });
</script>

By doing so it will grab the default input styling provided by the page CSS you’re embedding the form.

Note: You will need to apply your button class to your primary CSS and maybe some other HubSpot classes to get it 100% right

another solution could be to add

cssClass:"YOUR-FORM-CLASS"

to the embed code if you have a class added to all of your forms.

best,

Anton