Phone Field with Country Code for Elementor – Flags & Validation
| 开发者 | morkizdigital |
|---|---|
| 更新时间 | 2026年5月18日 04:08 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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/.mofile. - 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
handleSubmitorsetTimeout. 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-inputvalidation. - Server-side sanity check — digits + length bounds enforced in
elementor_pro/forms/validation/tel.
- WordPress 6.0+
- PHP 7.4+
- Elementor + Elementor Pro (the Form widget is an Elementor Pro feature)
55… → 5555…) | We detect E.164 on init and use setNumber() |
| Flags all look the same after installing WP-Rocket / LiteSpeed | Inline SVG per country — nothing to strip |
| Validation error texts not translatable with WPML | Error strings registered with WPML String Translation + Polylang |
| Country list language can't match site language | Locale resolved from WPML/Polylang/WP locale on the server |
| Preferred countries / auto-detect paywalled | Both included |
安装:
- Install and activate Elementor and Elementor Pro.
- Upload this plugin via Plugins → Add New → Upload Plugin, or unzip into
/wp-content/plugins/. - Activate.
- 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:
- Use WPML String Translation or Polylang — the strings are registered automatically.
- Generate a
.po/.mofile in/languages/using Loco Translate or POEdit. - Override them in code via the
pfcc_error_messagesfilter: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.
更新日志:
- 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_countriesandpfcc_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_digitsandpfcc_validation_max_digits— tighten or relax the digit-count bounds (defaults 4 and 15).- Unchanged:
pfcc_error_messagesandpfcc_localecontinue to work as before.
- 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.
- Fixed: flags now render correctly in intl-tel-input v27 — paintFlags scans every
.iti__flagnode 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-levelSyntaxErrorthrown by engines that evaluate patterns under the RegExpvflag. - 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—loadUtilsis unset; client-side validation uses a digit-count fallback and the server-side check onelementor_pro/forms/validation/telis authoritative. - Improved: dropdown, search, and selected-country styling refreshed for better visual consistency with Elementor themes.
- Internal maintenance release — superseded by 1.0.2.
- 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.