The “Caculated Fields Form” plugin includes multiple predefined templates to be used in the forms. The template is selected from the “Form Settings” tab, in the toolbar of the form builder, but can occur that the predefined templates are not sufficient to create a form with the look and feel you want.
The template’s module in our plugin, can be extended easily to create new designs, to be used in the forms of website.
Into the “/wp-content/plugins/calculated-fields-form/templates” directory there are multiple folders, a folder for each template. The folders names have not restrictions, you simply should create a new folder for the custom template, with the name you want.
The only one required file in a template is the “config.ini” file, whose structure is:
prefix=”cp_cff_custom”
file=”style.css”
title=”Custom Template”
thumbnail=”thumbnail.jpg”
description=”This is my custom template”
The description of attributes:
prefix: Classname, applied to the form’s container. Its value should be unique for all templates on website (required attribute).
file: Name to the CSS file with the styles to define the appearance of form.
title: Name of the template, displayed in the dropdown list on form settings.
thumbnail: Name of image file, displayed when the template is selected (the image file should be stored in the template directory).
description: Description to display when the template is selected.
To implement a specific design to your forms, creates a CSS file, in the template directory (uses the file’s name you prefers, but assings the file name to the file attribute in the config.ini file)
the stylepublic.css file defines the default appearance to all forms on website. The classes definitions start with #fbuilder, the ID value assigned to the form, to prevent conflicts with styles defined by other plugins or themes in the website. For extending and modify the styles from the custom template, should redefine the styles in your own CSS file, but prefixing the styles definitions, with the value entered in the prefix attribute of config.ini file.
I’ll explain the process with an example. Suppose you want apply to the forms titles, the style rule font-size:1.5em, and you have defined the text: cp_cff_custom as the value of the prefix attribute, in this case the style’s definition in the CSS file would be:
.cp_cff_custom #fbuilder .fform h1{font-size:1.5em;}
Apply this logic for the rest of classes in the CSS file.
After complete the template, you simply should select it from the settings page of the forms.