How can I auto-format an input field in Webflow to display as local currency using the Mask Money jQuery plugin?

Published on
September 22, 2023

To auto-format an input field in Webflow to display as local currency using the Mask Money jQuery plugin, you can follow these steps:

  1. Add the jQuery library: First, you'll need to add the jQuery library to your Webflow site. You can do this by adding the following code snippet before the closing </body> tag in your site's custom code:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  1. Add the Mask Money plugin: Next, you'll need to add the Mask Money plugin to your Webflow site. You can do this by adding the following code snippet after the jQuery library in your site's custom code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
  1. Create an input field: In Webflow, create an input field where you want to display the local currency. Give it a unique class or ID so that you can target it with the jQuery plugin.

  2. Add the jQuery script: Still in your site's custom code, add the script that initializes the Mask Money plugin and formats the input field as local currency. Replace .your-input-class with the class or ID of your input field:

<script>$(document).ready(function() {   $('.your-input-class').maskMoney({ prefix: '€', allowNegative: false, thousands: '.', decimal: ',' });});</script>

Now, your input field should automatically format any entered value as local currency, with the Euro symbol as the prefix, decimal comma, and thousands separator dot. You can modify the options passed to maskMoney({...}) to fit your specific currency formatting requirements.

Make sure to publish your Webflow site for these changes to take effect.

Additional Questions:

  1. How do I add custom code to my Webflow site?
  2. Can I use multiple Mask Money input fields on the same page?
  3. Are there any other jQuery plugins I can use for input field formatting in Webflow?