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

‍

‍

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.