Formatting Fields as Currency

The Problem

A common question often seen in the Formidable Slack Community or on the old Formidable Community Forum is:

How do I format a read-only total field to be shown with thousands-separator in a form?

Formidable Slack Community, #How-To

Resolution

Sometimes formatting fields as numbers requires support that goes beyond Formidable's built-in capabilities. In such cases, we've had success using the numeral.js Javascript library. This tried and true library, first released by Adam Draper in 2012 under the MIT license, is reliable and trustworthy.

To use this tool, the library needs to be installed on your site and there are two ways to do this.

The first is to download the numeral.js library and upload it to your server through FTP. Then using the WordPress enqueue function, you load the server on your site by adding one line of code to your functions.php file:

The second way of installing the script is to load it directly from the Developer's content distribution network by adding this line of code to your site's header or footer:

Once the script is loaded, you can format a read only field by adding some jQuery to your form as in this example:

The Result

Here's a sample form that demonstrates the result.

Pro Tip: The formatted numeral.js output is a string. Make sure you use a text field for your read only total.