How to Style Individual HubSpot Forms

[tim-sonin]

Hi there,

My knowledge of CSS is fairly basic. I'm embedding HubSpot forms across my company's website and using the "unstyled from" setting. I've worked out how to use CSS to then customise the style of these forms to match our brand.

But this is for all forms across the site. I need to be able to target specific types of form (PPC landing page forms for example) and change their colors. I've been told I might be able to do this with custom classes but can't find any documentation on this and HubSpot support pointed me here.

Let's say, for example, I want to change the form label color for forms on my PPC landing pages..

.hs-form label {
color: #FFFFFF;
font-weight: 400;
}

I guess this needs a custom class "ppc" but what do I need to put into my stylesheet and what do I need to change in the HubSpot form embed code?

Any help would be much appreciated, Tim.

[tim-sonin]

Found the problem earlier, I added a space between .hs-form and the .ppc class in the CSS line.

Thanks for your help, @Isaac_Takushi

[IsaacTakushi]

Hi @tim.sonin,

The inspector shows your styles have applied correctly:

Styles are applying.jpg809x873 134 KB

What do you mean by the form labels are "still white"? You're setting them to white with color: #FFFFFF. The font-weight: 400 is pulling through, but if it's still too thick, you could try 350.

[tim-sonin]

Hi @Isaac_Takushi unfortunately, that doesn't seem to be working.

In my additional CSS I've added the following:

.hs-form .ppc label {
color: #FFFFFF;
font-weight: 400;

}

And I've added a PPC class to my form:

<!--[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: '4464750',
	formId: '4a4928fd-35c2-44dd-a9fe-2e9234b96284',
	cssClass: 'ppc'
  });
</script>

The result is this: https://sonin.agency/app-development/surrey/ (scroll down to see form). The form labels are still white and look more 500 weight to me.

Am I missing something obvious?

Kind regards,

Tim.

[IsaacTakushi · Accepted solution]

Hi @tim.sonin,

Happy to help.

You can add custom CSS classes to specific embedded forms by defining the cssClass attribute to the embed code, as outlined here.

If you added cssClass: 'ppc' to the desired forms' embed codes, you could select the labels in these forms with the descendant selector:

.hs-form.ppc label {
     color: #FFFFFF;
     font-weight: 400;
}