How to Set Content Mask on a Form Field Based on Another Field Input

Added: March 21, 2016

Do you expect a certain format of your form submissions? Have you added the errors and description, but you still keep having some people submitting wrong format?

Input mask is what will help you with that!



Input mask is basically limiting them to specify the format that you wish and not the format that they might be used to or no format at all.

Now we all know how to set it up through the toolbar, but what if the format keeps changing throughout the form based on what they have selected on some other field?

This is where conditions come in.



It is always easiest to see and learn from the example, so let imagine that we are in US and might need international numbers, but wish to keep domestic numbers as well as local ones.

Possibilities:
1. Create two fields and show/hide the right ones
  - this however means two or more records for same thing, one always filled out and other(s) empty.
  - In our demo we will do this on Address field, to show the difference that this setup makes.
2. create a conditional mask on a single field.
  - one field shows us the value all the time, but only in the format that we expect

Input mask it is! :)

If the business is mostly local, it makes sense that the input mask will be set for local phone numbers: 123-1234

Now if someone is not local, but is still domestic, the format would be: (123) 123-1234 and international numbers start with a plus and its own code: +123-123-123-1234

When creating the input mask there are 3 special characters that we can use:
# - to create a placeholder which accepts only numbers in that place
@ - placeholder for a character / letter that can be added in that place
* - placeholder for both characters and numbers at that specific location.

All other characters that we add are there to help us with the format, meaning that they will always stay there.

So for US local number mask, we would enter ###-#### meaning that after the third number there is a minus/dash added for us automatically and 4 more numbers can be accepted.

Other formats:
US Domestic phone numbers: (###) ###-####
International phone numbers: +###-###-###-####

To create the same we:
1. Open Conditions


2. Click on Enable / Require Field


3. Set it all up per your requirements. Based on the above, for the local numbers it would look like so:


4. Recreate the steps until you get to the point that your form is all set up.

You can see how it all looks like on this form.

If you wish, you can also clone it to your account and check it all out by following the steps here: 
How to Clone an Existing Form from a URL

The same can be used for any number or format that you wish to have on your form, phone number only being an example.

Of course if you have any questions or need any assistance we would be happy to assist you with the same. All that you would need to do is to let us know about it by creating a new thread or posting a comment here.


1 Comment...


   
blakefam (April 24, 2016 at 06:25 PM)

I have managed to set up a content mask for cost values in my form at https://www.jotform.com//?formID=60827059885873
However if the value entered needs to be only a 'small amount, zeros need to be included to fill the input. eg. $004.57
Is there a way I can retain the purpose of the input mask without the need to include the zeros before other characters this allowing $4.57 to be input as in this example?

View Answer


Send Comment