Streaming live at 10am (PST)

Form field: setting the input type to "number"



I'm creating a payment form, where users will enter credit card numbers and CVV numbers.

I'd like to set the input type of the fields to = "number" so if users are accessing the form on a touch device, the correct keypad will appear when they start typing.

I tried creating a custom attribute and setting the value to "number". But it doesn't change anything.

Can anybody help?


PS: And may I suggest that number should be added to the list of options for input settings (along with plain, email and password).


Thanks for the suggestion @kingcolers. I've added it to our to-do.


Thanks Sergie.

Any idea how I could rectify it in the meantime?


Sergie, You have already used this feature?


Hey @Krovopusk and @kingcolers we haven't implemented it yet, but it's something we're putting more research in for this year. Please leave your feedback in the survey here:


Another year passes without this simple form field type! So to add a form to a site we have to export it and host it elsewhere just because of this missing field?

Or does someone have a workaround?

Many thanks,



I recently had to do this and here are a couple of things I learned.


You can simply use an "embed" element and paste in the html with type="number"

<input class="field w-input" data-name="Phone Number" id="Phone-Number" maxlength="256" name="Phone-Number" placeholder="Enter your phone number" required="required" type="number">


If you'd like to format the number with commas - i.e. 1,000,000 - then DO NOT set the type for the input - simply give the input field a class of format-number

then paste this script into the footer


 $('input.format-number').keyup(function(event) {

      // skip for arrow keys
      if(event.which >= 37 && event.which <= 40) return;

      // format number
      $(this).val(function(index, value) {
        return value
          .replace(/\D/g, "")
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",")


If you want to use a different a different punctuation between the numbers, change the comma to in parentheses at the end of the second .replace line to whatever character you'd like to use


To remove the number spin buttons that appear in an input field when type="number", you can insert this piece of css:


  input[type=number]::-webkit-outer-spin-button { 
      	-webkit-appearance: none; 
      	margin: 0; 


Any questions, just ask. Best of luck with it.


Thanks for the detailed info Diarmuid! Very much appreciated and I forgot completely about the embed option (getting too used to not working with code in Webflow!).

I'll test these out and get back to you if I have any questions and I'm sure others will find these useful too :slight_smile: