Browse Article by Topicsinput mask mask conditions conditional mask
- Smart Forms Using Conditional Logic
- Adding a license agreement to a form
- Creating a scrollable Terms & Conditions
- How to Create a Basic Multiple Payment form
- Hide or Show Multiple Fields at Once
- How New "Conditions For" and "Order by" boxes work in conditional logics
- Conditional Logic Inserts Text/Calculation Into A Field
- How to Skip Pages Using Conditional Logic
- How to Set Content Mask on a Form Field Based on Another Field Input
- How to Make a Field Required Based on User's Answer
Related Forum Questions
- Page skip not working properly with the conditions on my form
- How can I set an imput mask to capitalize the first letter while keeping all other lettere lower case?
- Submission emails are going to wrong people.
- Suddenly the conditions don´t work no more
- The Masked Input Widget demo is not behaving as I would expect
- Can I format the phone number box
- Hide/Show conditions not working on my form
- Adding a $ not working
- Upload File button is not showing because of erroneous conditions
- Adding Input Mask makes phone number field too small on mobile
How to Set Content Mask on a Form Field Based on Another Field InputAdded: 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.
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.
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.