CodePeople2

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 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

Best regards.

Hello @imrobstephens

Have you had the opportunity to install the latest plugin update (version 5.4.7.9) and verify whether the issue has been resolved on your end? Please remember to clear both your website and browser caches after installing the update.

Best regards.

Hello @imrobstephens

That seems the website is blocking the form’s URL (https://bluckpbla6.nimpr.uk/?cff-form=10)
Could you please contact us through the plugin website (https://cff.dwbooster.com/contact-us) to check the issue in detail.

Best regards.

Hello @blake232

Thank you very much for the confirmation and your feedback.

We are glad to know the issue has been resolved successfully.

Best regards.

Hello @blake232

Did you try temporarily disabling the plugins that handle the website cache and editing the form in the browser’s incognito/private mode to ensure the issue is not being caused by cached files?

Sometimes JavaScript or CSS files cached by optimization or cache plugins can prevent the latest changes from loading correctly.

Best regards.

Hello @swingsprite

That’s exactly the problem, the audio files are in the root site. The root site is a different domain with an .htaccess to protect them, for this reason the players in the staging website cannot access these audio files.

Best regards.

Hello @crystaltm

Thank you very much for sharing your solution—it will certainly help others facing a similar situation.

Best regards.