Styling Caldera Forms to Look Like the Divi Contact Form (+ Bonus Looks)

Caldera Forms is one of the most popular and highly-rated (FREE) form plugins in the WordPress repository. It’s drag and drop user interface makes it incredibly easy to build all kinds of forms. If you’re used to using the Divi builder then the Caldera builder should come pretty naturally to you.

How to Make a Caldera Form Look Like Divi

Subscribe To Our Youtube Channel

The Divi style has become one of the most recognizable styles amongst the most popular WordPress themes today. Divi is often chosen for it’s clean, minimal look so it’s no wonder users want to style third party plugins to look just like it.

This is what the Divi contact form looks like before any styling or module settings are applied:

And this is the basic starter form that the Caldera plugin comes ready with:

As you can see you’ll need to play with the column widths, remove some of Caldera’s header fields, and remove the labels from above the fields and replace them with placeholders if you want it to look as close to Divi as possible (or you can start your own from scratch). The first two changes you can do on your own, you may even want to keep the headers and text, but I’ll show you how to add placeholders in the fields and give you the CSS to make it look like Divi’s form.

Add Placeholders to the Fields

This is what Caldera’s basic starter form looks like in the backend. Take some time to get familiar with it, move things around and see what they do; learn by doing. If you need to you can always start fresh with a new starter form after.

Wherever you have input text in your form is where you’ll want to use placeholders instead. I’ll use the email module as my example. You want to check the box that says “hide label” and fill the field titled “placeholder”.

When you have your form as you want it, save it. Then, add it by using a Divi text module to your page (a nifty Caldera button will appear in your text editor).

The CSS code

Next you’ll need to add the following CSS to your Divi options custom CSS panel OR your child theme stylesheet:

/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
 padding: 16px;
 height: auto;
 box-shadow: none;
 background: #eee;
 color: #999;
 border: none;
}

/*** 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;
}

I didn’t need !important anywhere in here but if you see something won’t apply try adding it.

And voilà, you should end up with a contact form that looks identical to the Divi contact form:

Bonus Looks!

I’m going to give you some CSS that you can use to achieve three more looks. You’ll want to place this code in the exact same place as you did the above code: either inside Divi’s Custom CSS Panel with Theme Options or in your child theme’s stylesheet. Obviously, you won’t want two of these styles active at the same time, so only use one of these blocks of css at a time.

Style 1: Ghost Form

The first is really popular, it uses a background image with transparent form fields for a see-thru effect, I’m placing the background image area in the Divi section. Keep in mind you’ll want to consider readability when picking your image, a darker image would be best in this case:

The CSS Code

/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
 padding: 16px;
 height: auto;
 box-shadow: none;
 background: transparent;
 color: #fff;
 border: 2px solid #fff;
}

/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
 padding: 10px 16px;
 border-radius: 2px;
 background: transparent;
 color: #fff;
 font-size: 20px;
 border: 2px solid #fff;
 float: right;
 transition: all 0.3s ease-in-out;
}

/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
 background: rgba(255,255,255, 0.2);
 border-color: transparent;
 color: #fff;
}

.caldera-grid .form-control:focus {
 border-color: #fff;
 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6);
}

/*** THIS CHANGES THE PLACEHOLDER TEXT COLOR WHICH IS IMPORTANT FOR THIS PARTICULAR STYLE ***/
input::-webkit-input-placeholder {
 color: #fff !important;
}
input:-moz-placeholder {
 /* Firefox 18- */
 color: #fff !important;
}
input::-moz-placeholder {
 /* Firefox 19+ */
 color: #fff !important;
}
input:-ms-input-placeholder {
 color: #fff !important;
}
textarea::-webkit-input-placeholder {
 color: #fff !important;
}
textarea:-moz-placeholder {
 /* Firefox 18- */
 color: #fff !important;
}
textarea::-moz-placeholder {
 /* Firefox 19+ */
 color: #fff !important;
}
textarea:-ms-input-placeholder {
 color: #fff !important;
}

You may be wondering why that last bit of CSS for the placeholder text isn’t condensed. Well when I condensed it it stopped working lol, not sure why but feel free to play around.

Style 2: Ghost Form Variant

This is similar to the look above but instead of completely transparent fields we’ll make them have a dark opacity. This will give you a little more leeway when choosing your photo because this opacity helps solve the readability issue.

The CSS Code

/*** THIS CHANGES THE LOOK OF THE FORM FIELDS - I RAISED THE FONT SIZE THIS TIME ***/
.caldera-grid .form-control {
    font-size: 22px;
    padding: 16px;
    height: auto;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.7);
    color: #f5f5f5;
    border: none;
}

/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
    padding: 10px 16px;
    border-radius: 4px;
    background: #27c9b8;
    color: #fff;
    font-size: 20px;
    border: none;
    float: right;
    transition: all 0.3s ease-in-out;
}

/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
    background: #f15640;
    color: #333;
}

/*** THIS REMOVES THE GLOW EFFECT COMPLETELY ***/
.caldera-grid .form-control:focus {
    border-color: transparent;
    box-shadow: none;
}

Style 3: Text Field Bottom Border Only

Lastly this example shows the fields with only a bottom border. This look is very sleek and fairly trendy right now. You can see when the user is typing in their text the bottom border changes to a lighter color, a very small but nice detail.

The CSS Code

/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
    font-size: 22px;
    padding: 16px;
    height: auto;
    box-shadow: none;
    border-radius: 0!important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #333;
}

/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 0;
    background: #dd0000;
    color: #000;
    font-size: 20px;
    border: none;
    float: right;
    transition: all 0.3s ease-in-out;
}

/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
    background: #000;
    color: #f5f5f5;
}

/*** THIS CHANGES THE BOTTOM BORDER COLOR WHILE USER IS TYPING ***/
.caldera-grid .form-control:focus {
    border-color: #e0e0e0;
    box-shadow: none;
}

Final Thought

I hope you’ve enjoyed these examples and can use these CSS snippets to help you style your Caldera forms. These are great as is but playing and adding to them can result in some really fun form looks, enjoy! 😀