Webflow Forms

Input Number & Decimal Places

No items found.

Perhaps surprisingly, when you use a Number type field, it will not allow you to enter decimal places. When you attempt the submit the form, the browser will consider a number with decimal places to be invalid.

This is due to the design of HTML5's INPUT type=number element, and the way most browsers handle it.

So what if you need decimal places?

Solutions

To allow decimal places in your number

Add custom attribute named step to your Input field and specify the number of optional decimal places you want to allow;

  • .1 for one decimal place e.g. 23.4
  • .01 for two decimal places
  • .001 for three, and so on
  • or any for an unlimited number

For a specific number of decimal places

If you want to require a certain number of decimal places, you can accomplish that with a pattern.

Add a custom attribute named pattern to your Input field and specify the following regex string.

  • ^\d*\.\d$ to require exactly one decimal place
  • ^\d*\.\d{2}$ to require exactly two decimal places
  • ^\d*\.\d{2,4}$ to require two, three, or four decimal places

Adjust to your liking.

References

Allow 2 decimal places in <input type="number"> - StackOverflow

Is there a float input type in HTML5? - StackOverflow

Overview
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
Intro
100
Input Number & Decimal Places
Intro
101
WIP
Numeric Range Sliders
Intro
102
WIP
Multi-Select Dropdown
Intro
104
Forms Validation
Forms Validation Basics
Intro
200
Input Types
Intro
201
Using Regex Patterns in Forms Validation
Intro
202
Custom Validation Errors
Adv
203
Forms Validation Techniques
Validating Emails
Intro
301
Blocking Free Email Provider Addresses
Intro
302
Requiring Checkboxes
Intro
302
International Phone Numbers
Int
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
Intro
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms
Intro
501
SPAM Blocking Techniques
CAPTCHA Approaches
601
No items found.
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.