# How to add CSS to Form?

**URL:** <https://community.hubspot.com/t/how-to-add-css-to-form/8880>\
**Category:** CMS Development\
**Created:** [May 17, 2018, 4:38am UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880 "2018-05-17T04:38:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![manuelmdn](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manuelmdn/32/61905_2.png) [@manuelmdn](https://community.hubspot.com/u/manuelmdn)\
**Post date:** [May 17, 2018, 4:38am UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880/1 "2018-05-17T04:38:25Z")

</div>

Hi, how to overwrite the css on my form?, I followed the tutorials but not working, this is my code

```auto
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Test</title>
 <style>
 .hs-form input[type="text"] {
 background: #FFF222 !important;
 }

 .hs-button-reset,
 .hs-form .hs-button {
 background: #FFF222;
 border: none;
 font-family: Helvetica, Arial, sans-serif;
 line-height: 1;
 margin: 0;
 outline: 0;
 padding: 0;

 }

 </style>
</head>
<body>

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
 hbspt.forms.create({
	portalId: "4566994",
	formId: "c0179cbd-fd03-4d55-a416-b85e189cbe4d",
 css:""
});
</script>

</body>
</html>

```

I follow [this article](https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-remove-the-default-styling-from-hubspot-forms) but not showing the checkbox _Include default styling._

I’m doing something wrong?

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [May 17, 2018, 12:30pm UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880/2 "2018-05-17T12:30:22Z")

</div>

I checked the forms on my portal. When you go to contacts → forms in your Hubspot portal, then click ‘action’ next to a form and choose ‘embed form’ a popup appears with the embed code. below the code is the check box.

are you using embeds on an external site or a hubspot hosted site?

---

<div class="post-metadata">

**Author:** ![aniek\_2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aniek_2/32/31184_2.png) [@aniek\_2](https://community.hubspot.com/u/aniek_2)\
**Post date:** [May 17, 2018, 1:05pm UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880/3 "2018-05-17T13:05:50Z")

</div>

Indeed go to the form \> actions \> embed code and add the lines from the example as well if they are not there:

```auto
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({
	portalId: "#",
	formId: "#",
 submitButtonClass: '#',
 css: ' ',
 cssClass: '#',
});
</script>

```

Portal and form Id are already filled in.

SubmitButtonClass: add the class of the button

css: ‘’ makes sure that the default css is disabled

cssClass: add 1 class (2 won’t work is my experience, but if you succeed please let me know).

---

<div class="post-metadata">

**Author:** ![manuelmdn](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manuelmdn/32/61905_2.png) [@manuelmdn](https://community.hubspot.com/u/manuelmdn)\
**Post date:** [May 18, 2018, 6:54pm UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880/4 "2018-05-18T18:54:21Z")

</div>

Thank you so much!  
 ![16x16_heart.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/8/86306cc0513e44cacfdfc32c1e9003902220911e.png)  
,

---

<div class="post-metadata">

**Author:** ![MWang9](https://avatars.discourse-cdn.com/v4/letter/m/5f9b8f/32.png) [@MWang9](https://community.hubspot.com/u/MWang9)\
**Post date:** [April 12, 2023, 5:53pm UTC](https://community.hubspot.com/t/how-to-add-css-to-form/8880/5 "2023-04-12T17:53:27Z")

</div>

I am having issue that it’s show  
“[]Unsupported context key: className”  
I am passing down className as a prop into

`cssClass`

as there are a few forms sharing the same script with different styling and form Id  
Do you know what may cause the issue?  
Thank you.
