Appearance
Telephone
Collect phone numbers from customers with validation and mobile-optimized input.
Overview
Telephone is an input option type that provides a text field specifically for phone numbers. It triggers a numeric keyboard on mobile devices and validates phone number format.
Use Telephone for:
- Contact phone numbers
- Delivery coordination
- Appointment scheduling
- Emergency contact information
- SMS notification preferences
Key characteristics:
- Single-line phone number input field
- Phone number format validation
- Can be marked as required
- Supports placeholder text
- Mobile numeric keyboard
Configuration
Basic Settings
| Setting | Description |
|---|---|
| Label | Option name displayed to customers (e.g., "Phone Number") |
| Option is required for this option set | If enabled, customers must enter a valid phone number before adding to cart |
| Hide Label from storefront | If enabled, only the input field is shown (label is hidden) |
Advanced Settings
| Setting | Description |
|---|---|
| Internal Label | Admin-only identifier (replaces label in options list) |
| Help Text | Additional guidance shown to customers (based on display mode) |
| Placeholder | Gray text shown inside empty input field (e.g., "(555) 123-4567") |
How to Add Telephone
- Navigate to Option Sets and open your option set
- Click Add Option
- Select Telephone from the Option Type modal
- Enter a Label (e.g., "Contact Phone")
- Check Option is required if phone number is mandatory
- (Optional) Click Advanced Settings to add Placeholder or Help Text
- Click Save in the contextual save bar
Use Cases
Delivery Contact
Label: Delivery Phone Number Required: Yes Placeholder: (555) 123-4567 Help Text: We'll call or text if there are any delivery issues
Result: Required phone field for delivery coordination
Appointment Confirmation
Label: Contact Number Required: Yes Placeholder: +1 (555) 123-4567 Help Text: We'll send appointment confirmations to this number
Result: Required phone number for appointment notifications
Optional Contact
Label: Phone Number (Optional) Required: No Placeholder: (555) 123-4567 Help Text: Provide a phone number for faster order updates
Result: Optional phone field for additional contact method
SMS Notifications
Label: Mobile Number for SMS Required: No Placeholder: Mobile number Help Text: Receive text updates about your order
Result: Optional phone field specifically for SMS
Emergency Contact
Label: Emergency Contact Number Required: Yes Placeholder: (555) 123-4567 Internal Label: Customer Emergency Contact
Result: Required emergency contact phone number
Validation
Phone number validation:
- Validates standard phone number formats
- Accepts various formats (with/without parentheses, dashes, spaces)
- Supports international formats
- Error messages for invalid entries
Validation occurs:
- On field blur (when customer leaves field)
- Before adding to cart
- Clear error messaging for corrections
Styling
Telephone input fields inherit styling from your theme and customization settings:
- Colors: Input background, text, border, and placeholder colors from Colors
- Border: Input border thickness from Borders & Shapes
- Radius: Input corner radius from Borders & Shapes
- Spacing: Option spacing between fields from Borders & Shapes
Best Practices
Use clear placeholders:
- Show expected format: "(555) 123-4567" or "+1 555-123-4567"
- Include country code if international
- Match local conventions
- Keep format consistent
Explain phone usage:
- Use Help Text to explain why phone is needed
- Mention if it's for calls, texts, or both
- Specify delivery, appointments, or emergencies
- Note if number will receive SMS
Set appropriate requirements:
- Required for delivery or appointments
- Optional for additional contact methods
- Test validation with various formats
- Ensure error messages are helpful
Mobile optimization:
- Triggers numeric/phone keyboard on mobile
- Includes special phone characters (+, -, (), space)
- Test on actual mobile devices
- Verify tap targets are adequate
International considerations:
- Support international phone formats
- Include country code placeholders if needed
- Consider using country code dropdown
- Test with various number lengths
Related
- Short Text - Single-line text input
- Email - Email address input
- Internal Label - Admin-only identification
- Help Text - Additional context display
- Placeholder - Input field placeholder text
- Required Fields - Making options required