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 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 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 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 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 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.
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 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 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 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.
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.
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.