With over 90 000 active installs, its user friendly drag-and-drop interface, and frequent updates, Caldera Forms is fast becoming a leading form builder in the WordPress community. Something that isn’t so obvious is styling the forms buttons. In this tutorial I am going to show you four easy ways to do so.
The Full Width Button
If you have a fairly narrow form, a full width button can look quite attractive. Here’s the necessary CSS to achieve this look:
[caldera_form id=”CF59a93ee2bb84c”]
The Center Aligned Button
If you’d like to centre the buttons, use the following CSS. This will center the button relative to the column it’s in.
[caldera_form id=”CF59a952f6879e4″]
The Right Aligned Button
[caldera_form id=”CF59a9542ecbc65″]
Changing The Background And Text Color
And then, if you’d like to add a little color and a hover effect, try the following CSS. It gives the button a background color which changes when you mouse over it.
[caldera_form id=”CF59ac3f0751039″]
Wrapping It Up
There you have it, four simple ways to dolly up the Caldera Forms buttons. In essence, it’s just a matter of targeting the .caldera-grid class and its descendant .btn. You can also mix things up a little by adding background color or any other styling to any of these button styling options, just let your imagination run wild.
Photo by Kira auf der Heide on Unsplash
How use this tips? Where to make changes? Tell us more please. step by step. Thank You!
Hi Mark, just add it to your Child Theme’s style sheet. Most themes also have a place to add custom CSS. Otherwise you’ll need to install a plugin. I’d recommend WP Add Custom CSS (https://wordpress.org/plugins/wp-add-custom-css/)
Thanx!!!
Hi Rob, I wondered if you happen to create CSS for styling the Gravity Forms submit button, much the way you did for Styling the Caldera Forms submit button this past fall (i.e., the full width button; the center aligned button; the right aligned button; and changing the background and text color). If so, would it be possible for you to share them with me? Thank you. Alan S.
Hi Alan, I haven’t worked with Gravity for years. Do you have an example of a form you want to style?
Hi Rob.
Could you tell me how to expand Caldera Form in divi to 100% ? I already tried to use margin, but it didn’t help…still spacing both sides.
Thank you, Paul
Hi Paul,
Do you have an example I could look at?
Cheers,
Rob
Hi there.
How to set border radius to submit button?
I tried
.caldera-grid .btn {
border-radius: 13px;
}
with no luck :O
Thank you
Hello,
Try this:
input.btn.btn-default {border-radius: 48px !important;
}
It should do the trick.
Cheers
How to set border radius to submit button?
Thank you
Hello!
Thank you for making this useful topic
I tried to make on0line contact form
https://imgur.com/BObVmRf
Problem – submit button is a bit smaller than text field
Is there any hidden setting when u create contact form?
Thank you very much!
hi rob can u tell my how can i add the css code to the caldera forms
Hi,
How about adding font awesome icon into the input field (left or right) :D?
Thanks!
How to set border radius to submit button?
Thank you
Hello,
this should do it:
.btn-default {border-radius: 50px !important;
}