Forums

I am trying to add a custom mask to a field on my form capturing phone numbers. I want the format to be 999-999-9999. However when I try to enter that into the mask box it does not work. Selecting the pre-configured phone mask works, but I cannot get the custom one to work no matter what I try. Any advice?

Hi,
I had the same problem as you.
After several tests, to get the mask to work I had to add it in the format below:
​

'mask:' '999-999-999'

with the single quotes.


I hope it helps you and helps other users. 🙂

The input mask functionality is based on Robin Herbots "Inputmask" jquery bundle. You can see examples of various options here https://github.com/RobinHerbots/Inputmask/tree/4.x (Note the version of the code branch, CF7 is using version 4.0.1-25 as of this post)
​
That being said, u2net was close, however note the placement of the quotes and the separator colon : ... the correct custom masking format is:

'mask': '999-999-9999'

Using the default 9 for numerics, a for alphabetical, and * for alphanumeric
​
If you look at the resulting HTML code generated by ChronoForms 7, it renders using the data-inputmask attribute method referenced in the author's readme. In spite of some of the details provided there, as u2net stated, the 'mask' is required for the form to render properly, otherwise errors are generated in the output
​
Hint: if you look at the browser console in the form, and you see an error--Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data, that probably means you have a syntax error in your mask attribute.. Just watch the placement of the : colon between the key 'mask' and your custom mask.
​
There are several other options within the mask library provided. These options can be specified on the custom mask input for your field separated by comas. For example, a mask to accept up to 20 characters...

'mask': 'a', 'repeat': 20, 'greedy' : false

The mask will prompt for at least one character, and allow up to 20 and using greedy, it will show without showing the mask input __ placeholders.
​
Some other examples:
​

'regex':'[0-9]*'

Uses regex expression instead of a mask (note that 'mask' is not entered.
​

'mask': 'a', 'repeat': 20, 'casing': 'upper'

Accept up to 20 characters and convert input to uppercase. Options are upper/lower/title
​

'mask': '***** ***** *****', 'tabThrough': true

Enables using the tab for input between each part of the mask. Otherwise tab will move you to the next input on your form.
​

'mask': '9,999,999.99', 'rightAlign': true, 'numericInput': true

example of aligning input to the right as well as having numeric input entered from right to left.