Getting Started With the Basics of Input Masking

March 10, 2024

Input masking may be underrated or not often used. Still, it is handy in different situations, especially if you talk about specifying and accepting input in a fixed format — for example, formatting for a custom date, number, or phone number.

To get you started, we’ll look at two different scenarios.

Input Masking Scenario #1:

For the first scenario, let’s look at this one using a simple Short Text element, so go ahead and add one to your form right now if you haven’t already. To view the Input Mask option, you can follow the steps below: 

  1. Click the Short Text element.
  2. On the right side of the element, click the Properties (gear icon).
  3. Go to the Options tab.
  4. Scroll down and find the Input Mask option. Make sure to enable it. 
Input Masking option in Short Text element in the Jotform Form Builder

With input masking, you’ll only use three HTML characters, and these characters are explained right below the Input Mask toggle.

  • @ — Masks Letters
  • # — Masks Numbers
  • * — Masks Letters & Numbers

To explain the above in a simplified manner, the Input Mask gives you much greater control over what is entered, limiting your users to the masked inputs.

That might still sound confusing, so summarize this by looking at the examples below.

Example A:

In this example, let’s say, for instance, you want to name cities that start with “St” (Saint), such as “St Augustine,” which would look like this @@ @@@@@@@@@.

The back-end of your form:

Getting Started With the Basics of Input Masking Image-1

Front-end of your form:

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 that would show up like this: # # # # #.

The back-end of your form:

Getting Started With the Basics of Input Masking Image-3

Front-end of your Form:

Example C:

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

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-5

Front-end of your Form:

Example D:

Both the above are good, but what if you needed more than that but didn’t need that much information, such as when you only want the street address 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 #### @@@@@@@@@ @@.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-7

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 *** ** **** ** ***.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-9

Front-end of your Form:

Example F:

But what if none of the above was good enough for your situation? What if you work for a government, legal, or car parts company? You can do that too by compartmentalizing your characters to create something systematic, such as #@-#**#-#@.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-11

Front-end of your Form:

Example G:

Some of the above examples are fixed input masking, so what about if you would like a way for users to enter characters but not require it all? For example, a membership number that ends with one or two characters. You can do the input masking as @@-#####-@[@]. As you can see, we’re using a Square Bracket for the optional character.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-13

Front-end of your Form:

Input Masking 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 helpful 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.

Input Masking option in Phone Number element in the Jotform Form Builder

You’ll notice this time around that 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 (###) ###-####.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-15

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.

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-17

Front-end of your Form:

Example C:

As another example, let’s say you plan on running an outreach call program in Australia. 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. 

The back-end of your Form:

Getting Started With the Basics of Input Masking Image-19

Front-end of your Form:

That’s about it for the Input Masking. It’s convenient in many cases, and you could apply it to your form.

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:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Bodhi - Profile picture
  • Albert Tyler Barnett - Profile picture
  • CER Operations - Profile picture
  • Chris Baier - Profile picture
  • Janine van Niekerk - Profile picture
  • ِAou - Profile picture
  • Rob M - Profile picture
  • Suporte_Freedom - Profile picture
  • Dale - Profile picture
  • Cade Cooper - Profile picture
  • Yaroslav Paz - Profile picture
  • Corp Comms - Profile picture
  • creativeservicesMMT - Profile picture
  • Geno Sajko - Profile picture
  • Albert Joseph - Profile picture
  • Phil - Profile picture
  • Geta Burrell - Profile picture
  • shaunice Shelton - Profile picture
  • Vul - Profile picture
  • Hilkia Diaz - Profile picture
  • Kunjan Chauhan - Profile picture
  • Joseph Vu - Profile picture
  • Glynn Hammond - Profile picture
  • Christine Peters - Profile picture
  • Kitsilano Community Centre Association - Profile picture