Notice of Scheduled Maintenance - May 29, 30, 2024

Phone numbers with spacing



  • Joshua Artman

    If you are just working with US/Canadian phone numbers, it is pretty simple for a web developer to add auto formatting of the phone number to your checkout page just by adding some JavaScript to the page.  You can see a working example here: (just type a phone number into the "Phone Number" box in the lower right portion of the page to see it in action).  How you want it to be formatted can be adjusted by the web developer.  The example shows it formatted as (123) 456-7890, but it could auto format to be 123-456-7890 or 123 456 7890 just as easily.

    Dealing with international phone numbers gets a bit trickier.  The example I linked to will not work for many international numbers as it is designed to specifically format to the US/Canada phone number format. If AmeriCommerce were to use 3 separate phone number boxes for customers to type the numbers into, many international phone numbers would be difficult to enter.  In our case almost 50% of our customers are international customers, so three separate boxes to enter a phone number becomes an issue for us.

  • Shelley Neemeyer

    Joshua, thank you very much for the information. Our customer base is all US and a few Canadian. I don't have a web developer so I might try to figure out the java script and where exactly to do this myself and hope I don't make a big mess LOL



  • Joshua Artman

    Hi Shelley,

    Glad I could help. 

    If I get a chance I might try to modify the code I linked to and paste it here, so it can just by copy/pasted into the footer of a theme to make it work so if others want this feature it will be easy to add.

    FYI: you can not just copy the code I linked to and paste it into the theme, because the id of the phone number field in the example does not match the id in our checkout pages.  The id in that script on the line "const inputElement = document.getElementById('phoneNumber');" needs to be changed to match the id of the phone number box in the checkout page.

    Let me know if you need any pointers and I will be happy to help if I can.


  • Joshua Artman

    Hi Shelley,

    I am not sure if you tried to use the script I linked to, but I realized that there was an issue with that script I had not considered.  That scripts will not allow customers to enter a number with an extension. For example, if someone enters 123-456-7890 ext 456, it would format it as (123) 456-7890 without the extension.

  • Joshua Artman

    I was able to modify the code I linked to previously and create a self contained javascript file that can be included in the footer of any AmeriCommerce store that should enable the phone number to be auto formatted on the checkout page.  The example I linked to previously modified the phone number when any new key was hit, this one will not modify the phone number until at least 9 digits have been entered.

    Phone Number Formats:

    9 digit or fewer numbers: Not formatted
    10 digit numbers: (123) 465 - 7890
    11 digit numbers that start with a 1: 1 (123) 465 - 7890 [US/Canada]
    11+ digit numbers that do not start with a 1: +66 (123) 465 - 7890 [International]

    Examples when extension is entered after the phone number:

    (123) 465 - 7890 x 1234
    1 (123) 465 - 7890 x 1234
    +66 (123) 465 - 7890 x 1234


    Script provided AS IS, ABSOLUTELY NO WARRANTY expressed or implied. Use this script at your own risk.

    I make no promises that it even remotely covers all possible phone number formats. It is simply intended to make phone numbers more easily read by US based staff of AmeriCommerce Store Owners and for the numbers to have a semblance of a consistent formatting.

    I have uploaded this script to GitHub ( and it can be accessed via the JsDelivery Content Delivery Network (CDN). In order to add it to your site, all you should need to do is add one of the following lines of code to the footer of your site theme (Theme > Footer > HTML Editor), just before the following code:


    If your site is using jquery:


    If your site is not using jquery (or you do not know):

    <script src='' defer async></script>

    The script is looking for any input fields that have the "AddressEditorPhoneTextbox" style class set.  In all of the AmeriCommerce themes I could find the phone number fields have this style class set.

    If anyone tries to use this and it will not work, make sure there are no line breaks in the code you pasted into the footer of your site. If it still will not work, send me a link to your site so I can look to see if your theme is using a different class.

    Hopefully this will be useful.



    The original version of this code would only format the phone numbers if the phone number was typed into the checkout page or if it was modified.  If the number was loaded from the customer account, it would not modify the phone number.  I updated the links above to the code to now point to an updated version that should also format the phone numbers for phone numbers that are loaded from the customers account.  

  • Joshua Artman

    After using this on our site for most of a week, I realized that this is currently only formatting newly entered phone numbers on the checkout page, if the phone number is pre-filled because the customer is a registered user, the phone number is not formatted unless the customer tries to edit the phone number.

    I intend to work on fixing it so that it will format pre-filled data as well, but I cannot promise when I can get to that at this point.  I will post a comment on this thread when I have made the update, with a link to the updated script.

  • Angela Stelly

    I vote for this enhancement! Whether spaces, dashes or periods, some sort of formatting of the ph #'s would be GREAT.

  • Barbara


    Anyway you could help me remove the () - and limit the field to just 10 characters 

  • Barbara

    Nevermind figured it out!!! Awesome code thanks

  • Barbara

    Okay, how about limiting it to just 10 characters only 

  • Joshua Artman

    Hi Barbara,

    It has been a bit since I wrote that code but after a quick review of it, I think in order to remove support for phone numbers with extensions and international phone numbers, you just need to comment out:

    lines 90-92 (support for phone number extensions)

    lines 94, 108, 109 - 119 (support for international phone number patterns)

    The on line 105 remove the "1" from the phone number format.

    I am not able to test this at the moment.  Let me know if that does not work and I will see if I can find an opportunity to modify and test it.


Please sign in to leave a comment.

We're Here To Help

Standard Support Hours: Monday-Friday 8AM-5PM CST
Looking for Premium Support? Just ask!

Speak to a live person
1 (800) 936-9006
Submit A Support Ticket
Submit Your Ticket Here