Use CSS To Style Field Labels

A volcano crater

In this guide you will learn how to use CSS to style field labels in Caldera Forms.

What Is CSS?

Cascading Style Sheets or CSS for short, is a style sheet language used for describing the presentation of a document written in a markup language. All websites use some form of CSS to make their websites look more attractive and great!

Styling A Caldera Form With CSS

A screenshot of how to inspect an element.
An example of how to inspect an element in a browser.

Styling a Caldera Form is pretty easy thanks to custom classes and all the amazing styling tutorials offered on the Caldera Form’s blog.

Finding The Field Label Value To Customize

1. View your Caldera Form on the front-end of your website with the browser of your choice.

2. Right Click on the field label and select inspect. This will bring up the HTML code that is used to build up your Caldera Form.

3. If this is done correctly, you should see the line of code that is used to style and place the field label in the Caldera Form.

4. Take note of the field’s id. This will be the value inside the id value and the beginning of the code should look something similar to <label id="fld_8768091Label" for="fld_8768091_1" class="control-label">

5. As you can see that fld_876809Label is the field label id. Now that we know what the ID value is, we can use it in our CSS to style our field label.

Adding Custom CSS To Your WordPress Website The Right Way

There are multiple ways to successfully add custom CSS to a WordPress website. You may choose one of the following ways to add CSS to your website –

  1. Adding custom CSS to your WordPress child theme’s style.css file. Please note that if you add code to a default theme this way and update your theme, your customizations will be lost. Here is a guide to creating a child theme of your WordPress site.
  2. Most premium WordPress theme’s offer custom CSS section inside theme options. Not all theme’s will offer this option. If you are running a premium theme, be sure to check out your theme options to see if this feature is available.
  3. Use a custom CSS plugin.

Writing The Custom CSS

Results of applying custom CSS to elements class.
Applying custom CSS to elements class.

In the first step we found out the field label id, this is what we use to style that particular element. If you would like to apply a general style to the field labels, you may select the class that field labels share, in this case it would be control-label.

An example of applying custom CSS to elements ID.
Applying custom CSS to elements id.

Let’s customize our label fields, in this case “First Name”, font-size bigger and change the color. You may use any CSS code you’d wish to style the field label of your choice. If you select the id of a field it will make changes only to that particular field, if you select the fields class it will make changes to all fields with the same class.

Get Creative!

Now that you know how to change the styling of label fields in Caldera Forms with the help of CSS and how to add custom CSS to your WordPress website the correct way. You can apply these principles to any elements on websites!

Be sure to check out our other styling tutorials as well as playing around with CSS code. Try changing one field label to a different color, smaller font size and change the font-family to something different. Be sure to test your CSS with elements classes and id’s.