Is there a way to add 3 digit dots (or commas) separators in CMS numbers fields in Webflow?

Published on
September 22, 2023

Yes, in Webflow CMS, you can add 3 digit dots (or commas) separators to numbers fields by utilizing custom code and JavaScript. Here's how you can achieve this:

  1. Go to your Webflow project and open the Designer.
  2. Select the CMS Collection that contains the numbers field you want to adjust.
  3. Click on the Field Settings for the specific numbers field you want to add the separators to.
  4. Scroll down and click on the "Custom attributes" section.
  5. Add a custom attribute with the name "class" and the value "js-comma-separated".

Now that you've set up the custom attribute, you'll need to add some JavaScript code to handle the formatting of the numbers field. Here's the JavaScript code you can add:

<script>  (() => {    const numberFields = document.querySelectorAll('.js-comma-separated');     numberFields.forEach(field => {      field.addEventListener('input', () => {        const value = parseFloat(field.value.replace(/,/g, ''));         field.value = numberWithCommas(value);      });    });     function numberWithCommas(number) {      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');    }  })();</script>

Now, whenever you enter a number in the affected CMS numbers field, the JavaScript code will automatically add the 3 digit dots (or commas) separators to the displayed value.

Please note that this approach requires adding custom code to your Webflow project, which is only available for Webflow's paid plans. Additionally, make sure to test the functionality thoroughly before implementing it live.

Additional Questions:

  1. How can I add separators to numbers in Webflow CMS?
  2. What is the easiest way to format numbers in Webflow CMS?
  3. Can I customize the way numbers are displayed in Webflow CMS?