Tips and Tricks: Using “Instruct. Text” as auxiliary fields to modify the form’s appearance

All fields in the forms created with the “Calculated Fields Form”  have the attribute: “Add Css Layout Keywords”, that allows to assign a class name to the fields to modify their appearance.

The classes names can be defined in any of CSS files used in the public website, but: what happen if you want to update the active theme? or if you have defined the new classes in the CSS file of plugin, and you want update the plugin?

In both case you should redefine the classes in the new CSS files, or will lose the designs of the fields.

An easy solution to prevent future headaches, is to use an “Instruct Text” field as auxiliary to define the new classes directly in the form.

For example, suppose you want display the label of the calculated field, fieldname1, in bold, and in red color:

  1. Selects the calculated field and type the class name in its “Add Css Layout Keywords” attribute, for example: myclass
  2. Inserts an “Instruct. Text” field in the form, and enter, as the field’s title, the class definition, with the style tags:

<style>.myclass label{color:red !important; font-weight:bold !important;}</style>

and that’s all.

Now, you can update the plugin, and templates, without affecting the field’s appearance.

 

Important Update: We’ve included a new field, called: “HTML Content” to insert HTML tags directly on form.