Support & Knowledgebase

Styling WP Forms for Dark Backgrounds in Upfront editor

Oct 5, 2017
Posted by Adam Winchester

If you’re building a website with a dark background, and you want to put a form on the contact us page, it can be difficult to find all of the CSS classes and ID’s to change the different text to white (or a colour easily read on a dark background).​​

This post will list all of the classes in WP Forms to make it easy to change these using the Upfront Global CSS editor simply by using the following code:​​

.class or #id {​
color:white;
}​

Here are the classes:​

Form fields
class=”​​wpforms-field-label”

Sub-labels
(like First Name and Last Name)
class = “wpforms-field-sublabel”

​Checkbox or Radio button labels
class=”​wpforms-field-label-inline”

​Field Description
class=”wpforms-field-description”

So, styling a WP Form in the Upfront editor may look something like the code below:​

.wpforms-field-label, .wpforms-field-label-inline, .wp-forms-field-label-inline, .wpforms-field-description{​
color:white;​
}​

Questions? Post them below and we’ll help out.

Leave a Reply

Your email address will not be published. Required fields are marked *