JotForm User Guide / Advanced Features /

Getting Started with the Basics of Input Masking

Getting Started with the Basics of Input Masking

Using a field input mask might seem like one of those things that you might not want to ever use a whole lot but, the reality is that using a masking capability can actually prove to be quite useful in a lot of different situations.

For the purposes of getting you started, we'll be taking a look at two different scenarios.

Scenario #1:

For the first scenario let's look at this one using a simple TextBox field so go ahead and add one to your form right now if you haven't already.

Now to view the "Input Mask" option, you can follow the screenshots below: 

In JotForm Version 4:

If you are using JotForm Version 4 form builder, follow the screenshots below. Select the text box field, click the gear icon and open the "Options" tab.

Scroll down and find the "Input Mask" option, make sure to enable it. 

You'll notice right away three different symbols mentioned and these masks are pretty much as stated for each of them. 

@  =   Masks Letters

#    =   Masks Numbers

*    =   Masks Letters & Numbers

 

To explain the above in a simplified manner the Input Mask basically gives you much greater control over what is entered and therefore limits your users to, however, you have setup your masked characters.

That might sound a bit confusing still so let's break this down even further by taking a look at these examples below.

Example A:

In this example lets say for instance you want to name cities that start with "St" (Saint) such as "St Augustine" which would look like this "@@ @@@@@@@@@".

Back-end of your form:

 

Front-end of your form:

 

 

You could even include the St. in the Mask if you wanted:

 

 

 

Example B:

Now let's take a glance at this in another instance where you might want to show a set of spaced out numbers which would show up like this "# # # # #".

Back-end of your form:

 

Front-end of your Form:

 

  

Example C:

A good use for the Numbers Mask would also be for advanced custom dates where you might not want to use the standard date fields such as "##/##/####".

Back-end of your Form:

 

Front-end of your Form:

 

 

Example D:

Both the above are good and all, but what if you needed something more than that, but didn't need that much information such as in an instance where you only want just the street address of where someone's business is located.

So in this particular case, you would want to combine the above by using both @ and # together and that could look something like "#### @@@@@@@@@ @@".

Back-end of your Form:

Front-end of your Form:

 

 

Example E:

Also, don't forget that you can additionally allow either of these, but still control yet limit this with the third option using the * (asterisk) and that would look a bit like "*** ** **** ** ***"

Back-end of your Form:

 

Front-end of your Form:

 

 

Example F:

But what if none of the above was good enough for your situation? 

What if you work in the Government, Legal, or even a Car Parts Company? 

You can do that too by compartmentalizing your characters to create something systematic such as  "#@-#**#-#@".

Back-end of your Form:

 

Front-end of your Form:

 

 


Now, with that out of the way giving you a basic grasp of masking on text boxes let's take a different approach at looking at this another way using the second scenario for a Phone Field.

 

Scenario #2:

Sure, using the masking capability is handy but what if you're a phone directory provider searching for 1-800 numbers to list or you have users with foreign phone numbers and such?

Instances like this are where input masking on a phone field would be useful just as much to give you control over how your phone numbers are entered and used.

Example A:

For the first example, let's start again but this time around add a phone field.

You should be able to access the "Input Mask" option the same way we described earlier in this guide.

 

You'll notice this time around you can only use a Number Masking with # and you will also see the default phone number input change from two inputs to one input which is additionally prepopulated with "(###) ###-####"

Back-end of your Form:

Front-end of your Form:

 

 

Example B:

Now for using this for 1-800 numbers with a phone number, you could make it something like "1-(8##)-###-####" to let your users know that's the type of info needed.

Back-end of your Form:

Front-end of your Form:

 

Example C:

As another example let's say you're planning on running an outreach call program in Australia and you'd need to gather phone numbers limited to that formatting so for this it would end up looking something like "+(##)#########" but, you can format it to any country if elsewhere. 

Back-end of your Form:

Front-end of your Form:

 

 

 

So anyway, we really hope this helps to clarify everything when using Input Masking.

 

Feel free to play around with this option. If you have any suggestions, concerns or questions, feel free to comment below or post a question on our forum page.

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

67 Comments...

