x
AnonymousA
Your opinion in 1 minute.
Help us improve by answering 4 quick questions.
Take Survey Now
Get Started with Square
3.145.177.180
3.145.177.180
jacks2 J
‎02-09-2018 06:39 AM

Change Color of "INDICATES REQUIRED FIELD" Label

I know that the label above forms can't be removed right now, but does anyone know of a way to at least change the color of it in the code? Mine shows up as white on my white background because of the theme I'm using (had to use the dark high contrast theme to get the header and buttons to look how I wanted) which makes it an unreadable and useless feature of a form. I've tried tweaking the code myself, but I'm not a programmer and it's been no use. If anyone has any idea what to do to change the color of those words to black, please let me know. 

Site is: https://testingkerri123.weebly.com
You have to highlight it to even read the words :(

Reply
0 Kudos
8,429 Views
Message 1 of 16
Report
2 Best Answers
CP31 C
‎02-12-2018 08:39 AM

Best Answer

I had someone who writes code help me with this, and if you use the html code below in the footer of your website, it will hide that stupid "Indicates required field" label that Weebly deployed. It's so annoying and I asked for help from Weebly and they just told me to remove the required field option on all my fields. THAT is not the work-around. You shouldn't have to see that label. Especially when you have fields lined up horizontally and it throws the first field down in alignment. Sorry, for the rant, but here is the code to put in your footer to hide the label. Just used the html widget to add it to your footer. As for changing the color, they've changed where that is in the html editor, can't help you with that one.

<style>
.wsite-form-label.wsite-form-fields-required-label {
display:none !important;}
</style>

View Best Answer >

Reply
8,384 Views
Message 17 of 16
Report
Adam7
Square
‎02-12-2018 11:22 AM

In response to CP31
Best Answer

If you want to keep the label but make it visible, you can also use this (added to the Header Code field for the page):

<style>
.wsite-form-label.wsite-form-fields-required-label { color: red !important; }
</style>

View Best Answer >

Reply
8,381 Views
Message 17 of 16
Report
15 REPLIES 15
Bernadette3 B
Square
‎02-09-2018 01:56 PM

I'm not sure of the code you would use to change the text, but you could use the Color Block app from the App Center! This way you can change the background color of just the contact form element. 

https://www.weebly.com/app-center/color-block?ref=ac-search

Reply
8,410 Views
Message 17 of 16
Report
bobafett
‎02-09-2018 04:49 PM

In response to Bernadette3

Neat....another way to skin a cat.

Reply
8,403 Views
Message 17 of 16
Report
CP31 C
‎02-12-2018 08:39 AM

Best Answer

I had someone who writes code help me with this, and if you use the html code below in the footer of your website, it will hide that stupid "Indicates required field" label that Weebly deployed. It's so annoying and I asked for help from Weebly and they just told me to remove the required field option on all my fields. THAT is not the work-around. You shouldn't have to see that label. Especially when you have fields lined up horizontally and it throws the first field down in alignment. Sorry, for the rant, but here is the code to put in your footer to hide the label. Just used the html widget to add it to your footer. As for changing the color, they've changed where that is in the html editor, can't help you with that one.

<style>
.wsite-form-label.wsite-form-fields-required-label {
display:none !important;}
</style>

Reply
8,385 Views
Message 17 of 16
Report
Adam7
Square
‎02-12-2018 11:22 AM

In response to CP31
Best Answer

If you want to keep the label but make it visible, you can also use this (added to the Header Code field for the page):

<style>
.wsite-form-label.wsite-form-fields-required-label { color: red !important; }
</style>
Reply
8,382 Views
Message 17 of 16
Report
wallen W
‎02-12-2019 06:10 PM

In response to Adam7

Being a programmer by profession, I'm completely comfortable patching code.  However, I know next to nothing about HTML.  Can you be more specific about where to put these three lines of code:

<style>
.wsite-form-label.wsite-form-fields-required-label { color: red !important; }
</style>

I don't know what "the Header Code field for the page" is.  Thanks.

Reply
0 Kudos
4,991 Views
Message 17 of 16
Report
Adam7
Square
‎02-13-2019 11:32 AM

In response to wallen

The header code field can be found in Settings > SEO > Header Code. It would also work if added to the Footer Code field in the same place, although it usually makes more sense to keep any CSS rules in the <head> area of a site.

Reply
0 Kudos
4,985 Views
Message 17 of 16
Report
Markinaus M
‎02-14-2018 06:26 AM

In response to CP31
 
Reply
8,349 Views
Message 17 of 16
Report
Markinaus M
‎02-14-2018 06:28 AM

In response to CP31
Perfect, works as described, thanks CP3.
Reply
8,347 Views
Message 17 of 16
Report
CP31 C
‎02-14-2018 11:04 AM

In response to Markinaus

Happy to help! Smiley Happy

Reply
0 Kudos
8,304 Views
Message 17 of 16
Report
silverlinker S
‎02-14-2018 10:52 AM

In response to CP31

This is the correct answer!  Thanks for helping me remove it CP3! Smiley Happy

Reply
4,951 Views
Message 17 of 16
Report
CP31 C
‎02-14-2018 11:03 AM

In response to silverlinker

My pleasure! Smiley Happy

Reply
4,944 Views
Message 17 of 16
Report
DressScorecom D
‎07-28-2018 09:26 AM

In response to CP31

You're a lifesaver!

Or at least a website saver.

https://dressscore.weebly.com/

Reply
1,714 Views
Message 17 of 16
Report
jbh J
‎08-19-2018 07:34 PM

In response to DressScorecom

Worked fo rme too!  Super great! Thank you!

Reply
1,675 Views
Message 17 of 16
Report
mitzlafftrader M
‎06-09-2019 09:02 AM

In response to CP31

awesome! worked perfect

Reply
1,541 Views
Message 17 of 16
Report
joysmanel J
‎06-15-2019 09:24 AM

In response to CP31
Gnial !!
Gracias
Reply
1,525 Views
Message 17 of 16
Report
Anonymous
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.

Square Community

Square Products

Resources

More

© 2022 Square, Inc.