{"id":18246,"date":"2020-05-14T13:19:58","date_gmt":"2020-05-14T17:19:58","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=18246"},"modified":"2021-06-25T11:04:52","modified_gmt":"2021-06-25T15:04:52","slug":"how-to-change-the-text-color-for-field-labels-in-wpforms","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/how-to-change-the-text-color-for-field-labels-in-wpforms\/","title":{"rendered":"How to Change the Text Color for Field Labels in WPForms"},"content":{"rendered":"\n

Contact forms created with WPForms are a great way to gather information from your users and the BoldGrid Post and Page Builder Plugin<\/a> 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.<\/p>\n

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<\/a> to change the text color associated with your form fields.<\/p>\n

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.<\/p>\n

Modifying The Field Labels With Custom CSS<\/h2>\n

To use the class assignment for form field labels provided by WPForms start by creating this CSS selector:<\/p>\n

.wpforms-field-label {\r\n\r\n}\r\n<\/pre>\n
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.<\/p>\n
.wpforms-field-label {\r\n    color: #FFFFFF !important;\r\n}\r\n<\/pre>\n
Using #FFFFFF makes the labels white and you can change that value to any valid color hex to use any color you like.<\/p>\n
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<\/a>.<\/p>\n
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.<\/p>\n
.wpforms-container .wpforms-form .wpforms-field-label,\r\n.wpforms-container .wpforms-form .wpforms-field-sublabel,\r\n.wpforms-container .wpforms-form input[type=text],\r\n.wpforms-container .wpforms-form textarea,\r\n.wpforms-container .wpforms-form button[type=submit] {\r\n    color: #333333;\r\n}\r\n<\/pre>\n
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.<\/p>\n