topic CSS to remove * for form required field not working in Lead Capture Tools

CSS to remove * for form required field not working

nnikolas — Mon, 10 Feb 2020 20:04:18 GMT

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?

Re: CSS to remove * for form required field not working

Josh — Mon, 10 Feb 2020 20:31:40 GMT

Hi @nnikolas,

Can you DM me the URL?

Re: CSS to remove * for form required field not working

Josh — Mon, 10 Feb 2020 21:19:21 GMT

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

Re: CSS to remove * for form required field not working

nnikolas — Mon, 10 Feb 2020 21:38:11 GMT

@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.

Re: CSS to remove * for form required field not working

Josh — Mon, 10 Feb 2020 21:41:37 GMT

Hi @nnikolas,

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

Re: CSS to remove * for form required field not working

nnikolas — Mon, 10 Feb 2020 21:44:52 GMT

@Josh

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

Re: CSS to remove * for form required field not working

nnikolas — Wed, 12 Feb 2020 15:13:14 GMT

@Josh

Do you have any other ideas?

Re: CSS to remove * for form required field not working

Josh — Wed, 12 Feb 2020 16:01:53 GMT

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

Re: CSS to remove * for form required field not working

nnikolas — Wed, 12 Feb 2020 20:45:41 GMT

@Josh

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