Formatting Numbers

Currencies, Internationalization, and more...

Format numbers

Add advanced algorithmic filtering to any element on your page.

  • + Easily format CMS numbers, using a single attribute.
  • + Recognizes decimal formatting, and applies that setting to your formatted output
  • > You can enable/disable this by choosing your number format as e.g. 1 vs. 1.0.
  • Executes once, on page load.

Notes;

  • + The number of decimal places is easily specified by the formatting rule you set on the field.
  • Webflow does not let you specify more decimal places than you have in your source field data, so make certain your source data is correct.

Formats;

  • usd
  • gbp
  • jpy
  • eur
  • %

DEMO

Here is a numeric decimal field in the CMS, which is output in a variety of formats. The first two columns use only Webflow's default formatting options regarding decimal places.

The subsequent columns are formatted by the WFU library using a recognizable formatting code, typically a 3-letter currency code.

-
-
usd
usd
jpy
jpy
gbp
gbp
%
%
eur
eur
4928
4927.90
4928
4927.90
4928
4927.90
4928
4927.90
4928
4927.9
4928
4927.90
72166
72166.00
72166
72166.00
72166
72166.00
72166
72166.00
72166
72166.0
72166
72166.00
55789
55788.54
55789
55788.54
55789
55788.54
55789
55788.54
55789
55788.5
55789
55788.54
31592
31591.52
31592
31591.52
31592
31591.52
31592
31591.52
31592
31591.5
31592
31591.52
18908
18907.78
18908
18907.78
18908
18907.78
18908
18907.78
18908
18907.8
18908
18907.78
94335
94334.76
94335
94334.76
94335
94334.76
94335
94334.76
94335
94334.8
94335
94334.76
36214
36213.94
36214
36213.94
36214
36213.94
36214
36213.94
36214
36213.9
36214
36213.94
57421
57420.80
57421
57420.80
57421
57420.80
57421
57420.80
57421
57420.8
57421
57420.80
69677
69677.32
69677
69677.32
69677
69677.32
69677
69677.32
69677
69677.3
69677
69677.32
51997
51997.41
51997
51997.41
51997
51997.41
51997
51997.41
51997
51997.4
51997
51997.41

How to implement

Uses WFU.

Formatting involves two parts.

First, if the number is a decimal, you decide how many decimal places you want by determining that in the designer. Select the CMS-bound text element, and choose the number of decimal places you want to show.

Second, apply a custom attribute to the element, with the format you want applied.

See known formats above, to the left.

Webflow Custom Attribute
Name
wfu-format
Value
usd