Eleven Digits, No Drama: Making Elementor Pro's Phone Field Behave for UK Numbers

Phone fields are the small detail that quietly costs UK agencies enquiries. Get the validation too loose and your inbox fills with junk; get it too tight and a solicitor typing 0207 946 0123 (yes, people still do) bounces off your contact form and never comes back. Elementor Pro gives you a Tel field, a required toggle and not much else — so the actual thinking is on you.

Here's the pattern we use on client builds, and the test numbers we run before handover.

Decide what the field is for before you style it

Two very different jobs, two different rule sets:

• Callback field. The number needs to be dialable by a human. Loose validation, generous error copy, formatting left to the visitor.
• Data field. The number goes into a CRM, an SMS provider or a call-tracking platform. It needs to be normalised to E.164 (+447700900123) somewhere in the pipeline.

If it's both — and it usually is — store the clean version and display the friendly one. Trying to force punters into one canonical format at the point of typing is where most of the friction comes from.

Set the field up properly first

In the Form widget, add a field and set Type: Tel. Not Number — that kills the leading zero and the plus sign, which immediately rules out every UK number ever. Not Text either, because type="tel" gives mobile visitors the numeric keypad, and that alone lifts completion rates on phones.

A reasonable starting configuration:

• Label: Mobile or landline
• Placeholder: 07700 900123 or +44 20 7946 0123 — showing both formats does more work than any regex
• Required: on, if you genuinely can't work without it
• Field ID: phone (consistent, lowercase, no spaces — you'll thank yourself when you're writing the validation hook)

While you're there, add autocomplete="tel" if your setup lets you pass custom attributes. It's a small accessibility and conversion win, and it means iOS offers the visitor's own number rather than making them squint at their contacts app.

Elementor's built-in check is basically nothing

Beyond "required", the Tel field has no format validation of its own. Anything that looks like a number — or doesn't — goes through. That's fine for a five-page brochure site with a low spam profile, and not fine for a client with a paid search budget.

Put the rule server-side, not just in the browser

Client-side patterns are nice for instant feedback and useless as a gate. The reliable place is the elementor_pro/forms/validation hook:

add_action( 'elementor_pro/forms/validation', function( $record, $ajax_handler ) {
    $field = $record->get_field( 'phone' );
    if ( empty( $field['value'] ) ) {
        return;
    }

    // Strip spaces, hyphens, brackets. Keep digits and the plus.
    $clean = preg_replace( '/[^0-9+]/', '', $field['value'] );
    // 0044 is a common way of writing +44 — normalise it.
    $clean = preg_replace( '/^0044/', '+44', $clean );

    $valid = preg_match( '/^(?:\+44[1-9]\d{8,9}|0[1-9]\d{8,9})$/', $clean );

    if ( ! $valid ) {
        $ajax_handler->add_error(
            $field['id'],
            'That number doesn\'t look quite right. Try 07700 900123 or +44 20 7946 0123.'
        );
    }
}, 10, 2 );

Two deliberate choices in there. First, it strips punctuation before testing, so brackets and spaces never cause a rejection. Second, it stays deliberately permissive: 0 or +44, then a digit from 1–9, then eight or nine more. That covers every UK geographic and mobile number without pretending to know which area codes are live this month.

Note the error copy. "Invalid input" tells the visitor nothing and reads like a parking meter. Naming the two formats you accept does the work of a support email.

The formats you'll actually see

That last entry is the reason we strip punctuation first and validate second. Reject that and you've turned away a perfectly good enquiry over a bracketing convention.

tel: links are a separate problem

Every UK build has a click-to-call somewhere — header, mobile sticky bar, footer. The href needs digits and a plus, no spaces, no brackets:

<a href="tel:+442079460123">020 7946 0123</a>

Where this breaks in Elementor Pro is when the same ACF or custom field feeds both the display text and the link. Spaces in the source field produce a subtly broken tel: URI that works on some Android handsets and fails silently on iOS. Either keep two fields — one for display, one for dialling — or run the source through a shortcode that strips non-dial characters. Don't let a WYSIWYG or a link field mangle the plus sign either; check the rendered href in the browser, not in the editor.

Spam is not a phone-format problem

Tightening the pattern feels productive when junk arrives, but bots will happily generate a plausible-looking mobile number. Format validation is a data-quality tool, not a bouncer. Use the honeypot, keep reCAPTCHA or hCaptcha switched on, and consider a submission-time check if a client is being targeted. The phone rule stays loose, and the actual spam defence lives elsewhere.

A five-minute test matrix

Ofcom reserves certain numbers for drama and fiction, which makes them perfect for testing without dialling a stranger. Run this lot through the live form before you hand anything over:

If the client takes international enquiries, widen the pattern to accept a leading + and a country code rather than telling people to invent a UK number. Add that decision to the handover notes so the next person doesn't "fix" it back.

One last thing: test the form on a real phone, on 4G, with autofill doing its thing. Half the phone-field bugs we get called about only appear when Safari decides to paste a contact card into the box — and that's a much easier conversation to have before launch than after.