Posted on January 11, 2017 by Leslie Bernal in Divi Resources |
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.
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.
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).
Next you’ll need to add the following CSS to your Divi options custom CSS panel OR your child theme stylesheet:
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:
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.
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:
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.
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.
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.
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! 😀