Phone Field with Country Code for Elementor – Pluginry

Add an international country code dropdown with flags to any Elementor Pro form phone field. Searchable list, WPML-aware error messages, E.164 output, and per-country validation — without the duplicate submissions, broken multi-step navigation, and identical flags that affect similar plugins.

Country Code Field Features for Elementor

• Country dropdown on any Tel field — no new widget, just extra controls inside the existing form field settings.
• Auto-localised error messages — validation strings are translatable via WPML String Translation, Polylang, Loco Translate, or a .po/.mo file.
• Cache-plugin safe flags — the selected flag is painted via an inline style pointing to an individual SVG, so WP-Rocket’s « Remove Unused CSS » and LiteSpeed’s CSS minifier can’t turn every country’s flag into the same one.
• No duplicate submissions — unlike the common reference implementation, this plugin never calls handleSubmit or setTimeout. It keeps the input’s E.164 value fresh and lets Elementor’s native submit handler run untouched.
• Safe pre-fill — if the field is pre-populated with an E.164 value (cookie, autofill, URL param), the country dial code is not duplicated.
• Auto-detect visitor country — uses the browser’s language, no external API call.
• Preferred / Only / Exclude country lists — customize which countries appear in the dropdown.
• Multi-step form compatible — does not interfere with Elementor’s step navigation.
• Strict validation (optional) — blocks submission if the number fails intl-tel-input validation.
• Server-side sanity check — digits + length bounds enforced in elementor_pro/forms/validation/tel.

Requirements

• WordPress 6.0+
• PHP 7.4+
• Elementor + Elementor Pro (the Form widget is an Elementor Pro feature)

Compatibility & Use Cases

Tested compatibility:

• Elementor Pro — works with the Pro Form widget; the country-code controls appear inside the existing Tel field settings, so there’s no new widget to learn.
• WPML & Polylang — the country-list locale is resolved from the active language, and every validation error string is registered with both string-translation registries.
• Cache plugins — WP-Rocket, LiteSpeed Cache, W3 Total Cache, and Autoptimize won’t break the flags. Per-country SVGs are painted via inline style attributes that no CSS minifier can prune.
• Multi-step forms — the plugin never wraps Elementor’s submit handler, so multi-step navigation (Next / Previous) stays intact.

Privacy & performance:

• GDPR-friendly — no external API calls. Auto-detect uses navigator.language (a local browser hint), not an IP lookup or third-party geo-service.
• Lightweight — the intl-tel-input library, CSS, and country-code script are enqueued only on pages where an Elementor form with the country-code feature is actually rendered. Other pages are completely untouched, so PageSpeed and Core Web Vitals scores on the rest of your site are unaffected.

Common use cases:

• Contact forms with a phone field
• Registration and onboarding forms
• Lead-generation and quote-request forms
• Booking and appointment forms
• WhatsApp click-to-chat and SMS callback forms — the E.164 output (+919876543210) is ready to drop into a wa.me/<number> link or a CRM webhook

Credits / Third-Party Libraries

This plugin bundles the following third-party assets:

• intl-tel-input v27.1.2 by Jack O’Connor — https://github.com/jackocnr/intl-tel-input — licensed under the MIT License. See assets/intl-tel-input-LICENSE.txt.
• Country flag SVGs — flags are not copyrightable in most jurisdictions and are distributed under the same GPLv2 licence as this plugin.

« Elementor » and « Elementor Pro » are trademarks of Elementor Ltd. This plugin is not affiliated with, endorsed by, or sponsored by Elementor Ltd.