Divi Plugin Highlight: Caldera Forms Style Customizer for Divi and Extra

Caldera Forms does a great job associated with blending in with the styling of your website. What if you wanted in order to style it using the familiar design tools of the Divi and Additional Theme Customizer? You can do this with a third-party plugin called Caldera Forms Style Customizer for Divi and Extra.

Caldera Forms could be styled using the standard Theme Customizer options, however, these options style the particular theme. This means if you change the style of your form’s text you also change the style of your website’s body text. If a person wanted to style your forms separately from your content you would normally have to style by hand with CSS. Caldera Forms Style Customizer for Divi and Extra solves that problem by adding styling features to the Theme Customizer.

In this plugin highlight we’ll take a look at the Caldera Forms Style Customizer for Divi and Extra plugin and see simply how easy it is to make use of. This third-party plugin can be bought through Caldera Forms. As the title suggests, it works with both Divi and Extra.

Installation and Activation

Upload and activate the plugin because normal. There are no settings in order to adjust. The features are ready to use.

Customizing a Form

I’ve placed the default contact form into a page with all of the arrears styling. I’ll make all of my changes to this form one at a time. Then we’ll see an instance or two.

The new styling features are usually added to the Theme Customizer. Open the Theme Customizer (or Module Customizer – they both work) and click on Caldera Forms Style Customizer .

This adds twenty new customization tabs to customize every aspect of the form including text, buttons, fields, toggle switches, date picker, breadcrumbs, and so on. Here’s a look at each establishing.

Text Fields

Text Fields modifications the color of the text, placeholder, and border, as well as edge width, border radius, and single range height of the fields.

Text Fields Hover

Text Fields Hover adjustments the text, field, and border shades.

Text Fields Focus

Text Areas Focus changes the color of the text, background, and border from the field that has focus. In this example area in the center has hover yet the field with the dark background has focus.

Dropdown Choose

Dropdown Select customizes the background, text, arrow, and border colors. You can even adjust the border width and radius.

Dropdown Select Hover

Dropdown Select Hover controls the particular color of the background, text, antelope, and border on hover.

Checkboxes and Radio Buttons

Checkboxes and Stereo Buttons adjusts the color of the selected items of your checkboxes plus radio buttons.

Toggle Changes

Toggle Switches adjusts the colors of the background, font, and border of both the unselected and selected switch independently. You can also adjust the border width and radius of both switches together.

Toggle Switches Float

Toggle Switches Hover adjusts the colors from the background, font, and border of the particular selected and non-selected switch independently. This is the non-selected switch.

The blue one is the selected switch.

Submit Button

Submit Button controls the background, font, and border colors, as well as the edge radius, button width and its location. You can also adjust the typeface size and letter spacing. A text transform feature changes the case of the text. Choose lower case, top case, capital, initial, or inherit.

Submit Button Hover

Submit Button Hover controls the hover colors for the background, font, and border.

Reset Button

Reset Button controls the setting, typeface, and border colors. You can also adjust the size of the typeface and letter spacing, button width, key position, border width, and border radius. This one also has text change.

Reset Button Hover

Reset Key Hover adjusts the button colors meant for the background, text, and border.

Other Buttons

Caldera has several additional forms of buttons. Other Buttons controls everything except Submit and Reset. Adjust the colors for the font, border, plus background, and adjust the border thickness and radius. In this example I’ve created Previous and then buttons.

Other Buttons Hover

Other Buttons Hover regulates the hover colors for the fonts, border, and background.

Date Picker

Date Picker includes regular and float colors within the same tab. Adapt the colors for the font and background. In this example I’m hanging over the 10 and the 12 will be selected.

Upload File Checklist

Upload File List controls the colors to get the background and text within the particular list of files that are published.

Section Break

Section Break handles the section break’s color, border size, and top and bottom margins.


Breadcrumbs lets you choose the colors for the fonts for both the particular active page and other links, the separator, background, and border. Adjust the particular border width and radius.

Success Alert

Success Alert adjusts the font, background, and border colors, as well as the border radius and width. It also changes the box height.


Assorted provides you with control over the colors intended for the required icon, fields in error, description text, bank card color, and credit card icon position. The description text includes the font size, letter spacing, and text transform options. I’ve chosen uppercase.


I created a resume upload form (actually this is constructed into Caldera Forms, but I did click on the button to select it), and set it as being a modal. First We want to style the page along with the Divi Builder.

I’ve added a background image and selected colors that contrast rather than blend with the history.

This particular one uses exactly the same settings with the different background. This time I didn’t use the form in a modal. Rather than having a white background, the particular form fields are put directly over the particular image.

Import Export

It’s simple to import or export your Caldera Forms styles that you’ve created in the customizer. In Dashboard go to Caldera Forms , Styles – Import / Foreign trade . This imports and exports the particular styles as a JSON file, permitting you to easily use your Caldera Type styles on any website that utilizes this plugin. All of your design will be overwritten with the styling of the imported file.

License and Support

The plugin can be purchased being a one year license with renewals costing fifty percent the price. The license allows the plugin to be used on 1 website and includes twelve months of assistance and updates.

Final Ideas

It found this plugin easy to use. The Customizer settings are intuitive. They’re labeled well plus arranged in a way that can make sense. I had no trouble finding any of the settings I wished. I would like to see any easy way to get back to the default settings all at as soon as or make global adjustments (such as increasing or decreasing the overall darkness of all the colors). That’s most likely not realistic, however it sounds interesting.

It’s impossible to style person forms with the Customizer settings. Most forms use this same styling as being a global setting and will have in order to be styled on an individual basis using the styling features of Caldera. This particular is the nature of the Theme Customizer. If you’re interested in design your Caldera Forms on a worldwide basis there’s no easier way to do it than to use Caldera Forms Style Customizer for Divi and Extra.

We desire to hear from you. Maybe you have attempted the Caldera Forms Style Customizer pertaining to Divi and Extra plugin? Let all of us know that which you think about it in the comments.

Featured Image via Irina Strelnikova / shutterstock. com

The post Divi Plugin Highlight: Caldera Forms Style Customizer for Divi and Extra appeared first on Elegant Themes Blog.