Getting Started with the Basics of Input Masking

Last Update: May 7, 2017

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 Mas" 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.


11 Comments...


   
darrenchew (July 11, 2016 at 11:39 PM)

I uses ***-***-*** for my users to fill in our codes but there were cases where the 1st 3 digits were filed but the rest were blanks.

Is there a way to include a logic where we prevent submission of the incomplete codes.

View Answer


   
affinityseattle (July 15, 2016 at 02:48 AM)

I'm asking people for measurements:
## x ## x ##

They really should be able to enter 2 x 2 x 2 not 02 x 02 x 02. If they enter a single number in a ### then hit tab, the input should accept a # (# through ###)

View Answer


   
epiplakouzinaskitchen (August 27, 2016 at 09:51 AM)

For example prevent the email textbox for a user to enter @company.com OR @whatever.com OR @anotheremail.com
Can this be done ?

View Answer


   
kondratxxx (October 19, 2016 at 10:42 AM)

Hi

I suugest you to implement more masking symbols: you strict input even not allowing user to leave number w/o decimals. For example, Microsoft (possibly) uses 3 number mask symbols for nubers: 0, 9 and #, where 0 stands for 1-digit obligatory input, 9 for 1-digit optional input and # for any digits or +/- sign input. So, for example, if one needs non-empty currency input into numeric field, the mask is "#0.99", "(999) 000-0000" for phone number with optional area code etc.

View Answer


   
dvpvc (December 15, 2016 at 03:52 PM)

I'm trying to make sure that people's text matches "City, State" how do I do this?

View Answer


   
ipbr21054 (January 31, 2017 at 05:52 PM)

Is the message that pops up in red editable,if so how.
Thanks.

View Answer


   
Ashlee (March 06, 2017 at 01:21 PM)

Hello,

I want to make a field in the form automatically place a "$"in front of the numbers a user is able to input but I don't want to put a limit on the numbers they can enter, as I don't know what dollar amount they will input. Is this possible?

View Answer


   
ProcesosNovis (May 09, 2017 at 05:32 PM)

In a masked entry I need to enter a number, if the length is less than 10 digits, I should fill with zeros to the left, I have entered the format ##########, to make sure they are just numbers, But I do not know how to make it fill with zeroes to the left, can you help me?

View Answer


   
AMWC (May 12, 2017 at 01:42 PM)

Is there a way to force all Upper Case so the data looks cleaner. Some people use all caps and some don't. I would like to force a consistent way, one way or the other.

View Answer


   
ypwitch (June 15, 2017 at 09:08 AM)

I am looking to delimit each entry with a delimiter recognized and selectable by Google Spreadsheets. In this way I can have the fields spread across a row as required. I'd imagine there might be a better way, but for now I might just end each field with a semi-colon, and key on that as a delimiter. Is there a better way to have the output emailed in a comma delimited (CSV) format? Thanks - and I'm new.

View Answer


   
nrot (August 05, 2017 at 11:46 AM)

In the UK, we have a variety of landline telephone number formats, e.g.:
0117 912 3456
01234 567890
01234 56789

Is there a way to set a mask to take all these variables into account?

View Answer


Send Comment