Title: Adding Commas to HTML Content Blocks
Last modified: May 28, 2026
---
# Adding Commas to HTML Content Blocks
* Resolved [Blake232](https://wordpress.org/support/users/blake232/)
* (@blake232)
* [1 week, 4 days ago](https://wordpress.org/support/topic/adding-commas-to-html-content-blocks/)
* Hi,
* I’m trying to determine how to add commas to the results of my calculations.
The results are populating in an HTML Content field. I’ve tried asking claude
and GPT but they’re wanting me to do this with JavaScript and the on page HTML
blocks are not running the code.
What is the best way to get commas added to
the results? On a side note I’ve watched [https://cff.dwbooster.com/blog/2019/01/06/columns](https://cff.dwbooster.com/blog/2019/01/06/columns)
and am unsure of how to use the div field to build out 2 columns split to 1/3
and 2/3. If there is a quick answer for this it would be much appreciated!
* Thank you!
* The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-commas-to-html-content-blocks%2F%3Foutput_format%3Dmd&locale=en_US)
to see the link]_
Viewing 2 replies - 1 through 2 (of 2 total)
* Plugin Author [CodePeople2](https://wordpress.org/support/users/codepeople2/)
* (@codepeople2)
* [1 week, 4 days ago](https://wordpress.org/support/topic/adding-commas-to-html-content-blocks/#post-18921835)
* Hello [@blake232](https://wordpress.org/support/users/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:
* ```wp-block-code
```
* I used a `` 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](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 column
- `col-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](https://cff.dwbooster.com/resources/wordpress-forum/2026-05-28/video2.mp4)
* Best regards.
* Thread Starter [Blake232](https://wordpress.org/support/users/blake232/)
* (@blake232)
* [1 week, 4 days ago](https://wordpress.org/support/topic/adding-commas-to-html-content-blocks/#post-18921847)
* Thank you!
Viewing 2 replies - 1 through 2 (of 2 total)
You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-commas-to-html-content-blocks%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.
* 
* [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
* [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
* [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
* [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)
## Tags
* [columns](https://wordpress.org/support/topic-tag/columns/)
* [comma](https://wordpress.org/support/topic-tag/comma/)
* [html content](https://wordpress.org/support/topic-tag/html-content/)
* 2 replies
* 2 participants
* Last reply from: [Blake232](https://wordpress.org/support/users/blake232/)
* Last activity: [1 week, 4 days ago](https://wordpress.org/support/topic/adding-commas-to-html-content-blocks/#post-18921847)
* Status: resolved