Hello @pexel
Thank you very much for using our plugin.
The plugin includes the “Customize Form Design” attribute in the “Form Settings” tab ). It is a CSS editor with syntax highlighting and error checking to allow you to edit the appearance of every aspect of your form.
For example, to customize the background color of every input box, select tag and textarea in the form, you can enter a style definition similar to:
#fbuilder input,
#fbuilder select,
#fbuilder textarea{
background: green !important;
}The !important; modifier increases the precedence of your CSS rules.
To vary the background of fields of a specific control, like calculated fields, you can modify the styles definition block as follows:
#fbuilder .cff-calculated-field input{
background: green !important;
}But, if you want to customize the background color to only one field, or some specific fields, you can assign them a custom class name through their “Add CSS Layout Keywords” attributes (Ex. my-custom-field) and enter the styles’ definition below in the “Customize Form Designs” attribute in the “Form Settings” tab:
#fbuilder .my-custom-field input{
background: green !important;
}Learn more about the form and fields components and how to customize their appearance by visiting the next blog post:
https://cff.dwbooster.com/blog/2020/01/12/form-design
Best regards.,