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

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

2. 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:

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

4. 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

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

2. Add a Phone field via the Add field button:

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

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

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

Updated on: 11/05/2025