# How to format a phone number?

**URL:** <https://forum.bubble.io/t/how-to-format-a-phone-number/221510>\
**Category:** Database\
**Created:** [August 25, 2022, 8:21am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510 "2022-08-25T08:21:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 8:21am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/1 "2022-08-25T08:21:19Z")

</div>

Hi guys,

I currently save phone numbers as text and would like to display them as 5 characters, followed by a ‘-’ and then 6 characters, like this;

xxxxx-xxxxxx

I only seem to have two choices, either display as they are inputted, which is down to the user to do, or use the US format, but I’m in UK.

My users save their customers and it looks much neater if all formatted the same.

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [August 25, 2022, 8:51am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/2 "2022-08-25T08:51:48Z")

</div>

Hi there, @darren.james7518… if you are just talking about displaying an 11-digit text field as the first 5 digits followed by a dash and then the last 6 digits, you can do it like this.

![phone](https://us1.discourse-cdn.com/bubble/original/3X/e/e/eec8ac613f2bde30029035f908cb226b96282c4d.png)

Hope this helps.

Best…  
Mike

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 8:54am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/3 "2022-08-25T08:54:00Z")

</div>

Absolutely awesome, thanks again @mikeloc for the fast and concise answer, so helpful!

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 9:02am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/4 "2022-08-25T09:02:42Z")

</div>

It works perfectly, but I wondered what would happen in the (unlikely) instance that a phone number has more than 11 digits. Is there a way for the second part of the expression to “truncated from end to” and then have it go to any number?

What I guess I need is to format like this;

xxxxx- then the rest of the number

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [August 25, 2022, 9:12am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/5 "2022-08-25T09:12:27Z")

</div>

This expression looks like it does the trick.

 ![truncate](https://us1.discourse-cdn.com/bubble/original/3X/5/2/52155f83a1a1f5832157af1c2ea69d77e00640e1.png)

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 9:34am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/6 "2022-08-25T09:34:14Z")

</div>

How did you get the ‘Arbitrary text’?

 ![arb](https://us1.discourse-cdn.com/bubble/original/3X/8/4/843f8cc701ac1a3d4e54e86eaee085ee5a10409e.png)

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [August 25, 2022, 9:49am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/7 "2022-08-25T09:49:14Z")

</div>

Get rid of the 5 at the very end, and then you will be able to select the _Arbitrary text_ operator.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 12:24pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/8 "2022-08-25T12:24:29Z")

</div>

That works perfectly thank you!

Sorry, I do have another question … feel free to ignore it though as I’m taking up a lot of your time!

If the user’s number is 0777123465, your solution successfully formats it as 07771-23456, however, if the user inputs the phone number with a space then we get 0777-12346.

Effectively I want to remove all spaces - I know how to remove space from the end of a word, but I guess I need to remove spaces from the end of every single number?

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [August 25, 2022, 12:30pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/9 "2022-08-25T12:30:10Z")

</div>

Use find and replace

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 25, 2022, 1:35pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/10 "2022-08-25T13:35:04Z")

</div>

Thanks @adamhholmes where would I add the find and replace? Currently I have this set up to display phone numbers;

![phone](https://us1.discourse-cdn.com/bubble/original/3X/a/7/a7c1104ba2088d308af632f485e2ad241cf75311.png)

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [August 25, 2022, 1:38pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/11 "2022-08-25T13:38:01Z")

</div>

I’d do it after the ‘Customer’s Phone’, before the :truncated to and :truncated from

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [August 25, 2022, 2:29pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/12 "2022-08-25T14:29:47Z")

</div>

Just food for thought here, @darren.james7518, but if you are worried about what users might do when entering a phone number (e.g., add a space between the first five digits and the rest of the number), the “right” way to handle that concern would be through a clear user experience and/or by “cleaning the number up” on its way into the database (as opposed to trying to display it properly regardless of how the user entered it). For example, you could have multiple input elements on the page with a dash in between them, and you could make sure the user only enters 5 characters into the first input, and you could strip both inputs of any spaces (find and replace) when the inputs are being saved. With the data formatted properly in the database, you wouldn’t have to worry about a bunch of weird cases when you display the data later. Again, just food for thought.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 27, 2022, 12:45pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/13 "2022-08-27T12:45:25Z")

