mask phone field

How To
1

Hi!
How do I add an input mask to the phone field in the form?

1 Like
2

Hi @rostyslav,

just add a new field, set it to “tel” and your done :smiley:

Best regards,
timmse

image
image1843Ă—1380 55.7 KB

3

Hey timmse, I was about to submit a bug report and found this. I just want to verify first I’m not doing something wrong.

I have a simple contact form here:
https://kitchenercleaningservice.ca/contact-us/

The phone number is set to Type = tel and the number is not being masked.

image
image997Ă—846 44.3 KB

This site is using Bricks 1.4 RC2.

4

Also, the field is allowing all characters. Is it possible to limit this to 0-9, () and - (hyphen)?

5

Hi Chris,

I just realized that I completely misunderstood the original question at the time :expressionless:, so thank you for bringing up the subject again :v:

Currently, it is not possible to mask the phone number, i.e., specify a format. The Bricks form is kept as simple as possible to cover the most common things, but I will ask the team about it.

Best regards,
timmse

2 Likes
6

Thanks Stefan. I think there’s a bare-bones functionality all forms should have which includes:

  • Spam protection
  • Basic field validation (required, email, phone number don’t contain letters)
  • Basic/Minimal field masking (telephone numbers)

Anything else, I would definitely agree that you should leave that to a more robust form solution. We use Fluent Forms and we’re very happy with it, but it’s nice to be able to use something more lightweight when the site requirements are very minimal.

3 Likes
7

Hi, ChisCastillo, you can use a Form Field Type NUMBER for now,
and input the minimum and max number for example
MIN = 111111111 and Max 999999999 when the person fills the form can only enter a number between min and max to make it more simple lets say their is only 10 phone numbers in the world from 1 to 10 then 1 is minimum and 10 is max if a user is trying to enter 11 or 20 and so on it will not allow them or if they try to do 01 or 002 or something like that they cant, here is a picture i made for you assumming phone numbers start from 111111111 and max 999999999, let me know.

image
image472Ă—748 6.96 KB

8

Hey, the number format works to restrict the total number of characters in the phone number, but still doesn’t format the number like (###) ###-####. Would be nice to have basic input masking eventually. The TEL format should also have a phone number length option to force the user to enter in the right number of characters, and mask the number (eventually).

3 Likes
9

Totally agree, missing this in tel field (###)###-##-##

2 Likes