Patterns
Ask users for…
Phone numbers
Use: Deployed
Follow this pattern when you want to ask for a phone number.
Usage
When to use this pattern
- When you need to collect a phone number. For example, for contact information.
Examples
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. Example of acceptable formats:
- 703-123-4567
- 7031234567
- 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
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)