</div>

> [@adamhholmes](#):
>
> I’d do it after the ‘Customer’s Phone’, before the :truncated to and :truncated from

Thanks, I had a go at that but as I’m not too familiar with the ‘find and replace’ function I have opted to make the first 5 characters as a separate input in the database as @mikeloc suggested.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 27, 2022, 12:46pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/14 "2022-08-27T12:46:09Z")

</div>

> [@mikeloc](#):
>
> Just food for thought here, @darren.james7518, but if you are worried about what users might do when entering a phone number (e.g., add a space between the first five digits and the rest of the number), the “right” way to handle that concern would be through a clear user experience and/or by “cleaning the number up” on its way into the database (as opposed to trying to display it properly regardless of how the user entered it). For example, you could have multiple input elements on the page with a dash in between them, and you could make sure the user only enters 5 characters into the first input, and you could strip both inputs of any spaces (find and replace) when the inputs are being saved. With the data formatted properly in the database, you wouldn’t have to worry about a bunch of weird cases when you display the data later. Again, just food for thought.

Not sure why I didn’t think of this! Thanks for the suggestion, it seems simpler 👍

---

<div class="post-metadata">

**Author:** ![adrianonascentes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adrianonascentes/32/130089_2.png) [@adrianonascentes](https://forum.bubble.io/u/adrianonascentes)\
**Post date:** [August 27, 2022, 1:07pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/15 "2022-08-27T13:07:42Z")

</div>

Good morning @darren.james7518 , how are you?

I have a plugin called “Input Mask” with it you can create masks for your input elements in the bubble. Take a look at the demo and see if it fits your use case.

> **[Input Mask Plugin for Bubble, by Acampamento no-code](https://bubble.io/plugin/input-mask-1656894699455x237130928074260480)**
>
> Input Mask Plugin page on Bubble, by Acampamento no-code. Add Input Mask in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 31, 2022, 6:45am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/16 "2022-08-31T06:45:08Z")

</div>

@adrianonascentes Will the phone number still be searchable from my pages search box? I have a search box which searches the database to retrieve results but the search mmust match exactly, so if the phone number is 012345789 and the mask is 0123/456/789 then would a search for 012345789 return the match?

---

<div class="post-metadata">

**Author:** ![adrianonascentes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adrianonascentes/32/130089_2.png) [@adrianonascentes](https://forum.bubble.io/u/adrianonascentes)\
**Post date:** [August 31, 2022, 11:02am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/17 "2022-08-31T11:02:04Z")

</div>

Good morning @darren.james7518 , how are you?  
If I understood well what you need, in this case you would need to treat the characters of the mask in the search. remove them

The mask will make the field value match the constructed mask.

depending on the mask, a replace already works very well, but you can also use regex for that

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [August 31, 2022, 7:52pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/18 "2022-08-31T19:52:23Z")

</div>

Ok thank you for the info.

---

<div class="post-metadata">

**Author:** ![adriannestone](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adriannestone/32/152435_2.png) [@adriannestone](https://forum.bubble.io/u/adriannestone)\
**Post date:** [December 2, 2022, 6:06pm UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/19 "2022-12-02T18:06:24Z")

</div>

Just in case anyone else finds this and is looking to format a phone number in the US style (###-###-####) this is how I set it up. Also I formatted it so it’s a click to call link.

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/d/8/d82ada7ef92044181cd5157ceb6f05ee6de786ca.jpeg)

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [December 3, 2022, 10:05am UTC](https://forum.bubble.io/t/how-to-format-a-phone-number/221510/20 "2022-12-03T10:05:12Z")

</div>

Thank you that is very useful 👌
