design a calculated field

Hello @janxsch

What do you mean by designing a calculated field?

If you mean creating a form with our plugin and using it, please watch the video by visiting the following link:

https://resources.developers4web.com/cff/tmp/2022/10/10/video-create-and-use-form_o.mp4

Best regards.

Hello @janxsch

The plugin includes a CSS editor in the “Customize Form Design” attribute of “Form Settings” tab. You can enter your own styles to modify the appearance of form fields.

For example, if you want to customize the design of every calculated field in the form, you can use the CSS selector #fbuilder .cff-calculated-field input. But to modify the appearance of a specific calculated field, you should assign it a custom class name through its attribute “Add CSS Layout Keywords” (Ex. my-calculated-field) and use the class name in the selector (E. #fbuilder .my-calculated-field input).

For example, assuming you want to make the calculated fields values bold and bigger and hide the borders and background of their input tags, the style definition to enter through the “Customize Form Design” attribute in the “Form Settings” tab could be:

#fbuilder .cff-calculated-field input{
	font-weight:bold !important;
	height:40px !important;
	font-size:36px !important;
	line-height:40px !important;
	border:0 !important;
	background:transparent !important;
}

Learn more about the fields components and how customize their designs by reading the following post in the plugin blog:

https://cff.dwbooster.com/blog/2020/01/12/form-design

Best regards.