# Predetermined mask for fields?

**URL:** <https://community.glideapps.com/t/predetermined-mask-for-fields/34995>\
**Category:** Ask for Help\
**Created:** [November 24, 2021, 8:38am UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995 "2021-11-24T08:38:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waser\_I\_Solutions](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/waser_i_solutions/32/34937_2.png) [@Waser\_I\_Solutions](https://community.glideapps.com/u/Waser_I_Solutions)\
**Post date:** [November 24, 2021, 8:38am UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/1 "2021-11-24T08:38:11Z")

</div>

Hello, how can I format fields so that it fills a predetermined mask. For example, for telephone numbers, our default must be ### ### ## ##. How can I do that?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 24, 2021, 12:31pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/2 "2021-11-24T12:31:36Z")

</div>

Do you mean you want to validate the user’s input against a pre-defined format?

---

<div class="post-metadata">

**Author:** ![Waser\_I\_Solutions](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/waser_i_solutions/32/34937_2.png) [@Waser\_I\_Solutions](https://community.glideapps.com/u/Waser_I_Solutions)\
**Post date:** [November 24, 2021, 3:27pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/3 "2021-11-24T15:27:30Z")

</div>

Hello, I would like to have the fields formatted so that when someone enters a telephone number, for example 1234567890, it is automatically formatted as 123 456 78 90. That means that only 13 digits are possible with the empty lines and the spaces in the phone line inscribed

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 24, 2021, 11:25pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/4 "2021-11-24T23:25:34Z")

</div>

I assume you want to display it like that in your app as well and not just for the Sheet, so my proposal is as below:

- Build a custom form:

> [@How do I create a custom form?](https://community.glideapps.com/t/how-do-i-create-a-custom-form/25014/):
>
> I’m just dropping this here so I have something to refer people to when they ask. This is a simple concept app (copyable), that demonstrates the following techniques: Building custom forms for adding and editing list items (as an alternative to the native forms provided by Glide) Preventing duplicate new entries using [User Specific Columns](https://docs.glideapps.com/all/reference/data-editor/user-specific-columns) and [Relations](https://docs.glideapps.com/all/reference/data-editor/computed-columns/relation-column) Enforcing mandatory input items The use of visibility conditions and user specific booleans to control user flow There is nothing particula…

- Have a number entry to force the users to enter 13 digits. I think you can calculate a string’s length using Glide’s calculated column, so only when they do enter 13 digits will you allow them to submit.

- Have 4 columns to slice the input into 4 parts, then finally add a template column to add those 4 parts plus the 3 spaces in (XXX XX XX XX).

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [July 18, 2022, 3:20pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/5 "2022-07-18T15:20:32Z")

</div>

> [@ThinhDinh](#):
>
> Have 4 columns to slice the input into 4 parts, then finally add a template column to add those 4 parts plus the 3 spaces in (XXX XX XX XX).

Could you please elaborate more about how this should be implemted?  
My usecase is a car license plate, which can have either 7 or 8 digits, as follows:  
XX-XXX-XX  
XXX-XX-XXX  
I’d like the user to input just the numbers, but see them “prettified” to the license plate visual. I’ve seen it done in various sites when inputting credit card details, but I cannot find such an example now 🙁

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/2/b24d8db42ab5d67f3e7ddaea2d0d86e7f3a8d95e.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fb4db73b6d72890a6aa3b4d35dc58d2c02445d95.png)  
(Should be yellow background, as the first image)

I’ve found something similar here, but it doesn’t mask  
https://codepen.io/ix4/embed/preview/eYYGgaM?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=eYYGgaM

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [July 18, 2022, 3:30pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/6 "2022-07-18T15:30:34Z")

</div>

I think it could be done with the standard glide columns. I think there is a plugin to count the number of characters, and then based on that count, use the slice plugin to chop the number up and piece it together in a template. But I think it would be a whole lot simpler to just pass it into a javascript column, have it count the characters, and maybe apply some regex or loop through and build a new string with the - injected. I’m at work, so can’t whip something up right now, but should be pretty easy.

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [July 18, 2022, 4:11pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/7 "2022-07-18T16:11:03Z")

</div>

> [@Jeff\_Hager](#):
>
> pass it into a javascript column

Won’t this mean the user inputs on one field and see the prettified output in another?  
I’d like it all to be in the same field, while they input.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [July 18, 2022, 4:48pm UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/8 "2022-07-18T16:48:01Z")

</div>

Yes, that would be entry in one component and display bit in another component. Based on your screenshots with the license plate, I assumed that was your plan to make a prettified version.

But, no. I’m not aware of a way to do it directly in the entry component. Maybe something to play with using CSS, but I’m not sure if it would work.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 19, 2022, 1:31am UTC](https://community.glideapps.com/t/predetermined-mask-for-fields/34995/9 "2022-07-19T01:31:24Z")

</div>

I know what you mean when you say it should work like a credit card input experience, but no, it won’t work like that in Glide. You can theoretically have 2 or 3 entry components on the same row using CSS but it will be pretty cumbersome for you to configure all the logic for it to work (say only 2 numbers for the 1st entry, only 3 numbers for the 2nd entry etc.)

So if your concern is mostly on the front end side of things, I would recommend against this using Glide.
