Regarding template 2

Hello @io978465132

You should use a more specific selector. Please, send me the URL to the page where the form is inserted for checking the structure of this page.

Best regards.

Hello,

The link is: https://bit.ly/2DeMFNS.

Best regards,

Hello @io978465132

The issue is simple, you are defining the styles of the selector: .cp_cff_natural, but the class associated to the template used is .cb_cff_professional

Please, enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

.cp_cff_professional{background:#003265 !important}
.cp_cff_professional .pbSubmit,
.cp_cff_professional .pbNext,
.cp_cff_professional .pbPrevious{background:white !important;color:#003265 !important;text-shadow:none !important;}

and that’s all.
Best regards.

Hello,

Thank you for great explanation. Which code do I need to use to change the color for the following elements of the form:

– form name
– Page x of Y text
– Instruction for user text
– field background
– text for the choices in checkboxes
– background for dropdown field

It is for the same link as above.

Do I use these?

#fbuilder .comment_area label {color:#FFFFFF !important}
#fbuilder .comment_area span {color:#FFFFFF !important}
#fbuilder .fform h2 {color:#FFFFFF !important}
#fbuilder .fform span {color:#FFFFFF !important}

Thank you in advance.
H

Hello @io978465132

The complete list of selectors is available in the following link:

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

The selectors to use in every case are:

– form name:

#fbuilder .fform h2 {}

– Page x of Y text

#fbuilder .pbreak>fieldset>legend{}

– Instruction for user text

#fbuilder .uh{}

– field background

#fbuilder .fields input,
#fbuilder .fields textarea,
#fbuilder .fields select{}

– text for the choices in checkboxes

#fbuilder .cff-checkbox-field .dfield label{}

Best regards.

Hello,

Thank you. Is it possible to have a field where the visitor inputs a percentage? E.g. the visitor inputs 30% and another field in the form calculates a value based on that percentage.

Or do I need to buy the Developer edition?

Best regards,
H

Hello @io978465132

You can emulate percentage numbers using currency controls, entering the percentage sign as the currency attribute, and in the equation associated to the calculated field should apply a division (/100)

For exmaple: assuming the fieldname1 is a number field and the fieldname2 the percentage to calculate. The equation would be:

fieldname1*fieldname2/100

and that’s all.
Best regards.

Hello,

Thank you for the percentage explanation.

Regarding the selectors: I have tried the selectors for each case but it still doesn′t work. This is the code that Im using:

.cp_cff_professional{background:#F0F0F0 !important}
.cp_cff_professional .pbSubmit,
.cp_cff_professional .pbNext,
.cp_cff_professional .pbPrevious{background:#003265 !important;color:#FFFFFF !important;text-shadow:none !important;}

#fbuilder .uh {color:#003265;}
#fbuilder .cff-checkbox-field .dfield label{color:#FFFFFF;}
#fbuilder .fields input,
#fbuilder .fields textarea,
#fbuilder .fields select{color:#FFFFFF;}

The upper code works fine but the lower code with #fbuilder doesn′t work. What am I missing? It′s the same link as above.

Best regards,
H

Hello @io978465132

Please, enter the CSS rules with the !important; modifier.

#fbuilder .uh {color:#003265 !important; text-shadow: none !important;}
#fbuilder .cff-checkbox-field .dfield label{color:#FFFFFF !important; text-shadow: none !important;}
#fbuilder .fields input,
#fbuilder .fields textarea,
#fbuilder .fields select{color:#FFFFFF !important;}

Best regards.

Hello,

Thank you. It still doesn′t work. I have also tried to use cff-calculated-field and cff-number-field to change the colors of those fields according to the FAQ but it doesn′t work. What am I missing?
Best regards
H

• This reply was modified 5 years, 9 months ago by io978465132.

Hello @io978465132

Please, indicate the styles you are entering.

Best regards.

Hello,

I used the following code:

.cp_cff_professional{background:#F0F0F0 !important}
.cp_cff_professional .pbSubmit,
.cp_cff_professional .pbNext,
.cp_cff_professional .pbPrevious{background:#003265 !important;color:#FFFFFF !important;text-shadow:none !important;}

#fbuilder .uh {color:#000000 !important; text-shadow: none !important;}
#fbuilder .cff-checkbox-field .dfield label{color:#FFFFFF !important; text-shadow: none !important;}
#fbuilder .fields select{color:#ffffff !important;}
cff-number-field{color:#003265 !important;}
cff-calculated-field{color:#003265 !important;}

Best regards,
H

Hello @io978465132

Both: “cff-number-field” and “cff-calculated-field” are class names, so, they should be declared with a dot sign in front, furthermore, the class names are assigned to the fields, and the field are formed by a label, the input tag and the instructions for the users. So, if you want to change the color of input tags in the fields, the correct would be:

.cff-number-field input{color:#003265 !important;}
.cff-calculated-field input{color:#003265 !important;}

Best regards.

Hello,

Ok thanks. Those to worked for the text in the field. But how do I change the color of the number and calculated fields? Right now the color are darkbrown. The same goes with the dropdown fields. I want to change the color of the fields, not the text.

On another note, both the field labels and the choices for the checkboxes are white. I tried .cff-checkbox-field input{color:#003265 !important;} but didn′t have any luck with that. How do I change the colors for the checkbox choices and the fieldlabels for the numberfields/caluclated fields?

Best regards,
H

Hello,

I found the css code for the labels but are still struggling with the brown color of the number-, calculated- and dropdown fields. Im using .cff-dropdown-field{background:#003265 !important;color:#003265 !important;} but it doesn′t work. I think I need to change background to something else but couldn′t find it in the FAQ.

Best regards,
H