How to Format Phone Display and Submission

Digioh App Marketplace

Sometimes you want to format a phone number entered by a user.

With Digioh, you can format a phone number as a user enters it as well as format how it is submitted. This can be done with an app called “Phone Number Formatting”.

First, simply install the app in Digioh through the Apps page found under the top right profile menu, Custom Javascript (Apps).

This app can be used with either a phone field or a custom field set to Field Type ‘Text Box’ or ‘Text Area’.  When using this app, do not use the ‘Validation’ dropdown, as the app will be controlling what phone number the user inputs.

When formatting the phone number display, the user will be physically prevented from entering an invalid format (letters, too many numbers, etc). If the user submits an incomplete phone number, a notification will appear instructing them to input the correct amount of digits.  To format the phone number as a user enters it, in the Box Editor, configure the metadata command phone_display.  In the ‘value’, enter the desired format template with ‘x’ in place of any digits:

Some examples of common templates for phone_display are:

  • xxx-xxx-xxxx – for a ten digit number
  • (xxx)xxx-xxxx – for a ten digit number with the area code in parentheses
  • xxx-xxx-xxx – for a nine digit number
  • (xxx)xxx-xxx for a nine digit number with the area code in parentheses

Sometimes, your email or CRM platform requires phone numbers to be submitted in a particular format. To format the phone number for submission, in the Box Editor, configure the metadata command phone_submit.  In the ‘value’, enter the desired format template with ‘x’ in place of any digits:

Some examples of common templates for phone_submit are:

  • xxxxxxxxxx – for a ten digit number without special characters
  • 1xxxxxxxxxx – for a ten digit number with a 1 added in the front
  • +1xxxxxxxxxx – for a ten digit number with a +1 added in the front
  • xxxxxxxxx – for a nine digit number without special characters

When configuring this App for a phone number input, both the display and the submission of a phone number should be added to the metadata with the appropriate formats (if they are the same, copy and paste the same format for both values):