Need help changing the color of "please complete this required field" text in GDPR section of forms

Developer Support CMS Development
1

Hi everyone,

Newbie to HubSpot here. The color of the asterisk for required fields and the “Please complete this required field” error message that shows up when you don’t fill out a required box in a form clashed with the background of some of webpages. I was able to change the color of those things from red to blue by changing our CSS stylesheet and adding HTML snippets to the individual webpage. But I can’t figure out how to change the color of the “Please complete this required field” text for the GDPR section where they opt-in to different email subscriptions. Does anyone know how to change this? (The red text in the attached picture is the text I want to change the color of)

Screenshot (20).png
Screenshot (20).png2880×1584 500 KB

2

Hi @NBraden,

you can modify the color of the error message with the class

hs-error-msg

So if you want to modify the text of the legal container(GDPR stuff) it’s

.legal-consent-container label.hs-error-msg{
color:#ff0000;{# red color #}
}

best,

Anton

3

I changed the hex code to blue and inserted the code into the webpage but it didn’t work. Any ideas on what I’m doing wrong?

Screenshot (22).jpg
Screenshot (22).jpg2880×1586 204 KB

4

I assume this has been resolved but adding !important should get it to work

Here is some css i added to the landing page in our Hubspot CMS to change the colour and font size of the error messages appearing:

errorColorChange.PNG
errorColorChange.PNG779×752 54.7 KB

5

Hi @NBraden,

this is most likelly because the “head HTML” is getting loaded into the {{ standard_header_include}}-hubl in your template. And since it’s - in most cases - before your theme-override.css(or similar) the theme-override.css overrides the “head HTML” settings.

Things you can do:

1. Try the sledgehammer method

It should look like this:

.legal-consent-container label.hs-error-msg{
color:#0000ff !important;{# blue color #}
}

if this works - open your theme css folder and search for the theme-override.css(might be named theme.css or similiar) and place the code(first without !important) at the very bottom. Save it and this should work.

best,

Anton

6

Hi, just putting that new code in “head html” section was enough to change it. I guess the “!important” made the difference. Thank you so much!