# CSS to remove \* for form required field not working

**URL:** <https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685>\
**Category:** Lead Capture Tools\
**Tags:** css, forms\
**Created:** [February 10, 2020, 8:04pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685 "2020-02-10T20:04:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nnikolas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nnikolas/32/2490_2.png) [@nnikolas](https://community.hubspot.com/u/nnikolas)\
**Post date:** [February 10, 2020, 8:04pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/1 "2020-02-10T20:04:18Z")

</div>

I have a Hubspot form (with required fields) embedded on a webpage. I use Thrive Architect to build my pages (not sure if that matters). When I add the Hubspot form everything works. When I try to add the recommended CSS to remove the asterisks, the form just completely disappears.

```auto
.hs-form-required {
 display: none;
}

```

What could be going wrong? Any other workarounds?

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [February 10, 2020, 8:31pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/2 "2020-02-10T20:31:40Z")

</div>

Hi @nnikolas,

Can you DM me the URL?

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [February 10, 2020, 9:19pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/3 "2020-02-10T21:19:21Z")

</div>

Hi @nnikolas,

It appears you are on the right track and your solution SHOULD fix it. You may want to try and add !important before the semicolon.

```auto
.hs-form-required {
 color: red;
 display: none !important;
}

```

If it doesn’t work, wherever that reference is there is likely another CSS reference loading after it. You’ll want to find that and remove.

Give me a shout if you are still stuck after this.

Josh

---

<div class="post-metadata">

**Author:** ![nnikolas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nnikolas/32/2490_2.png) [@nnikolas](https://community.hubspot.com/u/nnikolas)\
**Post date:** [February 10, 2020, 9:38pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/4 "2020-02-10T21:38:11Z")

</div>

@Josh

Hmmm… it’s still disappearing.

I screen recorded what’s happening so you can see: [https://imgur.com/a/nXcvQmU](https://imgur.com/a/nXcvQmU)

You can see I have the CSS code you recommended, and when I go to apply it to the element it just… disappears.

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [February 10, 2020, 9:41pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/5 "2020-02-10T21:41:37Z")

</div>

Hi @nnikolas,

Question: does your CSS class exist without you placing it into the HTML element or is that what adds it?

---

<div class="post-metadata">

**Author:** ![nnikolas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nnikolas/32/2490_2.png) [@nnikolas](https://community.hubspot.com/u/nnikolas)\
**Post date:** [February 10, 2020, 9:44pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/6 "2020-02-10T21:44:52Z")

</div>

@Josh

I have to add it to the HTML attributes to “turn it on”

---

<div class="post-metadata">

**Author:** ![nnikolas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nnikolas/32/2490_2.png) [@nnikolas](https://community.hubspot.com/u/nnikolas)\
**Post date:** [February 12, 2020, 3:13pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/7 "2020-02-12T15:13:14Z")

</div>

@Josh

Do you have any other ideas?

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [February 12, 2020, 4:01pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/8 "2020-02-12T16:01:53Z")

</div>

Hi @nnikolas,

In theory, what you are doing should work.

A couple of other ideas:

In WordPress, go to the Customize section and there should be a spot to add custom CSS there. Try adding the above CSS reference to that after adding the class around the form.

Try a plugin such as Simple Custom CSS to add the reference to display: none !important;. This plugins functionality loads after all other CSS files.

My last idea is to find out what CSS class or reference the system is using by default before you add the class around it in the custom CSS section and instead of using a custom class, use the default class.

Without being in the system itself, it’s difficult to troubleshoot, but these would be the steps that I would take.

Josh

---

<div class="post-metadata">

**Author:** ![nnikolas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nnikolas/32/2490_2.png) [@nnikolas](https://community.hubspot.com/u/nnikolas)\
**Post date:** [February 12, 2020, 8:45pm UTC](https://community.hubspot.com/t/css-to-remove-for-form-required-field-not-working/18685/9 "2020-02-12T20:45:41Z")

</div>

@Josh

Wow, thank you so much for all of your help. I will try those suggestions. Your input is beyond valuable, thank you!