Written by
Pavel Karpisek
Pavel Karpisek
Published on
March 23, 2023
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

<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.

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.
Home
Reviews
Ynvisible
Blog
Contact

Suggested articles

Unleash Your Imagination: Grab Our Studio's Epic Capability Deck!

Thanks for downloading the
Epic Capability Deck

  1. Check your mailbox
  2. Click on the Link
  3. Download the PDF
Oops! Something went wrong while submitting the form.