CMS Development

NBraden
Participant

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

SOLVE

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

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

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

SOLVE

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

Anton Bujanowski Signature

View solution in original post

0 Upvotes
4 Replies 4
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
NBraden
Participant

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

SOLVE

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!

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
NBraden
Participant

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

SOLVE

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).png

0 Upvotes