topic How to add CSS to Form? in CMS Development

How to add CSS to Form?

manuelmdn — Thu, 17 May 2018 04:38:25 GMT

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?

Re: How to add CSS to Form?

Jsum — Thu, 17 May 2018 12:30:22 GMT

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?

Re: How to add CSS to Form?

aniek_2 — Thu, 17 May 2018 13:08:29 GMT

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

Re: How to add CSS to Form?

manuelmdn — Fri, 18 May 2018 18:54:21 GMT

Thank you so much! ,

Re: How to add CSS to Form?

MWang9 — Wed, 12 Apr 2023 17:53:27 GMT

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.