How to format a phone number?

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.

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

Hope this helps.

Best…
Mike

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

1 Like

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

This expression looks like it does the trick.

How did you get the ‘Arbitrary text’?

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

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?

1 Like

Use find and replace

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

phone

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

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.

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.

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

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.

@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?

1 Like

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

Ok thank you for the info.

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.

1 Like

Thank you that is very useful :ok_hand: