Hello @blake232
Thank you very much for using our plugin. In this case, you do not need any additional JavaScript code. You only need to configure the Calculated Field and HTML Content field correctly.
If you would like to use a comma as the decimal separator, enter it in the “Decimals separator symbol” setting of the calculated field. Alternatively, if you want to use the comma for thousands grouping, enter it in the “Symbol for grouping thousands” setting instead. Please do not use the same symbol for both settings, as this creates ambiguity when the plugin processes the calculated results.
Now, assuming you want to display the result inside an HTML Content field, and the calculated field is named fieldname123, you simply need to insert a tag in the HTML Content field that uses the data-cff-field attribute, for example:
<div data-cff-field="fieldname123"></div>
I used a <div> tag in the example, but you can use any HTML tag you prefer. The data-cff-field attribute tells the plugin to display the value of fieldname123 inside that element automatically.
Please watch the following video for a step-by-step demonstration:
https://cff.dwbooster.com/resources/wordpress-forum/2026-05-28/video1.mp4
Regarding your second question, if you want to organize the fields into asymmetric columns, I recommend not using div fields for the layout. The predefined CSS classes distributed with the plugin are a much better alternative.
You can think of each row as being divided into 12 columns. By using the predefined class names, you can specify how many columns each field should occupy. Additionally, you can define different layouts depending on the screen size, making the form fully responsive.
For example, suppose you want the Number and Calculated fields to appear in the left column occupying 1/3 of the row, and the HTML Content field in the right column occupying 2/3 of the row. On smaller screens, you want both columns to have the same width.
In that case, you can assign the following class names through the “Add CSS Layout Keywords” attribute of each field:
col-sm-4 col-xs-6 → for the left columncol-sm-8 col-xs-6 → for the right column
This means:
- On regular screens, the left column will occupy 4 of 12 row parts, while the right column will occupy 8 of 12 row parts.
- On small screens, both columns will occupy 6 of 12 row parts, resulting in two equal-width columns.
Please watch this new video for a complete example and visual explanation:
https://cff.dwbooster.com/resources/wordpress-forum/2026-05-28/video2.mp4
Best regards.
