How to hide form labels via CSS?

Occasional Contributor

Hello there! I'm trying to style my HubSpot form that is embeded onto my WordPress website page via a code module. In the chrome inspector I can easily hide the form field labels by using: .hs-form-field label { display: none; } but that doesn't work from my .css stylesheet. Even with extra targeting like a div ID and the HubSpot form ID, nothing works. Is there a recommended or easier way to hide the HubSpot form labels? I only want the placeholder text in the fields and the fields themselves. Thank you in advance!

 

How it looks vs. how I want it to look.

Reply
0 Upvotes
4 Replies 4
Advisor | Platinum Partner

Hi @lisa8 

.hs-form-field label is the correct selector and display:none should work, so there must be something overriding your style or preventing the updated stylesheet from loading on your page.

 

Can you share the URL where this form is located?


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

Reply
0 Upvotes
Occasional Contributor

http://gator3051.temp.domains/~clinicalarch/solutions/content-acquisition/

 

The form is at the bottom. If hiding the form labels hurts assistive technologies, is there something else I should do instead of hide them? My issue is, with the labels above the fields the form takes up far too much space. I need the labels to be placeholders in the fields.

Thanks so much!

Reply
0 Upvotes
Occasional Contributor

So I spoke with live chat support, the only way to target the form field labels is if I embed the form into my page as raw HTML (it's an iFrame otherwise). In my form settings there is a toggle at the top that sets it as raw HTML, only problem is it then strips ALL of the styling away. Smiley Sad So I either have to style the form from scratch or deal with the field labels. I'll have to decide which route I want to go.

 

Thanks for all of your help!

Reply
0 Upvotes
Highlighted
Community Manager

If you absolutely have to hide form labels I would not use display:none; to do it. You will render the form useless to people relying on assistive technologies, as well as make it hard for those with memory issues to fill out the form.

If you really have to make the label be invisible, there are better ways of doing it without hurting screenreaders. You will still be hurting users with memory related issues as placeholder text does not stay visible once you start entering something into a field.
https://webaim.org/techniques/css/invisiblecontent/

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

Reply
0 Upvotes