Phone Field with Country Code for Elementor – Flags & Validation

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.

1. Install and activate Elementor and Elementor Pro.
2. Upload this plugin via Plugins → Add New → Upload Plugin, or unzip into /wp-content/plugins/.
3. Activate.
4. In the Elementor editor, drop a Form widget on the page, add a Tel field, and toggle Country Code → Show in the field settings.

How do I add a country code dropdown in Elementor form?

Install and activate this plugin (it requires Elementor Pro for the Form widget). Open the form in the Elementor editor, edit the Tel field, and toggle Country Code → Show in the field settings. The dropdown, flags, and per-country validation are enabled with a single click — no extra widgets to add and no configuration required to get started.

Does Elementor have a built-in country code field?

No. The Tel field that ships with the Elementor Pro Form widget accepts free-text phone numbers and does not include a country selector, dial code, or per-country validation. This plugin adds those features to the existing Tel field rather than replacing it with a separate widget, so any form you’ve already built keeps working — you just toggle one setting per Tel field.

How do I validate phone numbers by country in Elementor?

Enable Strict Validation in the Tel field settings. Submissions are blocked client-side when the number does not match the selected country’s pattern (for example, a US number with only 8 digits is rejected). An always-on server-side sanity check (digit count and allowed characters) also runs on the elementor_pro/forms/validation/tel action, so the rule cannot be bypassed by disabling JavaScript.

Does this work without Elementor Pro?

No. The Form widget is an Elementor Pro feature, so Elementor Pro is required for this plugin to work.

Does it work with WPML and Polylang?

Yes. The country-list locale is resolved from WPML’s ICL_LANGUAGE_CODE or Polylang’s pll_current_language() when available, and all validation error strings are registered with WPML String Translation and Polylang’s string registry so they appear in their respective translation UIs.

What value gets submitted?

The full E.164 number, e.g. +919876543210. The input is kept in sync on every keystroke and just before submit, so the value Elementor receives is already in international format.

Does it make external HTTP calls?

No. The country list, flags, and validation library are all bundled locally. Auto-detect uses the browser’s navigator.language, not an IP lookup — which makes the plugin GDPR-friendly out of the box.

How do I translate the error messages?

Three options:

1. Use WPML String Translation or Polylang — the strings are registered automatically.
2. Generate a .po/.mo file in /languages/ using Loco Translate or POEdit.
3. Override them in code via the pfcc_error_messages filter:
   add_filter( ‘pfcc_error_messages’, function( $msgs ) { $msgs[2] = ‘Zu kurz.’; return $msgs; } );

Does the country dropdown appear translated too?

Error messages: yes. Country names: English by default in 1.0. You can provide an i18n object at window.intlTelInputI18n_PFCC via a custom snippet to localise them. Bundled i18n packs are planned for 1.1.

Can I use multiple Tel fields on the same page?

Yes — each field is initialised independently.

Does it work with Elementor Popups?

Yes. The dropdown z-index is set to sit above popup backdrops.

1.0.5

• Added: bundled intlTelInputWithUtils.min.js so per-country phone-number validation and E.164 formatting work without a separate utils fetch.
• Added: plugin icon for the WordPress.org listing.
• Added: demo video on the listing page.
• Docs: rewritten readme with SEO-optimised description, new FAQ entries, and a Compatibility & Use Cases section.

1.0.4

• Added: new developer filters to match the documented integration surface:
  • pfcc_default_country — override the default country ISO-2 per field at render time.
  • pfcc_preferred_countries — filter the top-of-list country order (array or CSV).
  • pfcc_only_countries and pfcc_exclude_countries — dynamically whitelist / blacklist the dropdown.
  • pfcc_validation_enabled — globally disable the server-side sanity check (for users bringing their own validator via libphonenumber-php).
  • pfcc_validation_regex — override the allowed-characters regex used during server-side shape validation.
  • pfcc_validation_min_digits and pfcc_validation_max_digits — tighten or relax the digit-count bounds (defaults 4 and 15).
• Unchanged: pfcc_error_messages and pfcc_locale continue to work as before.

1.0.3

• Fixed: submissions occasionally landed without the dial code prefix when the user clicked submit directly from inside the phone field (without a prior blur). The plugin now also syncs the E.164 value in capture phase on pointerdown / mousedown / touchstart / Enter keydown targeting any submit control, so Elementor Pro form handlers that read form data on button click still receive the fully-prefixed number.

1.0.2

• Fixed: flags now render correctly in intl-tel-input v27 — paintFlags scans every .iti__flag node directly and applies per-country inline SVGs with !important, so every flag in the dropdown matches its country.
• Fixed: the invalid pattern="[0-9()#&+*-=.]+" attribute emitted by Elementor Pro’s Tel field is now removed on init — eliminates the browser-level SyntaxError thrown by engines that evaluate patterns under the RegExp v flag.
• Changed: the library’s sprite background is disabled in CSS (.iti__flag { background-image: none !important; }) — inline per-country SVGs survive WP-Rocket “Remove Unused CSS” and LiteSpeed CSS minification.
• Removed: runtime fetch of intlTelInputUtils.js — loadUtils is unset; client-side validation uses a digit-count fallback and the server-side check on elementor_pro/forms/validation/tel is authoritative.
• Improved: dropdown, search, and selected-country styling refreshed for better visual consistency with Elementor themes.

1.0.1

• Internal maintenance release — superseded by 1.0.2.

1.0.0

• Initial release.
• Country dropdown on Elementor Pro Form tel fields.
• WPML / Polylang integration for validation strings and country-list locale.
• Cache-plugin-safe per-flag SVG rendering.
• E.164 pre-fill guard.
• No-intercept submission handling (fixes duplicate-submit and multi-step bugs present in other plugins).
• Server-side validation hook on elementor_pro/forms/validation/tel.