See all comments
  • srima

    When we use short answer with the help of using input mask can you suggest me how can we enable calculation vaules in it.

  • JBsignsbvba

    Hello,

    The field must contain whole numbers, nothing after the comma. In other words, it must not be possible to insert a comma or a dot. Please find a solution.

    Thanks

  • Apotts

    I am using the phone number and DOB fields on my form and seems as though someone could enter letters instead of numbers. Is there a way to restrict and allow only numbers for both fields? Also, is there a way a person can select from a calendar when entering in their DOB?

    Thank you!

  • mikecarson2018

    Is there a way to shrink the space between questions in order to shorten a form?

  • iptc

    How can I but mask for capital letters

  • darwinrangel35

    Hola como hago para que solo puedan escribir en Myúsculas????

  • sfcum

    Bonjour,

    Merci pour ce tutoriel.
    Je voudrais savoir comment faire pour obliger la saisie en MAJUSCULE dans un champs texte ?
    En effet, je souhaite que les personnes écrivent leur Nom de famille en MAJUSCULE.

    D'avance merci

  • Sandradp

    Buenas tardes!
    Realice un formulario "encuesta covid" para todos los trabajadores. La consulta es: como le hago para que les llegue al correo de cada uno de ellos, ya que deben mostrar que hicieron la encuesta para poder ingresar a la obra.

  • bellneu

    The help does not cover input masks that may vary in length. I want to have an input mask for a patient to enter their height. For example - it would be #' ##" so a user knows what format I want them to enter the height in otherwise they may enter only inches or even centimeters. Using the mask I just gave above I can enter 5' 10" in my field but then I run into an issue - what if they are 5' 9". The inches part of my height input may be 1 character or 2 characters long. so do I need two masks for my field or another way for the user to be able to enter 5' 1" and 5' 10". I am unsure of the best way to handle this. I saw that someone posted to add a second field with a mask that is #' #" but then how would I tell JotForm which field to use in the conditional logic? I run into this same problem with Blood pressure. It can be XXX/XX, XX/XX, or XXX/XXX. Please give me some help!

  • aprilharwell

    When phone numbers are masked on my form - They do not show up on the printable form.
    Thank you.

  • SmileyStars

    Thank you so much, for the explanation

  • glopolito

    Hello, thank you for the explanation , how cold I mask for example I have an ID field which could be either letters at the beginning and numbers in the rest... i.e. PE-334-571 but could also be 8-1005-1256 or 10-2-234, it could vary the amount of alphanumeric characters you input, the "-" does have to stay... is it possible to mask like that?

  • Preetivadher

    i want to delete one input mask how should i di ot

  • Datafanatics

    It's a pity that this is not available on a multi-line question

  • Kadu759

    Excelente informações. Obrigado.

  • luger234

    como validar valores mayores de 0?

  • Masumin

    Hi

    2 Questions...

    I would like to use masks for our 'post code' field. However, in the UK the length varies in two ways. For instance:

    Either it is MK1 1HW or MK10 1HW

    How can I insert a mask in this case (note the space in between)?

    Also,

    Can I have the letters in upper case?

  • Willemsen

    Hi, is it possible to use the input mask on a Multi-line Question? I can't find it.

  • pyli

    How do i mask a data validation for example,
    Out of 5 characters, I need only 1st charactor to be Alphabet between A & D only , and the remaining numeric limited to (0-9)

    Example the masking formula should be similar to this regular expression ^([A-D a-d])(?:[1-9]|10|11)(0)([1-4])$

  • tpbauer01

    How can I use this function to satisfy a 5 OR a 6 digit salary?
    $45,000
    or
    $145,000

  • joachimsum55

    Hi!

    Thanks for the good constructions reffering to "inut masks".
    One question: Where can I change the error text, which appears in english, when the user puts in false digits?

    Greetings,
    Joachim

  • Essenburgh

    If i not apply fixd limit of charcter in mask field.

  • yuzanflury

    Hey there
    Just wanted to ask how you could establish an entry field, in which you would have to write a specific password in letters, which will be examined and if it isn't the correct password, the entry will be inhibited The entry's purposes is to pass the reader on to a locked site.
    Thanks for your efforts.
    cheers

  • kfafhaat

    what if the entry length is not fixed? example 12AA12345678
    The last set of numbers' length is not fixed. it could be less or more? how to apply the mask here? Thanks!

  • TeamCity

    Hi There,

    Want to avoid having two separate boxes for phone numbers - one for prefix and one for phone number as I've found users type their entire number in the prefix and then get frustrated when they realise they have to retype.

    To stop this I think Masks could help but numbers in New Zealand phone numbers can vary in length from 9 to about 15. Is there a solution for this?

    Example of why it doesn't work:

    (###)### ####

    If I used this mask, it requires the user to add additional numbers or it won't accept it.

    Also, I don't want to use a plain text or number box as this does not allow a click to call option when opening in Jotform App.

    Hope you can help.
    Cheers,
    Chris

  • danielnunes1914

    It is possible to hide filed chars to a preformated type like "*" in password fields?

  • BartSchaap

    How can I force users to input captal characters only?

  • marysmiler

    I need to make sure that some letters are entered as capital letters
    Is there anyway I can achieve this?

  • utmadmin

    I need to format a calculated number so that it shows 'dot separated' thousands. I.e so that the number 2222 becomes 2.222, the number 222222 becomes 222.222 and the number 2222222 becomes 2.222.222 and so on
    Is there a number format function for either the 'short text entry' field or the 'number' field to achieve this?

  • chris cate

    I want to use a mask but i want to put 15 # but some may only need to use 9 #. The form is requring all 15 to be filled out. Is there away around this.

  • rlafleur

    How about adding ! to force uppercase?

  • CPSOnlineForms

    Brilliant explanation - thank you. It saved a question to the forum.

  • kolbo1

    How do I add a mask for an extension to a phone field - e.g. (###) ###-#### x### - where the extension may be a different number of digits each time?

  • HarveyNorrisLA

    Well presented!

  • zebra10

    What masking scheme can I use for a text field that must start with "--" or "rue" ?
    Thanks

  • tutuprat

    hey, I want to set the mask to it can be either number like 09.15 ##.## or 2.01 #.##
    not sure how to set the mask so it works for both

  • ssccbspadm

    Coo criar uma máscara de letras para que todas fiquem em maiúsculas?
    Grato,

  • coralsprings954

    How can I make it so the user can only add the last 4 digits of a social security number?
    Example:
    The users social security number is:
    123-45-6789
    The field should look like this:
    ###-##-_ _ _ _
    When they type in the last 4 digits only, numbers on the screen turns into a # but in the email you can see the last 4 digits.
    Is this possible?

  • freshii

    What if the reply can be either 3 or 4 digits? i.e. number 999 vs number 1000?

  • VascuWave

    Is there a way to force the first letter of a name capital?

  • ParallelEd

    You are missing a letter in your directions. It should be Input Mask, not Input Mas

    Example A:

    For the first example, let's start again but this time around add a phone field.

    You should be able to access the "Input Mas" option the same way we described earlier in this guide.

  • kvdspuy

    How would I apply a mask to the following possible inputs. The REQUIRED and FIXED portion is ADUWC\:
    ADUWC\amaurtin-cairncross
    ADUWC\jsloth-nielsen
    ADUWC\mdavies-coleman
    ADUWC\tabrahams-abbas
    None of the available masks provide for a mixture of Alphanumerics as well as Special Characters in different positions.

  • pariseasyhome

    Hello, is there a way that if field A = x than field B can only contain positive numbers? Thanks!

  • formmobly

    I agree with @dragoe about enabling Regex for more advanced users.

    It is definitely NOT a difficult feature to enable since you can pretty much give us direct control over the *pattern* attribute of the input field, which is pretty much plain RegEx.

  • kristinemusaraca

    The input mask does not require that the values you provided are filled. In other words, I want 11 numbers and provide 11 # in the mask. The user can enter less than 11 and move forward. We need to restrict the input to 11 numbers, no more, no less.

  • dragoe

    Have you considered input masking with RegEx? Of course your audience is at a higher level, but it would be very helpful to have a mask that allows any number of specified characters in a precise format. For instance by combining a name into a username such as "first.last@example.com"

    Great product so far. Will definitely recommend to friends in the IT realm and beyond. Thanks!

  • FL72_PE

    Thank you for your help I have fixed it now.

  • Allanarrow

    I receive applicants from two different countries: Hong Kong (###)-######## and Philippines (##)-##########. Do I need 2 phone inputs or does this have the flexibility to get either in one entry?

  • martinaphillips

    How do I set - or rather control - the field sizes and the font sizes as wish to reduce them. regards MArtin

  • btlrestaurant

    Using this method for people to register their bank account details. There is a method to limit the number of characters, but there is no method to provide a minimum. Is there another way around it?