How to add CSS to Form?

manuelmdn · ‎May 17, 2018

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

<!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 but not showing the checkbox Include default styling.

I'm doing something wrong?

aniek_2 · ‎May 17, 2018

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

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

View solution in original post

aniek_2 · ‎May 17, 2018

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

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

MWang9 · ‎Apr 12, 2023

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.

manuelmdn · ‎May 18, 2018

Thank you so much! ,

Jsum · ‎May 17, 2018

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?

CMS Development