0

I have a number of forms where users must enter phone numbers, credit card numbers, amounts, e-mail addresses and I am using placeholders for these fields in hope to guide the user on what to type in and how. Because I get users who will type in www.yahoo.com for their e-mail or "$1,150 US" for amount or who knows whatever else anything except a phone number for their phone number.

So, after I've added those placeholders my tech support gets hammered with calls that the web apps are not working, that they are trying to type in their card number but they can't because there is already a card number there and they can't delete it, and OMG if I enter my card number will it show up for someone else?!

So I guess I am looking for suggestions as to how I should make them placeholders appear less like "input text" (that can't even be deleted)...would appreciate any ideas!

Improve this question
3
  • 3
    Seriously, did you need that title? Just keep it civilized
    – Devin
    Dec 7, 2017 at 4:22
  • @Devin - I think it was just Darth Vader being Darth Vader :P
    – Shreyas Tripathy
    Dec 7, 2017 at 4:34
  • Sorry, but isn’t that what they are, what should I call them web-enabled uneducated individuals with mental disabilities?
    – Nick M
    Dec 7, 2017 at 9:29

1 Answer 1

Reset to default
2

Placeholders in Form Fields Are Harmful

You should simply avoid using placeholder: there is plenty of reasons... [nngroup.com / Placeholders in Form Fields Are Harmful]

Go input masking

If you want to help your user fill in forms correctly you should consider to widely adopt input masking, so that user input is immediately "validated" in a subtle and useful way.

Input masking on CC info

Input masks applies to many input files, like Credit Card numbers, Phone numbers, Amounts... You could go even further by stripping invalid characters from inserted text: if a user types "$1,150 US", you should be able to clean the input data in order to obtain the value "1150", while not blaming the user for typing invalid characters.

Improve this answer
2
  • 1
    My phone number has 11 digits (including city code) while my parents' has 10. Some credit cards have 10 digits, some have 12, and if I remember correctly, there are 9 digits credit cards. How do you mask and convey that information? It looks way more confusing than just placeholders, unless you only accept VISA and mastercard and your site is localized to places where all phone numbers are the same
    – Devin
    Dec 7, 2017 at 4:16
  • Yeah I get users from lots of countries...in some, phone numbers have 6 digits only and they may use e-mail adresses like blah@yadda.co.th. Others have weird post codes such as the UK. Localizing forms like this would be a dev nightmare, the app is huge. Since yesterday I’ve added a bit of JS to hide the placeholder on .focus and hover and restore it on .blur...temporary fix.
    – Nick M
    Dec 7, 2017 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.