CMS Development

lisa8
Participant

How to hide form labels via CSS?

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.

0 Votes
4 Réponses
jmclaren
HubSpot Employee
HubSpot Employee

How to hide form labels via CSS?

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

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

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

0 Votes
MatthewShepherd
Conseiller clé

How to hide form labels via CSS?

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?

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
0 Votes
lisa8
Participant

How to hide form labels via CSS?

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. 😞 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!

0 Votes
lisa8
Participant

How to hide form labels via CSS?

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!

0 Votes