4 Ways To Style Caldera Forms Without Any CSS Code

Disclosure: Some of the links in this post are affiliate links. This means, if you click on the link and purchase the product, I will receive a commission at no additional cost to you. Don’t worry, I only recommend products or services that I have personally used and believe will add value to my readers.

Caldera Forms is a great free WordPress forms plugin. But the forms created using Caldera Forms plugin don’t look that good. So…

How to style Caldera Forms? Here are four methods to style forms created using Caldera Forms plugin:

  1. By using PowerPack Addons for Elementor plugin,
  2. By using Ultimate Addons for Elementor plugin,
  3. By using PowerPack Addons for Beaver Builder plugin, and
  4. By using Ultimate Addons for Beaver Builder plugin.

The first method makes use of free plugins while the next three need premium plugins.

Let’s talk about each of these methods in detail now.

Method 1: How To Style Caldera Forms Using PowerPack Addons for Elementor Plugin

PowerPack Addons for Elementor is a free addon plugin for Elementor.

You will need to first install and activate Elementor and PowerPack Addons for Elementor plugins.

Once both the plugins are installed and active, edit the page on which you want to place your form created with Caldera Forms and click the Edit with Elementor button.

Edit with Elementor

You will be taken to the front-end of your website with Elementor active. On the left-hand side Elementor panel, scroll down to PowerPack Elements widgets section and drag-and-drop the Elementor Caldera Forms widget on the page.

Elementor PowerPack Caldera Forms Widget

Once you do that, you will see the Caldera Forms widget settings on the left-hand side panel. In the Contact Form field, select the Caldera Forms form that you want to style. Here, you can also set a Custom Title and Custom Description for your form. You can also choose to show or hide the labels, placeholder, and error messages of your form.

Elementor PowerPack Caldera Forms Content Settings

Now, go to the Style tab. Here, you can style the Labels of your Caldera Forms form using the Labels settings.

Elementor PowerPack Caldera Forms Labels Settings

You can style the Input fields and Textarea fields of your form using the Input & Textarea settings.

Elementor PowerPack Caldera Forms Input Textarea Settings

You can style the field description of your form using the Field Description settings.

Elementor PowerPack Caldera Forms Field Description Settings

You can style the placeholder color for your form using the Placeholder settings.

Elementor PowerPack Caldera Forms Placeholder Settings

You can style the radio buttons and checkboxes of your form using the Radio & Checkbox settings.

Elementor PowerPack Caldera Forms Radio Checkbox Settings

You can style the Caldera Forms button using the Submit Button settings.

Elementor PowerPack Caldera Forms Submit Button Settings

You can style the success message of your Caldera Forms form using the Success Message settings.

Elementor PowerPack Caldera Forms Success Message Settings

And you can style the error messages of your Caldera Forms form using the Errors settings.

Elementor PowerPack Caldera Forms Errors Settings

A lot of settings! Aren’t they?

You can literally style every element of Caldera Forms using PowerPack Addons for Elementor plugin without writing any CSS code at all.

So go ahead and install these plugins and start styling your Caldera Forms form.

Okay! Let’s talk about the second method now.

Method 2: How To Style Caldera Forms Using Ultimate Addons For Elementor Plugin

Ultimate Addons for Elementor plugin is a premium addon for Elementor. It works the same way as the PowerPack Addons for Elementor plugin that you saw in the first method.

So, install and activate the Elementor plugin and the Ultimate Addons for Elementor plugin. You will then find the Caldera Forms Styler widget under Ultimate Addons section.

Elementor UAE Caldera Form Styler Widget

Drag-and-drop the Caldera Forms Styler widget on the page. You can then style all elements of Caldera Forms, like Form Fields, Radio buttons, Checkboxes, Submit buttons, etc. using the settings on the Content tab.

Elementor UAE Caldera Form Styler Content Settings

And using the settings on the Style tab, you can style the spacing and typography of your Caldera Forms form.

Elementor UAE Caldera Form Styler Style Settings

All of these settings are very similar to the ones you saw in the first method. So I am not going to repeat all of them again. But as you can see in the above image, there are a lot of settings available to you for styling Caldera Forms.

If you want more information about this widget, then read this Ultimate Addons for Elementor Knowledge Base article.

Now, if you are using the Beaver Builder instead of Elementor as your page builder plugin, then use the third or the fourth method described below.

Related Reading:

Method 3: How To Style Caldera Forms Using PowerPack Addons for Beaver Builder Plugin

PowerPack Addons for Beaver Builder is a premium addon plugin for Beaver Builder. It is from the same team that has created PowerPack Addons for Elementor plugin.

For this method, install and activate the Beaver Builder Lite plugin and the PowerPack Addons for Beaver Builder plugin.

Then open the page on which you want to place your Caldera Forms form and click the Beaver Builder link on the WordPress Admin Bar.

Edit with Beaver Builder

Now, from the right-hand side Beaver Builder panel, choose PowerPack Modules in the Group drop-down field. Scroll down and drag-and-drop the Caldera Forms module on the page

Beaver Builder PowerPack Caldera Form Module

In the Select Form field, choose the form which you want to style. You can also set a Custom Title and Custom Description for your form as well as show or hide the Labels of your form.

Beaver Builder PowerPack Caldera Form General Tab Settings

Go to the Style tab. Here, you will be able to style your form background, border, and padding.

Beaver Builder PowerPack Caldera Form Style Tab Settings

Go to the Inputs tab. Here, you will be able to style Caldera Forms’ field styles. You will be able to style your form’s colors, border, style, size, round corners, placeholder, etc.

Beaver Builder PowerPack Caldera Form Inputs Tab Settings

Now, go to the Button tab. Here, you will be able to style the Caldera Forms button.

Beaver Builder PowerPack Caldera Form Button Tab Settings

Go to the Messages tab. Here, you will be able to style the error and success messages of your Caldera Forms form.

Beaver Builder PowerPack Caldera Form Messages Tab Settings

And finally, go to the Typography tab. Here, you will be able to style the fonts of Caldera Forms.

Beaver Builder PowerPack Caldera Form Typography Tab Settings

You have a lot of settings in PowerPack Addons for Elementor plugin to entirely style Caldera Forms without writing any CSS code.

So use this plugin to save some time for yourself.

Okay! Let’s talk about the last method now.

Interesting Further Reading:

Method 4: How To Style Caldera Forms Using Ultimate Addons For Beaver Builder Plugin

Ultimate Addons for Beaver Builder is another premium addon plugin for Beaver Builder. It also works the same way as the PowerPack plugin you just saw in method 3.

So first install and activate the Beaver Builder Lite plugin and the Ultimate Addons for Beaver Builder plugin. You will then see the Caldera Forms Styler module in the Beaver Builder panel on selecting UABB modules in the Group drop-down field.

Beaver Builder UABB Caldera Forms Styler Module

Drag-and-drop the Caldera Forms Styler module on the page. You will then be able to style all elements of Caldera Forms using the various tabs of the Caldera Forms Styler module.

Beaver Builder UABB Caldera Forms Styler Settings

The settings on all the tabs are very similar to the ones you saw in the third method. So I won’t go over them again. As you can see in the above image, there are a lot of settings to style Caldera Forms.

If you want to read more about this module, then read this Ultimate Addons for Beaver Builder Knowledge Base article.

Alright! Time to wrap up.

What’s Next?

You just saw 4 different methods to style Caldera Forms without writing CSS code.

So use one of these methods and style your forms as you want.

All of these plugins are from reputed plugin developers, so you cannot go wrong with any of these methods.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *