Lead Capture Tools

nnikolas
Contributor

CSS to remove * for form required field not working

SOLVE

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. 

 

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

 What could be going wrong? Any other workarounds? 

0 Upvotes
1 Accepted solution
Josh
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS to remove * for form required field not working

SOLVE

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

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Diamond Partner & HubSpot Certified Trainer

View solution in original post

0 Upvotes
8 Replies 8
Josh
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS to remove * for form required field not working

SOLVE

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.

.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

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Diamond Partner & HubSpot Certified Trainer

0 Upvotes
nnikolas
Contributor

CSS to remove * for form required field not working

SOLVE

@Josh 

 

Hmmm... it's still disappearing. 

I screen recorded what's happening so you can see: 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. 

0 Upvotes
Josh
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS to remove * for form required field not working

SOLVE

Hi @nnikolas,

 

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




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Diamond Partner & HubSpot Certified Trainer

0 Upvotes
nnikolas
Contributor

CSS to remove * for form required field not working

SOLVE

@Josh 

 

I have to add it to the HTML attributes to "turn it on"

0 Upvotes
nnikolas
Contributor

CSS to remove * for form required field not working

SOLVE

@Josh 

Do you have any other ideas?

0 Upvotes
Josh
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS to remove * for form required field not working

SOLVE

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

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Diamond Partner & HubSpot Certified Trainer

0 Upvotes
nnikolas
Contributor

CSS to remove * for form required field not working

SOLVE

@Josh 

 

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

0 Upvotes
Josh
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

CSS to remove * for form required field not working

SOLVE

Hi @nnikolas,


Can you DM me the URL?

 

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Diamond Partner & HubSpot Certified Trainer

0 Upvotes