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

Phone numbers with country codes

Phone numbers without country codes

How to design and build

Layout details

How this pattern works

• Validate phone numbers. Users must provide a valid domestic or international phone number.

  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.
• If possible, tell people why you want their phone number. This message can be at the top of the page if asking for any other contact information.

Components used in this pattern

• Telephone input

Page templates available for this pattern

Use the VADS templates (Patterns & Forms) for Phone numbers 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 headers. 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

Home phone number

Hint text: For international numbers select or enter your country code.

Error type: No entry

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

Mobile phone number

Hint text: For international numbers select or enter your country code.

Adoption