How to format a price input in Webflow

Related articles:

• Phone number input formatting and validation in Webflow

‍

See how to format a price input in Webflow in action: https://how-to-webflow-clonable.webflow.io/custom-price-number-formatting-in-webflow

1) Create the input field

• Insert Form element to the Webflow
• Style it
• Make sure the ID of the element is "application-form-income"‍
• Make sure the type of the form is "Plane" NOT "number"

‍

2) Add Javascript

• Open the Pages
• Open settings of the page
• Before the </body> add following code

‍

<script>
  document
    .getElementById("application-form-income")
    .addEventListener("input", function (e) {
      let input = e.target;
      let value = input.value.replace(/[^\d]/g, ""); // Remove any non-digit characters
      value = value.replace(/^0+/, ''); // Remove leading zeros
      let formattedValue = formatNumber(value);

      input.value = formattedValue ? "$" + formattedValue : "";
    });

  function formatNumber(number) {
    return number.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

‍

3) Code explain

‍

This line will fetch the input element

‍

‍

This function will

• Target the input
• Replace all the non-numeric elements
• Remove zeros if they are leading (try it - you will not be able to type 0 when is empty)
• Formats the user's input to display as a currency value by calling the formatNumber function.

‍

‍

The last function takes a number as an argument and formats it as a currency value. The function uses a regular expression to add commas to separate thousands, and returns the formatted value.