Submit a request

Phone numbers with spacing

Comments

3 comments

  • Avatar
    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: https://jsfiddle.net/rafj3md0/ (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.

  • Avatar
    Shelley

    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

    Blessings,

    Shelley

  • Avatar
    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

Please sign in to leave a comment.

We're Here To Help


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

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