If users enter phone numbers in the correct format, it improves data consistency and increases the usability of the data. A phone number mask automatically formats numbers as they are entered, preventing incorrect entries and making forms easier to use.

In this tutorial, we will go through the process of adding a phone number mask to both the contact form and the phone field in the online store cart.

Ultimately, users will see a predefined format (e.g., (123) 456-7890 or + 1 234-567-8901) when entering their phone numbers, which will reduce errors and improve the overall experience of checkout and sending a response through the contact form.

Content:
Adding a phone number mask in a contact form
Adding a phone number mask in the shopping cart

Adding a phone number mask in a contact form

Hover over the contact form and click on the gear to open its settings:

Add a Phone field via the Add a field button on the Items tab:

... or, if the field already exists, go directly to its settings:

In the field settings, activate the Phone number mask switch and set the desired template:

Note: There is currently no option to add a country code selection.

You're done! Don't forget to republish the site for the changes to be applied.

Adding a phone number mask in the shopping cart

Open your site settings, and in the Your store Settings section, go to the Shopping cart tab:

Add a Phone field via the Add field button:

... or, if the field already exists, go directly to its settings:

In the field settings, activate the Phone number mask switch and set the desired template:

Note: There is currently no option to add a country code selection.

You're done! Don't forget to republish your site for the changes to be applied.

Updated on: 03/17/2025