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

[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

[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? 

[Anton · Accepted solution]

Hi @JohnInDallas, 

if you want to modify the look in feel in general you can do this via any CSS inside HubSpot that is getting loaded on every page - by default it should be either a single CSS file that is included in the main.css or the theme-overrides.css. 

If you like to override the default style on an external page, you can inspect the embeded form via the browsers developer tools and add all of your styling to the external page CSS. The only downside of this approach is that Hubspot still might override some styles. Therefore it's recommended to disable the default styling by modifing the embed-code as described above.

edit:

If you're building things inside HubSpot - every good theme should come with form settings inside the theme settings. You can find the theme settings here:

gear-icon (top right) -> Content -> Themes -> NAME OF YOUR THEME

It depends on how the theme was created but every developer/theme provider has the option to add form stylings(and almost every aspect of the theme) to the theme settings.

best, 

Anton

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