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).
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?
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:
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