5 min read

How to format a price input in Webflow

How to format a price input in Webflow

Related articles:

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

    .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, ",");

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.

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Website pre-launch checklist

69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.

You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.

€30 Now: €9.00
Check it now

Suggested articles