Formatting field

Hello @bernard57

Thank you very much for using our plugin. A field has multiple components, the label, the input box, the instructions for users, the div and span tags that contain those elements, etc.

When you enter a class name through the “Add CSS Layout Keywords” attribute, it is applied to the DIV tag that contains the field’s components.

So, assuming you enter the class my-field through the “Add CSS Layout Keywords” attribute in the calculated field (through the attribute, you enter only the class names, but you define the styles via the “Customize Form Design” attribute in the “Form Settings” tab) but want to modify the background color of its input tag (to green) and its text color (to white).

In this hypothetical example, you can enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

.my-field input{background: green !important; color: white !important;}

Note I used the !important; modifier with the CSS rules to increase its precedence.

Best regards.

Thanks for your reply. The situation for me is a bit more complicated. I am using the calculated fields in my form so I can add symbols before or after the numbers, e.g. kg etc. I have styled all these fields and want to distinguish via style two other types of fields for subtotals and grand totals. Any suggestions about an elegant solution please.
Also I find navigating the form challenging as when I delete or add a field the cursor goes to the end of the form. Can I change that behaviour? Copying and pasting div sections to other places is also not easy by dragging and dropping. Any other way to do this?
Thanks for any further tips

Hello @bernard57

To customize the appearance of two fields in the form with different styles, you only should assign them different class names (via their “Add CSS Layout Keywords” attributes) and define the new class names through the “Customize Form Design” attribute in the “Form Settings” tab.

Please, read the previous entries in this thread.

About form navigation, you can drag and drop the controls from the controls bar at the left to the dashboard, or you can press the control.

If you press the control, the new field will be inserted in one of the following places:

• If no field is selected in the form, the plugin inserts the new control at the end.

• If there is a field selected, the plugin inserts the new control below it.

• If the selected field is a container (DIV or Fieldset), the plugin inserts the new control inside the container.

Note you can duplicate a field by pressing the corresponding icon (the icons appear at the bottom-right of the field in the dashboard). The new one is inserted below the original one. And the same applies to the containers.

Best regards.