Archived topic
How to change field names color on a form
5 replies · Started by Diana on May 25, 2021
Hello,
I'd like to set the background of my Contact Form7 form to dark blue. By background I do not mean the field background but the background of the Elementor section where I have the form's shortcode inserted. The names of the fields (Name, E-mail, Subject, Message) of my contact form are black and they would not be visible on a dark blue background. I'd like to change them into white. The only options I see in Colors - Forms changes the text that the user writes into the fields, but not the color of the names of the fields. I can't write CSS. Is there any other way using GPP?
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
You can find the link in the private field.
I would prefer using GPP, if possible, instead of EPro or a form plugin other than Contact Form7.
The background in question is white now, because otherwise the field names would not be visible.
Try Customizer > Colors > Forms.
Let me know if this helps :)
I already tried that. "Form text" changes the color INSIDE the fields and "Form Text Focus" changes the color INSIDE the active field. Both possibilities to change form text color change the color of the text that the visitor puts into the fields, but not the color of the names of the fields. Form background also changes the color of the fields, inside the fields. All color change possibilities regard what's inside the fields.
Hi Diana,
Are you trying to change the Label color?
If so, try this CSS:
div#wpcf7-f69-p15-o1 > form > p > label {
color: red;
}Here's how to add CSS - https://docs.generatepress.com/article/adding-css/
If you want to change the color of each labels differently, you can try something like this.
div#wpcf7-f69-p15-o1 > form > p:nth-of-type(1)> label {
color: red;
}Where the number value within p:nth-of-type() is the order of which the label appears.
