Skip to content

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

SettingDescription
LabelOption name displayed to customers (e.g., "Phone Number")
Option is required for this option setIf enabled, customers must enter a valid phone number before adding to cart
Hide Label from storefrontIf enabled, only the input field is shown (label is hidden)

Advanced Settings

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional guidance shown to customers (based on display mode)
PlaceholderGray text shown inside empty input field (e.g., "(555) 123-4567")

How to Add Telephone

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Telephone from the Option Type modal
  4. Enter a Label (e.g., "Contact Phone")
  5. Check Option is required if phone number is mandatory
  6. (Optional) Click Advanced Settings to add Placeholder or Help Text
  7. 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:

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