Form field: setting the input type to "number"

Community resources Product feedback
1

Hi,

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?

Thanks!

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

1 Like
2

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

3

Thanks Sergie.

Any idea how I could rectify it in the meantime?

4

Sergie, You have already used this feature?

5

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:

http://forum.webflow.com/t/survey-help-webflow-improve-forms/29828

2 Likes
6

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,
Sean

2 Likes
7

Hey,

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

EMBED ELEMENT - HTML

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

i.e.
<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">

FORMAT NUMBER - JAVASCRIPT

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

<script>

 $('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, ",")
        ;
      });
    });

</script>

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

REMOVE NUMBER SPIN BUTTONS - CSS

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

<style>

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

</style>

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

4 Likes
8

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:

Thanks,
Sean