Design and values only

Hello @moriyonet,

The classes names corresponding to the fields elements are listed in the following link:

https://cff.dwbooster.com/faq#q82

If you want modify the appearance of fields you should redefine the class through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

For example, if you want change the colors of texts and background of the fieldsets’ legends, the style definition would be similar to:

#fbuilder .cff-container-field legend{bacground:red !important; color:white !important;}

The background of the fieldset would be similar to:

#fbuilder fieldset.cff-container-field{bacground:gray !important;}

If you want to display the equation’s result into a text, for example:

The result of the equation is: XXXX

Assuming that the calculated field is the fieldname1, An alternative (but not the unique) would be insert a “HTML Content” field in the form with the following piece of code as its content:

The result of the equation is: <span id="result-here"></span>
<script>
jQuery(document).on('change', '[id*="fieldname1_"]', function(){jQuery('[id="result-here"]').html(this.value);});
</script>

Or if the equation associated to the calculated field is: fieldname2+fieldname3, enter as the content of the “HTML Content” field the piece of code:

The result of the equation is: <span id="result-here"></span>

and edit the equation as follows:

(function(){
var result = fieldname2+fieldname3;
jQuery('[id="result-here"]').html(result);
return result;
})()

If you want customize the labels of specific fields, first, assign a custom class name to these fields, for example: my-custom-field

Note that the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”, and then, define the new class into the “Customize Form Design” attribute:

#fbuilder .my-custom-field label{font-weight:bold;}

If you need additional help customizing your form’s design, I can offer you a custom coding service from my private website:

https://cff.dwbooster.com/customization

Best regards.

Thanks a lot for the detailed answer.
Regarding the styling – unfortunately I did all of the suggested but the only thing that worked was number 1. All the others I set as you said but the styling did not apply.
Can you please tell me what is the problem?
I would like to understand how to style the elements and use this method but even when following the instructions here and on the CFF-FAQ there is some gap for me…

Regarding the coding, I think I should test it first ??

Thanks again ??

Hello @moriyonet,

You cannot see changes with the css rule:

#fbuilder .my-custom-field label{font-weight:bold;}

Because, actually the theme active in your website applies the font-weight:bold; to all label tags:

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

Into the file:

https://coloringpages.site/wp-content/themes/scoop/assets/bootstrap/css/bootstrap.min.css

Concerning to the second rule, my apologies, it was my fault, the correct style definition would be:

#fbuilder .cff-container-field fieldset{bacground:gray !important;}

Best regards.

You rock! Now this works ??

Regarding the bold label, if my theme applies to bold labels, how come I don’t see the text in bold where I have the labels?

Hello @moriyonet,

If you don’t want to display the labels in bold the style definition would be:

#fbuilder label{font-weight:normal;}

Best regards.

Oh, I get it now! (the bold labels in my theme)
Do I have an alternative way to control the label text within the form?

Hello @moriyonet,

Please, read my previous ticket.

Best regards.

Well… the labels actually looks good with this style.
Also, can I copy the somehow the calculator as a whole unit to a different website I have that the plugin is also installed there? I mean, not embed it but actually copy all the settings I created and move all of it to my other website?

Hello @moriyonet,

If you are talking about the styles, yes, you can copy the styles defined into the “Customize Form Design” attribute in the “Form Settings” tab of your current form, and enter these styles into the settings of other forms in the same website, or forms in other websites.

If you are talking about exporting the form and import it into a different website, you will need at least the Professional version of the plugin in both websites, and to follow the instructions described in the following link of the plugin’s website:

https://cff.dwbooster.com/documentation#import-export-form

Best regards.

Perfect! Thank you very much for the information, it helped me a lot! ??