Skip to main content

Contact Information - Multiple Phone Numbers

The site now supports multiple phone numbers that can be displayed in different locations (contact page, footer, or both).

Overview​

The contact system has been enhanced to support multiple phone numbers with location-based display. This allows you to have different phone numbers shown in different parts of your site, such as a main number on the contact page and a support number in the footer.

Schema Structure​

Each phone number in the contactPhones array includes:

  • number (string, required): The phone number
  • label (localized object, optional): Label for the phone (e.g., "Main", "Sales", "Support")
    • Supports: en, es, ro
  • displayLocation (array, required): Where to display this phone number
    • Options: "contact", "footer", or both ["contact", "footer"]

Sanity Schema Example​

{
  name: 'contactPhones',
  type: 'array',
  of: [{
    type: 'object',
    fields: [
      {
        name: 'number',
        type: 'string',
        validation: Rule => Rule.required()
      },
      {
        name: 'label',
        type: 'object',
        fields: [
          { name: 'en', type: 'string' },
          { name: 'es', type: 'string' },
          { name: 'ro', type: 'string' }
        ]
      },
      {
        name: 'displayLocation',
        type: 'array',
        of: [{ type: 'string' }],
        options: {
          list: [
            { title: 'Contact Page', value: 'contact' },
            { title: 'Footer', value: 'footer' }
          ]
        }
      }
    ]
  }]
}

Usage​

Contact Page​

Phone numbers with displayLocation: ["contact"] or displayLocation: ["contact", "footer"] will appear on the contact page.

Phone numbers with displayLocation: ["footer"] or displayLocation: ["contact", "footer"] will appear in the footer.

Backward Compatibility​

The legacy contactPhone field is still supported as a fallback. If no phone numbers are configured in the contactPhones array, the system will automatically use the contactPhone field.

Frontend Implementation​

The frontend automatically:

  • Filters phone numbers by display location
  • Falls back to legacy contactPhone if no new phones are configured
  • Formats phone numbers for tel: links
  • Displays labels when available

Example Configuration​

Multiple Phone Numbers​

{
  "contactPhones": [
    {
      "number": "+1 234 567 8900",
      "label": {
        "en": "Main",
        "es": "Principal",
        "ro": "Principal"
      },
      "displayLocation": ["contact", "footer"]
    },
    {
      "number": "+1 234 567 8901",
      "label": {
        "en": "Sales",
        "es": "Ventas",
        "ro": "Vânzări"
      },
      "displayLocation": ["contact"]
    },
    {
      "number": "+1 234 567 8902",
      "label": {
        "en": "Support",
        "es": "Soporte",
        "ro": "Suport"
      },
      "displayLocation": ["footer"]
    }
  ]
}

Single Phone Number (Legacy)​

{
  "contactPhone": "+1 234 567 8900"
}

Phone Number Utilities​

Utility functions are available in src/lib/utils/phoneNumbers.ts for consistent phone number handling:

Functions​

  • getPhonesByLocation(phones, location): Filter phones by display location
  • getPhonesWithFallback(settings, location): Get phones with fallback to legacy field
  • formatPhoneForLink(phoneNumber): Format phone for tel: links
  • createPhoneLink(phoneNumber): Create tel: link URL
  • getFallbackPhone(settings): Get fallback phone for backward compatibility

Usage Example​

import { getPhonesWithFallback, createPhoneLink } from '@/lib/utils/phoneNumbers'

// Get phones for contact page
const contactPhones = getPhonesWithFallback(siteSettings, 'contact')

// Create phone link
const phoneLink = createPhoneLink('+1 234 567 8900')

Contact Page Design​

The contact page features:

  • Card-based layout: Contact information is displayed in a rounded card with proper spacing
  • Icon design: Each contact method has a circular icon background with teal accent color
  • Sticky positioning: Contact info card stays visible on large screens while scrolling
  • Interactive elements: Email and phone numbers are clickable with hover effects
  • Responsive design: Optimized for all screen sizes

Contact Information Display​

  • Email: Clickable mailto: link with hover effects
  • Phone: Multiple phone numbers with optional labels
  • Address: Displayed with map pin icon
  • Business Hours: Always visible with clock icon

Spacing and Alignment​

  • Consistent 8-unit spacing between sections
  • Proper icon alignment with mt-0.5 offset
  • Labels use mb-2 spacing for clear hierarchy
  • Phone numbers are indented when a phone label exists

Next Steps​