CMS Development

CGattucio
Member

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

SOLVE

Hello, 

I wanted to see if using custom CSS in Hubspot forms is possible. I found the following instructions for this: https://knowledge.hubspot.com/de/forms/how-do-i-style-my-embedded-form.

 

I have the form set to "Set as raw HTML form" but don't understand how to apply custom CSS when the HTML from the HubSpot form does not render on the back-end of our server. 

0 Upvotes
2 Accepted solutions
webdew
Solution
Guide | Diamond Partner
Guide | Diamond Partner

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

SOLVE

Hey @CGattucio ,

 

If your site is hosted on HubSpot, You can add custom CSS to a form in the advance options of the page setting where the form is added; there is a section to add codes to the HTML. Custom CSS applied in the page’s advance settings will apply to the form also;  Check this article for further clarification:

https://knowledge.hubspot.com/website-pages/create-and-customize-pages#:~:text=To%20add%20code%20sni....

If the site is not hosted on HubSpot, you can do it through the form settings itself. Check this article for further clarification: https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with...

View solution in original post

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature

View solution in original post

0 Upvotes
2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
webdew
Solution
Guide | Diamond Partner
Guide | Diamond Partner

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

SOLVE

Hey @CGattucio ,

 

If your site is hosted on HubSpot, You can add custom CSS to a form in the advance options of the page setting where the form is added; there is a section to add codes to the HTML. Custom CSS applied in the page’s advance settings will apply to the form also;  Check this article for further clarification:

https://knowledge.hubspot.com/website-pages/create-and-customize-pages#:~:text=To%20add%20code%20sni....

If the site is not hosted on HubSpot, you can do it through the form settings itself. Check this article for further clarification: https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with...

0 Upvotes