Ask users for…

Phone numbers

Usage

When to use this pattern

• When you need to collect a phone number. For example, for contact information.

Examples

U.S. phone numbers

View an example

International phone numbers

How to design and build

Layout details

How this pattern works

• If possible, tell users why you want their phone number. An example message is: Please enter your contact information so we can get in touch with you if we have questions about your application. This message can be at the top of the page if asking for any other contact information.

• Validate phone numbers. Users must provide at least a 10 digit phone number with or without dashes for U.S. phone numbers and up to a 15-digit phone number for international phone numbers.

  Example of acceptable formats for U.S. phone numbers:

  • 703-123-4567
  • 7031234567

  Example of acceptable formats for international phone numbers:

  • +52 123 456-7890
  • 637031234567
• If a user chooses a home or mobile phone number as their method of contact, phone numbers are required fields. If a user chooses email or mail as their preferred method then a phone number field won’t be validated. (Note: Method of contact field is form dependent)
• “Mobile phone number” is a required field if the user checks (I would like to receive text messages from VA about my [ ] benefits). An example of this is on the VA Form 22-10203 (Application for Edith Nourse Rogers STEM Scholarship)
• Pair with email address. Collection of phone numbers is paired with email address. The two patterns typically appear on the same step/page.

Components used in this pattern

• Text input

Page templates available for this pattern

Use the VADS templates (Patterns & Forms) for Names in Figma.

Code usage

phonePattern is a web-component pattern available in the Forms library.

Content considerations

• Do not use primary or secondary phone numbers as field labels. Home and mobile phone numbers are more plain language-focused.
• Display phone numbers in the appropriate way. If you need to display a phone number after it has been collected, then follow content style guidelines on phone numbers.

Labels, error messages, and hint text

Phone number

Hint text: Enter a 10-digit phone number

Error type: No entry

Error message: Enter a 10-digit phone number (with or without dashes)

Mobile phone number

Hint text: Enter a 10-digit phone number that can send and receive SMS (text messages)

International phone number

Hint text: Enter up to a 15-digit phone number

Error type: No entry

Error message: Enter a phone number with up to 15 digits