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

October 5, 2021

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. Click Settings at the top

2. Click Conditions then Select 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.

Was this guide helpful?
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: