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

[CGattucio]

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. 

[webdew · Accepted solution]

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

[JohnInDallas]

So, from everything here, what i'm seeing is the only way to apply custom css is to use the embed code. 

To be clear - there are no advanced options in the form builder that isn't embed related - to add css. Correct?

things like the size of the fields (they're huge right?) and some background behavior would be nice to tweak. 

lastly - is there a way to create a "work theme" that applies company colors and the logo and stuff when we access a template or create a template for say a landing page? 

[MFenton]

I started hand coding years ago.  You can do some much more being able to hand code than use something pre-done like in HubSpot.  The CSS options within HubSpot are limited for controlling the layout of a form.  So I built a very simple opt-in form on my external site using HTML and styled it with CSS.  To get the form data to pass to HubSpot, I added the HubSpot tracking code to the header and it sees when someone fills out the form and captures the data.  That part is really cool.  Then, the action part of the form sends the user to the confirmation page after they submit the form.  I needed a field with a default value to pass through but not be shown on the form.  HubSpot doesn't collect data from hidden fields so I created a text field with a default value, I put the text field in a div, used css to set the div height to 0px and I now have a text field on the form that will pass the default data to HubSpot, but the field is hidden so the user doesn't see it.

[Anton · Accepted solution]

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

[webdew · Accepted solution]

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