FormWidgets / PhoneField / Examples

PhoneField Examples

Live examples showing different phone number patterns for UK, US, and international formats.

View Documentation

1. US Standard Format

Classic US phone format: (###) ###-####

JavaScript
FormWidgets.init('#ph1', 'PhoneField', {
    pattern: '(###) ###-####',
    showPattern: true
});

2. UK Mobile (+44)

UK mobile in international format. Leading 0 is automatically removed when dialing prefix +44 is detected.

JavaScript
FormWidgets.init('#ph2', 'PhoneField', {
    pattern: '+44 ##### ######',
    showPattern: true
});
// Try typing: 07700900123 — leading 0 auto-removed
// Result: +44 7700 900123

3. UK Landline (+44)

UK landline with +44 international prefix.

JavaScript
FormWidgets.init('#ph3', 'PhoneField', {
    pattern: '+44 ## #### ####',
    showPattern: true
});

4. UK Mobile (Local Format)

UK mobile in local format without country code.

JavaScript
FormWidgets.init('#ph4', 'PhoneField', {
    pattern: '##### ######',
    showPattern: true
});
// Example: 07700 900123

5. UK Landline (Local Format)

UK landline in local format with area code.

JavaScript
FormWidgets.init('#ph5', 'PhoneField', {
    pattern: '### #### ####',
    showPattern: true
});
// Example: 020 7946 0958

6. International Format

Generic international format with country code prefix.

JavaScript
FormWidgets.init('#ph6', 'PhoneField', {
    pattern: '+## (###) ###-####',
    showPattern: true
});

7. Strict Validation (No Partial)

With allowPartial: false, an incomplete number shows a validation error on blur.

JavaScript
FormWidgets.init('#ph7', 'PhoneField', {
    pattern: '(###) ###-####',
    allowPartial: false,
    showPattern: true
});

8. Without Pattern Placeholder

Pattern placeholder disabled — field uses its own placeholder attribute.

JavaScript
FormWidgets.init('#ph8', 'PhoneField', {
    pattern: '(###) ###-####',
    showPattern: false
});

9. Data Attributes

Configure PhoneField entirely via HTML data attributes.

HTML
<input type="text" class="fw-phone"
       data-pattern="+44 ##### ######"
       data-show-pattern="true">