[Enhancement] Add country code picker to Contact Form phone field

[anjalii40]

Is your feature request related to a problem?

Yes. On the official contact page (https://clickhouse.com/company/contact?loc=homepage-hero), the phone number input field is a standard raw text input. International users frequently face friction deciding whether to include their country dial code, spacing, or the "+" prefix, which can lead to layout errors or incorrect data submission formats.

Describe the solution you'd like

Introduce a country code dropdown picker adjacent to the phone number input field (similar to standard industry UI layouts like react-phone-number-input).

• It should display the country flag/name alongside the standard dial code prefix (e.g., +1, +91, +44).
• It should sanitize input entries to only accept digits while maintaining the selected dial code prefix separately for backend consistency.

Additional Context

I have drafted a basic structural preview of how a modular dropdown configuration could fit neatly into a standard React/Next.js setup:

import { useState } from 'react'

const countryDialCodes = [
  { code: '+1', country: 'US/CA' },
  { code: '+91', country: 'IN' },
  { code: '+44', country: 'UK' },
]

export default function PhoneField() {
  const [dialCode, setDialCode] = useState('+1')
  const [phoneNumber, setPhoneNumber] = useState('')

  return (
    <div className="phone-field-wrapper" style={{ display: 'flex', border: '1px solid #ccc', borderRadius: '6px' }}>
      <select value={dialCode} onChange={(e) => setDialCode(e.target.value)} style={{ padding: '10px', border: 'none' }}>
        {countryDialCodes.map(c => (
          <option key={c.code} value={c.code}>{c.code} ({c.country})</option>
        ))}
      </select>
      <input 
        type="tel" 
        placeholder="Phone Number"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value.replace(/\D/g, ''))}
        style={{ padding: '10px', border: 'none', flex: 1 }}
      />
    </div>
  )
}