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.
******************
IMPORTANT!
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.
******************
Note:
• You must have a child theme to implement most of the changes I make. (You can easily generate a Divi child theme here).
• 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
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
You can use Leslie’s CSS from her article.
/*** THIS CHANGES THE BUTTON STYLE ***/
.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;
}/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
background: rgba(0, 0, 0, 0.05);
border-color: transparent;
color: #2ea3f2;
}
Styling checkboxes and radio buttons
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.
/* /// HIDE BROWSER DEFAULT INPUT TAGS /// */
.caldera-grid label [type="radio"], .caldera-grid label [type="checkbox"] {
display:none;
}/* /// 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
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
</div>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…
