# HubSpot Form Classes Not Working

**URL:** <https://community.hubspot.com/t/hubspot-form-classes-not-working/10781>\
**Category:** CMS Development\
**Created:** [October 31, 2018, 2:34pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781 "2018-10-31T14:34:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tim-sonin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tim-sonin/32/68963_2.png) [@tim-sonin](https://community.hubspot.com/u/tim-sonin)\
**Post date:** [October 31, 2018, 2:34pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781/1 "2018-10-31T14:34:51Z")

</div>

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:

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

```

And I’ve added a PPC class to my form in the script bit:

```auto
 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](https://sonin.agency/app-development/surrey/) (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.

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [October 31, 2018, 4:02pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781/2 "2018-10-31T16:02:44Z")

</div>

Hi Tim,

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

 ![ppc-class.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/6/7682450d7acad0207419ac46be12ecb96b5fbd73.png)

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

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

```

Making that change to your CSS should work.

I hope that helps!

* * *

[![|300](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e6ddb445b684524bbcbd802044a9ca3919d1fbc7.png)](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)HubSpot Design / Development

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

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

---

<div class="post-metadata">

**Author:** ![tim-sonin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tim-sonin/32/68963_2.png) [@tim-sonin](https://community.hubspot.com/u/tim-sonin)\
**Post date:** [October 31, 2018, 4:05pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781/3 "2018-10-31T16:05:36Z")

</div>

Brilliant, thanks so much, Stephanie!

---

<div class="post-metadata">

**Author:** ![lydia\_gregory](https://avatars.discourse-cdn.com/v4/letter/l/34f0e0/32.png) [@lydia\_gregory](https://community.hubspot.com/u/lydia_gregory)\
**Post date:** [July 5, 2023, 7:44pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781/4 "2023-07-05T19:44:19Z")

</div>

Hi Stephanie,

Is this approach still valid? I found it in the [documentation](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options#:~:text=of%20your%20form.-,cssClass,-String) 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](https://codepen.io/Lydia_gregory/pen/dyQzeqY) example that demonstrates the issue.

Thank you in advance,

Lydia

---

<div class="post-metadata">

**Author:** ![lydia\_gregory](https://avatars.discourse-cdn.com/v4/letter/l/34f0e0/32.png) [@lydia\_gregory](https://community.hubspot.com/u/lydia_gregory)\
**Post date:** [July 6, 2023, 1:47pm UTC](https://community.hubspot.com/t/hubspot-form-classes-not-working/10781/5 "2023-07-06T13:47:12Z")

</div>

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.