Input form phone number formatting

I’ve been working on a website for a humane rescue that centers around adopting out rescued dogs & cats. Thus, the application form used to find adoptive homes is critical to the mission.

You can see it here: https://baccr1.wixsite.com/website/application

The director really, really wants the phone number input fields to be formatted as (nnn) nnn-nnnn instead of having all the numbers run together. How can this be done? If not on the input field then on the form submission available via the dashboard?

I’ve looked at other posts talking about regex but it makes no sense to me. Please help.

Thanks in advance.

Have you consider using a npm package for this purpose?
For instance, check out libphonenumber-js.

Chen, we are animal rescuers, not website developers. We selected Wix because it is supposedly easy to use for newbs. Formatting a phone number should be a simple no-brainer. We have no experience with an npm package or whatever you are referring to but if it is an easy fix then please tell us how to do it.

Thank you.

I re-read you original post and suddenly unsure regarding what you’re looking for exactly.
You want to-
(A) have a single input field for phone number, that a user will type together the whole number (10 digits) and only stores this value later on as a 3 separate parts formatted number, meaning that this solution will be transparent to the user, and only effect your site’s stored data?
If yes - you can run some simple manipulation on the input value the user provided before you store the data. Look online for sub-strings and string concatenation (regex would be more proficient but probably a bit more complex).

(B) make this formatting available right when the user is typing the number, meaning this solution should improve the users experience and naturally be visible to them?
If yes - you can use 3 different input fields put aside one another in a row, and concat their values before storing the joint number in your site’s data.

Let me know if this gives you a lead / try to elaborate on what you’re looking for in case I didn’t understand you correctly.

I see you have a poor choice of options, and as a specialist in this sphere, I can provide you with more info (I hope you still find it helpful). The good way to achieve it is by using regular expressions (regex). It’s not that confusing if you learn more.
Many online resources can help you learn about regex and how to use it for formatting phone numbers. You can also find pre-built regex patterns that match phone numbers in the desired format or use uk temp number. Alternatively, you could use a library or plugin that already has this functionality built-in.