Title: Phone Field with Country Code for Elementor – Pluginry
Author: Mohsin Khan
Published: May 14, 2026
Last modified: May 17, 2026
---
Search plugins
# Phone Field with Country Code for Elementor – Pluginry
By [Mohsin Khan](https://profiles.wordpress.org/morkizdigital/)
[Download](https://downloads.wordpress.org/plugin/morkiz-phone-field-country-code-for-elementor.1.0.5.zip)
* [Details](https://wordpress.org/plugins/morkiz-phone-field-country-code-for-elementor/#description)
* [Reviews](https://wordpress.org/plugins/morkiz-phone-field-country-code-for-elementor/#reviews)
* [Installation](https://wordpress.org/plugins/morkiz-phone-field-country-code-for-elementor/#installation)
* [Development](https://wordpress.org/plugins/morkiz-phone-field-country-code-for-elementor/#developers)
[Support](https://wordpress.org/support/plugin/morkiz-phone-field-country-code-for-elementor/)
## Description
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](https://wordpress.org/plugins/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/` 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.
## Screenshots
[⌊Country code dropdown with flags inside an Elementor Pro form phone field on the
front end.⌉⌊Country code dropdown with flags inside an Elementor Pro form phone
field on the front end.⌉[
Country code dropdown with flags inside an Elementor Pro form phone field on the
front end.
[⌊Tel field settings inside the Elementor editor — set default country, preferred
list, exclude list, strict validation.⌉⌊Tel field settings inside the Elementor
editor — set default country, preferred list, exclude list, strict validation.⌉[
Tel field settings inside the Elementor editor — set default country, preferred
list, exclude list, strict validation.
[⌊Searchable country dropdown with per-country flags painted from individual SVGs(
cache-plugin safe).⌉⌊Searchable country dropdown with per-country flags painted
from individual SVGs (cache-plugin safe).⌉[
Searchable country dropdown with per-country flags painted from individual SVGs (
cache-plugin safe).
[⌊Strict mode validation rejecting an invalid phone number for the selected country.⌉⌊
Strict mode validation rejecting an invalid phone number for the selected country
.⌉[
Strict mode validation rejecting an invalid phone number for the selected country.
## Installation
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.
## FAQ
### 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.
## Reviews
There are no reviews for this plugin.
## Contributors & Developers
“Phone Field with Country Code for Elementor – Pluginry” is open source software.
The following people have contributed to this plugin.
Contributors
* [ Mohsin Khan ](https://profiles.wordpress.org/morkizdigital/)
[Translate “Phone Field with Country Code for Elementor – Pluginry” into your language.](https://translate.wordpress.org/projects/wp-plugins/morkiz-phone-field-country-code-for-elementor)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/morkiz-phone-field-country-code-for-elementor/),
check out the [SVN repository](https://plugins.svn.wordpress.org/morkiz-phone-field-country-code-for-elementor/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/morkiz-phone-field-country-code-for-elementor/)
by [RSS](https://plugins.trac.wordpress.org/log/morkiz-phone-field-country-code-for-elementor/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 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`.
## Meta
* Version **1.0.5**
* Last updated **2 months ago**
* Active installations **Fewer than 10**
* WordPress version ** 6.0 or higher **
* Tested up to **6.9.5**
* PHP version ** 7.4 or higher **
* Tags
* [country code](https://wordpress.org/plugins/tags/country-code/)[elementor](https://wordpress.org/plugins/tags/elementor/)
[elementor form](https://wordpress.org/plugins/tags/elementor-form/)[phone field](https://wordpress.org/plugins/tags/phone-field/)
[phone number](https://wordpress.org/plugins/tags/phone-number/)
* [Advanced View](https://wordpress.org/plugins/morkiz-phone-field-country-code-for-elementor/advanced/)
## Ratings
No reviews have been submitted yet.
[Your review](https://wordpress.org/support/plugin/morkiz-phone-field-country-code-for-elementor/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/morkiz-phone-field-country-code-for-elementor/reviews/)
## Contributors
* [ Mohsin Khan ](https://profiles.wordpress.org/morkizdigital/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/morkiz-phone-field-country-code-for-elementor/)