Contact forms created with WPForms are a great way to gather information from your users and the BoldGrid Post and Page Builder Plugin makes it easy to manage forms into your page content. However, the interaction between the two is not always seamless because of the nature of two distinct plugins loading their own style rules.
Sometimes when working with WPForms in your page content you will find that the color of your field labels is the same as your section background, which makes it difficult for users to determine exactly what information is expected when filling out the form. The easiest way to fix these design conflicts is to use your own CSS to change the text color associated with your form fields.
Fortunately WPForms assigns unique classes to the various page elements provided by the plugin, so you do not have to use long CSS selectors to target the items you want to modify.
Modifying The Field Labels With Custom CSS
To use the class assignment for form field labels provided by WPForms start by creating this CSS selector:
.wpforms-field-label {
}
Next add your color property and be sure to add !important to prevent any other rules from further modifying the color of your form field labels.
.wpforms-field-label {
color: #FFFFFF !important;
}
Using #FFFFFF makes the labels white and you can change that value to any valid color hex to use any color you like.
Once you have the custom CSS you wish to use, you should add it to the WordPress Customizer instead of the theme core files. Any changes made directly to the theme files can be overwritten when the theme updates. You can learn more about how to apply your custom CSS in the WordPress Customizer.
If you want to change the color of all the text in your form, including the ones inside the input fields and submit button, please use the code below. The color used in this example is dark gray.
.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form button[type=submit] {
color: #333333;
}
If you want to change other elements in your form, you may need to use your browsers developer inspector tools. Our video below will walk you thru how to find other CSS classes or IDs.
Congratulations! You now know how to change the text color for field labels in WPForms. We have some additional guides if you are interested in learning more about our WordPress website builder.
SIGNUP FOR
BOLDGRID CENTRAL
200+ Design Templates + 1 Kick-ass SuperTheme
6 WordPress Plugins + 2 Essential Services
Everything you need to build and manage WordPress websites in one Central place.
Marina says:
Thank you darling, it has worked like a charm!
Brandon says:
Hi Marina ,
We’re so happy to hear this worked for you! Please let us know if there’s anything else that we can answer for you!
DjGalapahue says:
WPForms Lite efficient CSS plus Custom CSS plugin. Simple and fast modification, easier than putting CSS in WPForm, not simple. Thank you so much
Brandon says:
Thanks for your Input DjGalapahue! I agree adding CSS to the WordPress customizer or a Custom CSS plugin is much more efficient that adding it directly to the WPforms plugin.
Thank you!
Jan says:
I am developing a small website for a charity organization. For that I use the free versions of Elementor, Astra and WPForms. The background of all pages is dark blue. However, the WPForms fields remain white. Can I change the color of the WPForms fields to the background color of the page?
With kind regards from the Netherlands
Brandon says:
Hi Jan ter Laak,
I’m not sure if we’ll be able to provide the solution you’re seeking for this particular issue. This guide is specifically for working with WPForms and BoldGrid Post and Page Builder for WordPress. You’d benefit from reaching out to Astra or Elementor support for assistance with changing field labels using these products.
Jan says:
Hi Brandon,
Thank you for your message ! I have now found a solution by including the specific CSS codes for WPForms in Elementor.
Kind regards from the Netherlands,
Brandon says:
That’s awesome to hear Jan ter Laak!
I’m so happy you were able to get this resolved!
Diana says:
Hello Jan! Do you think you could help me out with the same problem? It looks to me like I can’t use custom CSS in Elementor without paying for Pro, but I may be missing something. Thanks!
Brandon says:
Hi Diana,
It looks like Jan ter Laak found a solution by including the specific CSS codes for WPForms in Elementor. You might want to contact Elementor support directly for more assistance with this.
Jan says:
Hi Diana,
In my WordPress with the free versions of Elementor and Astra I can enter the CSS code through the following screen:
Dashboard > Appearance > Customise > Additional CSS.
In my situation I changed the color of fields in WPForms Lite.
Brandon says:
Hi Jan ter Laak,
Thanks so much for providing your input in this. Hopefully this helps Diana!
Heather says:
When I use .wpforms-field-sublabel {color: #FFFFFF !important;}
it’s only changing the sub-label for the top field, not for all of them. Is there a different label I use to change all the sub-labels?
Brandon says:
Hi Heather,
We can help with this we’d just need to inspect your form to grab the correct CSS selectors. Could you please start a new forum topic so we can inspect your site using our browser tools and give our best suggestions on how to resolve. Be sure to include the URL to the page you would like for us inspect.
Thank you!
Will says:
Thanks for the tutorial.
What is after submit it turn back the colour I don’t want?
Brandon says:
Hi, do you mean you want to change the color for when you hover over the submit button? If you would like us to take a look at your site more directly please start a new Support Forum thread and be sure to include a link to the page you would like for us to inspect.
Andrew says:
Hi Brandon,
Do these same CSS modification tricks work for weForms, versus wpForms?
I’m using Boldgrid via inMotionhosting, and weForms came bundled with Boldgrid. It seems so far that most of the functions work very well, with the exception of color management and text placement relative to fields. weForms has a “settings” tab, and within that, a “display settings” subtab, and a “label position” dropdown, which only seems to impact the appearance in the weForms building and supposed WYSIWYG previewing tool. When I go to my actual form, it forces all of my field headings inside of the boxes, with the exception of a few choice fields (making the whole thing look inconsistent thus unprofessional).
Some of the colors I can control via boldgrid pallette selection (like font heading color), and others (like first and last name) I cannot (like label or field text color). Is this a boldgrid support issue, or more of a weForms support issue? https://ifliwi.com/get-quote/
BoldGrid says:
Hi Andrew,
I moved your question to our forums so it’s easier to troubleshoot and provide custom code specifically for your website. I will respond here – https://www.boldgrid.com/support/question/crio-and-weforms-custom-css/.
Thanks,
Nicole
Andrew says:
I looked above but couldn’t find an answer.
How would I style just the label from just one field on a form?
Thanks
Brandon says:
Hi Andrew, you can right click on the form to inspect the CSS and find the specific selector for the form element you need to change and copy/paste it into the Appearance<<Advanced<<Custom JS/CSS Editor to make your changes there. If you would like us to take a look at the form and give you our suggestions you’re more than welcome to start a new Support Forum thread with a link to the page with your contact from.
Manu says:
Amazing tutorial – thank you – you helped me a lot!
Whad would I have to do if I would like to have the multiple choice answer’s clors changed as well?
Thank you in advance for your help!
Brandon says:
Hi happy to hear our guide was helpful to you! To change the color of your multiple choice answers you would need to open the inspector tools inside of your web browser and locate the exact CSS selector for the multiple choice element you’re working with. Once you have the correct CSS selector open Customize<<CSS/JS Editor and make your edits there. The syntax will be something like:
div.wpforms-container-full .wpforms-form ul li {margin-bottom: 5px !important;
color: red;
}
Stephen says:
What would be the custom CSS to set all text to one colour? not the default for the site?
Joseph says:
Hi Stephen!
If you want to change the color of all the text in your form, including the ones inside the input fields and submit button, then the following code should allow you to make those changes on your website:
.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form button[type=submit] {
color: #333333;
}
WPForms also has a post in their Blog that demonstrates some additional customizations you can make to further modify the design of your contact forms.
Please let us know if you have any additional questions for us, we are always happy to help!
Stephen says:
Thank you Joseph W,
Very helpful.
S
Rashedb2b says:
thanks a lot!
Prasad says:
Thanks a lot. It really helped me change the colors on the labels.