How to fully style Caldera Forms for Divi theme

Divi theme is fantastic and it’s contact form is simple (and effective) but sometimes we need to have more features. Caldera Forms is a great free plugin but the default design of its forms doesn’t match up with Divi perfectly without a little custom CSS.
So here is my solution to style each element with a slick design.

Feb 15, 2017 · 5 min read

Today, due of the latest updates of the Caldera Forms plugin, this method doesn’t work no more for some elements like checkboxes, radio buttons or select lists…
BUT, great news: I developed a plugin named “
Caldera Forms Style Customizer” and sold on the Caldera Forms website.


• You must have a child theme to implement most of the changes I make. (You can easily generate a Divi child theme
• I write “styled for Divi theme” because the design looks like Divi style and icons I use come from Elegant Theme icon font (It can also be replaced by FontAwesome).

Styling text fields

“Caldera Forms” styled for Divi Theme: text fields

Let’s start with the easiest!
Leslie Bernal, from A Girl and Her Mac, wrote an article for Elegant Theme’s blog, on styling Caldera Forms.
Here are some of the CSS she wrote, applied to Caldera Forms in a Divi layout.

.caldera-grid .form-control {
padding: 16px;
height: auto;
box-shadow: none;
background: #eee;
color: #999;
border: none;

.caldera-grid .form-control:focus {
border-color: none;
box-shadow: none;

Styling “Send” button

“Caldera Forms” styled for Divi Theme: send button

You can use Leslie’s CSS from her article.

.caldera-grid input[type=submit] {
padding: 10px 20px;
border-radius: 2px;
background: transparent;
color: #2ea3f2;
font-size: 20px;
border: 2px solid #2ea3f2;
float: right;
transition: all 0.3s ease-in-out;
.caldera-grid input[type=submit]:hover {
background: rgba(0, 0, 0, 0.05);
border-color: transparent;
color: #2ea3f2;

Styling checkboxes and radio buttons

“Caldera Forms” styled for Divi Theme: radio buttons and checkboxes

More difficult now!
I adapted the method suggested by Tevya Washburn to style Gravity Forms’ checkboxes and radio buttons with Divi font icons.

You will modify some php files of the Caldera Forms plugin because to customize these elements, we usually style the <label> tag.
Problem: in the source code of the Caldera Forms plugin, the <input> tag is nested in the <label> tag… Fortunately, adding a simple <span> tag will help us. We can change the HTML file used for the fields with the caldera_forms_render_field filter.

Let’s modify some php files

  • First, create a “caldera” folder in your child-theme (Whatever its name, just don’t forget to adapt the path I’ll give you later)
  • Go to the “checkbox” folder (see its path below)
  • Copy the “field.php” file in the “caldera” folder you created and rename it (ie: “checkbox-mod.php”)
  • Do the same for radio buttons (new file name example: “radio-mod.php”)
  • Open your “checkbox-mod.php” and locate the following string:
<?php echo $option['label']; ?>

This is this string we will include between <span> tags, here is the result:

<span><?php echo $option['label']; ?></span>
  • You can do exactly the same with your “radio-mod.php” file

Tell “Caldera Forms” where to find the new files we just created

  • Open the “functions.php” file of your child-theme
  • Paste the following snippet:
add_filter( 'caldera_forms_render_field_file', function( $field_file, $field_type ){if( 'radio' == $field_type ) {
return './wp-content/themes/NameOfYourChildTheme/caldera/radio-mod.php';
if( 'checkbox' == $field_type ) {
return './wp-content/themes/NameOfYourChildTheme/caldera/checkbox-mod.php';

if( 'dropdown' == $field_type ) {
return './wp-content/themes/NameOfYourChildTheme/caldera/dropdown-mod.php';

return $field_file;
}, 10, 2);

*** Don’t forget to precise the exact name of your child-theme for each path! ***

Ok, now we can finally start styling…

Paste this code into the “style.css” file of your child theme.

.caldera-grid label [type="radio"], .caldera-grid label [type="checkbox"] {
/* /// OUR MAIN STYLES /// */
.caldera-grid .radio span:before, .caldera-grid .radio-inline span:before, .caldera-grid .checkbox span:before, .caldera-grid .checkbox-inline span:before {
font-family: "ETmodules";
font-size: 25px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
margin-left: -25px;
/* /// MAKE THE CURSOR A HAND /// */
.caldera-grid .radio span:hover, .caldera-grid .radio-inline span:hover, .caldera-grid .checkbox span:hover, .caldera-grid .checkbox-inline span:hover { cursor: pointer; }
/* /// OUR CUSTOM INPUTS /// */
.caldera-grid .radio span:before, .caldera-grid .checkbox span:before, .caldera-grid .radio-inline span:before, .caldera-grid .checkbox-inline span:before { content: "V"; }
.caldera-grid .radio span:hover:before, .caldera-grid .radio-inline span:hover:before { content: "W"; filter: alpha(opacity=20); opacity: 0.2; }
.caldera-grid .checkbox span:hover:before, .caldera-grid .checkbox-inline span:hover:before { content: "Z"; filter: alpha(opacity=20); opacity: 0.2; }
/* /// CHECKED STATE /// */
.caldera-grid [type=radio]:checked + span:before { content: "W"; }
.caldera-grid [type=checkbox]:checked + span:before { content: "Z"; }
.caldera-grid [type=radio]:checked + span:before:hover, .caldera-grid [type=checkbox]:checked + span:before:hover { filter: alpha(opacity=100); opacity: 1; }

Styling select lists

“Caldera Forms” styled for Divi Theme: select lists

We will use about the same trick to style select lists, by nesting them into a DIV.

  • Go to the “dropdown” folder
  • Copy the “field.php” file in the “caldera” folder you created and rename it (ie: “dropdown-mod.php”)
  • Locate the <select> tag and add this line of code BEFORE
<div class="select-inner">
  • Locate the </select> tag and add this line of code AFTER

Here come the styles

Paste this code in your CSS file

.caldera-grid select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none!important;
padding: 0!important;
.select-inner {
border: 1px solid rgba(155, 155, 155, 0.5) !important;
background: transparent;
padding: 7px 5px 5px 15px;
border-radius: 5px!important;
height: 40px;
.select-inner:hover {
border: 1px solid rgba(155, 155, 155, 1)!important;
.select-inner:after {
font-family: "ETmodules";
display: block;
content: "C";
font-size: 25px;
filter: alpha(opacity=50);
opacity: 0.5;
position: absolute;
right: 20px;
top: 38px;

Work in progress!

I’m currently working on styling “Autocomplete Fields” and “File Upload” button.
To be continued…


Written by


Graphic design, music and new technologies

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade