Format Numbers & Currencies ❺

Give your number & currency display the look you want

Webflow supports the storage of numbers, including integers and decimals, in the CMS, but has virtually no formatting options.

For decimal values, Webflow allows you to specify the number of decimal places you want to see in the CMS-bound field, however there are no options for commas, units, or currency formats.

This library allows you to format those numbers in commonly recognized formats, including

• usd - US currency ( also useful for AUD, NZD, and others )

• gbp - British pound sterling

• eur - European currency

• jpy - Japanese currency

• % or percent - percentages

• , or comma - thousands formatting with commas

And more will come as users request.

Demonstration

Formatting Numbers, Currencies, & Dates - WebflowFormatting Numbers, Currencies, & Dates

Cloneable

Usage Notes

wfu-format attribute

Use wfu-format directly on the CMS-bound numeric field.

wfu-format = usd

Also, use Webflow’s designer to format the number of decimal places you want to see, as we’ll apply this in your formatted result.

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-format.min.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-format.min.js"></script>

STEP 2 - Apply wfu-format to the elements you want to format

See above for details.