HubSpot Form Classes Not Working

Develop, Build & Integrate CMS Development
1

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. Color to white and font weight to 400.

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 in the script bit:

 hbspt.forms.create({
	portalId: '4464750',
	formId: '4a4928fd-35c2-44dd-a9fe-2e9234b96284',
	cssClass: 'ppc'

The result is this: App Development in Surrey - Leading App Developers | Sonin (scroll down to see form). The form labels are still white and look more 500 weight to me rather than 400.

Am I missing something obvious?

Kind regards,

Tim.

2

Hi Tim,

The “ppc” class is being successfully added to your form:

ppc-class.png
ppc-class.png1302×343 74.2 KB

However, because .hs-form and .ppc are on the same element, you need to join them like this:

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

Making that change to your CSS should work.

I hope that helps!

|300HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

3

Brilliant, thanks so much, Stephanie!

4

Hi Stephanie,

Is this approach still valid? I found it in the documentation but, while I’m having the same issue described by Tim, the cssClass is not being added properly to the form element like you demonstrated above. Please see this CodePen example that demonstrates the issue.

Thank you in advance,

Lydia

5

We’d like to make this change because the color contrast on Hubspot inputs between the border and background as well as the input background and placeholder text is currently inaccessible.