{"id":304685,"date":"2026-05-14T19:10:51","date_gmt":"2026-05-14T19:10:51","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/phone-field-with-country-code-for-elementor\/"},"modified":"2026-05-17T20:08:04","modified_gmt":"2026-05-17T20:08:04","slug":"morkiz-phone-field-country-code-for-elementor","status":"publish","type":"plugin","link":"https:\/\/tr.wordpress.org\/plugins\/morkiz-phone-field-country-code-for-elementor\/","author":20047945,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.5","stable_tag":"1.0.5","tested":"6.9.4","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Phone Field with Country Code for Elementor - Pluginry","header_author":"Morkiz Digital","header_description":"Adds a country-code dropdown with flags to Elementor Pro form tel fields. Auto-localised country list, WPML\/Polylang-aware, cache-plugin safe, and submission-safe.","assets_banners_color":"66607d","last_updated":"2026-05-17 20:08:04","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/pluginry.com\/","header_author_uri":"https:\/\/profiles.wordpress.org\/morkizdigital\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":204,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.4":{"tag":"1.0.4","author":"morkizdigital","date":"2026-05-14 19:10:26"},"1.0.5":{"tag":"1.0.5","author":"morkizdigital","date":"2026-05-17 20:08:04"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon.svg":{"filename":"icon.svg","revision":3534358,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3534830,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3534830,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.4","1.0.5"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3534830,"resolution":"1","location":"assets","locale":"","width":1575,"height":855},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3534830,"resolution":"2","location":"assets","locale":"","width":800,"height":547},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3534830,"resolution":"3","location":"assets","locale":"","width":584,"height":489},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3534830,"resolution":"4","location":"assets","locale":"","width":291,"height":789}},"screenshots":{"1":"Country code dropdown with flags inside an Elementor Pro form phone field on the front end.","2":"Tel field settings inside the Elementor editor \u2014 set default country, preferred list, exclude list, strict validation.","3":"Searchable country dropdown with per-country flags painted from individual SVGs (cache-plugin safe).","4":"Strict mode validation rejecting an invalid phone number for the selected country."}},"plugin_section":[],"plugin_tags":[145660,76538,154683,149230,5304],"plugin_category":[],"plugin_contributors":[262977],"plugin_business_model":[],"class_list":["post-304685","plugin","type-plugin","status-publish","hentry","plugin_tags-country-code","plugin_tags-elementor","plugin_tags-elementor-form","plugin_tags-phone-field","plugin_tags-phone-number","plugin_contributors-morkizdigital","plugin_committers-morkizdigital"],"banners":{"banner":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/banner-772x250.png?rev=3534830","banner_2x":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/banner-1544x500.png?rev=3534830","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/icon.svg?rev=3534358","icon":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/icon.svg?rev=3534358","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/screenshot-1.png?rev=3534830","caption":"Country code dropdown with flags inside an Elementor Pro form phone field on the front end."},{"src":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/screenshot-2.png?rev=3534830","caption":"Tel field settings inside the Elementor editor \u2014 set default country, preferred list, exclude list, strict validation."},{"src":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/screenshot-3.png?rev=3534830","caption":"Searchable country dropdown with per-country flags painted from individual SVGs (cache-plugin safe)."},{"src":"https:\/\/ps.w.org\/morkiz-phone-field-country-code-for-elementor\/assets\/screenshot-4.png?rev=3534830","caption":"Strict mode validation rejecting an invalid phone number for the selected country."}],"raw_content":"<!--section=description-->\n<p>Add an <strong>international country code dropdown<\/strong> with flags to any Elementor Pro form phone field. Searchable list, WPML-aware error messages, E.164 output, and per-country validation \u2014 without the duplicate submissions, broken multi-step navigation, and identical flags that affect similar plugins.<\/p>\n\n<p>https:\/\/www.youtube.com\/watch?v=8HKMlfmIEe4<\/p>\n\n<h4>Country Code Field Features for Elementor<\/h4>\n\n<ul>\n<li><strong>Country dropdown on any Tel field<\/strong> \u2014 no new widget, just extra controls inside the existing form field settings.<\/li>\n<li><strong>Auto-localised error messages<\/strong> \u2014 validation strings are translatable via WPML String Translation, Polylang, Loco Translate, or a <code>.po\/.mo<\/code> file.<\/li>\n<li><strong>Cache-plugin safe flags<\/strong> \u2014 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.<\/li>\n<li><strong>No duplicate submissions<\/strong> \u2014 unlike the common reference implementation, this plugin never calls <code>handleSubmit<\/code> or <code>setTimeout<\/code>. It keeps the input's E.164 value fresh and lets Elementor's native submit handler run untouched.<\/li>\n<li><strong>Safe pre-fill<\/strong> \u2014 if the field is pre-populated with an E.164 value (cookie, autofill, URL param), the country dial code is not duplicated.<\/li>\n<li><strong>Auto-detect visitor country<\/strong> \u2014 uses the browser's language, no external API call.<\/li>\n<li><strong>Preferred \/ Only \/ Exclude country lists<\/strong> \u2014 customize which countries appear in the dropdown.<\/li>\n<li><strong>Multi-step form compatible<\/strong> \u2014 does not interfere with Elementor's step navigation.<\/li>\n<li><strong>Strict validation (optional)<\/strong> \u2014 blocks submission if the number fails <code>intl-tel-input<\/code> validation.<\/li>\n<li><strong>Server-side sanity check<\/strong> \u2014 digits + length bounds enforced in <code>elementor_pro\/forms\/validation\/tel<\/code>.<\/li>\n<\/ul>\n\n<h4>Requirements<\/h4>\n\n<ul>\n<li>WordPress 6.0+<\/li>\n<li>PHP 7.4+<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\">Elementor<\/a> + <strong>Elementor Pro<\/strong> (the Form widget is an Elementor Pro feature)<\/li>\n<\/ul>\n\n<h3>Compatibility &amp; Use Cases<\/h3>\n\n<p><strong>Tested compatibility:<\/strong><\/p>\n\n<ul>\n<li><strong>Elementor Pro<\/strong> \u2014 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.<\/li>\n<li><strong>WPML &amp; Polylang<\/strong> \u2014 the country-list locale is resolved from the active language, and every validation error string is registered with both string-translation registries.<\/li>\n<li><strong>Cache plugins<\/strong> \u2014 WP-Rocket, LiteSpeed Cache, W3 Total Cache, and Autoptimize won't break the flags. Per-country SVGs are painted via inline <code>style<\/code> attributes that no CSS minifier can prune.<\/li>\n<li><strong>Multi-step forms<\/strong> \u2014 the plugin never wraps Elementor's submit handler, so multi-step navigation (Next \/ Previous) stays intact.<\/li>\n<\/ul>\n\n<p><strong>Privacy &amp; performance:<\/strong><\/p>\n\n<ul>\n<li><strong>GDPR-friendly<\/strong> \u2014 no external API calls. Auto-detect uses <code>navigator.language<\/code> (a local browser hint), not an IP lookup or third-party geo-service.<\/li>\n<li><strong>Lightweight<\/strong> \u2014 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.<\/li>\n<\/ul>\n\n<p><strong>Common use cases:<\/strong><\/p>\n\n<ul>\n<li>Contact forms with a phone field<\/li>\n<li>Registration and onboarding forms<\/li>\n<li>Lead-generation and quote-request forms<\/li>\n<li>Booking and appointment forms<\/li>\n<li>WhatsApp click-to-chat and SMS callback forms \u2014 the E.164 output (<code>+919876543210<\/code>) is ready to drop into a <code>wa.me\/&lt;number&gt;<\/code> link or a CRM webhook<\/li>\n<\/ul>\n\n<h3>Credits \/ Third-Party Libraries<\/h3>\n\n<p>This plugin bundles the following third-party assets:<\/p>\n\n<ul>\n<li><strong>intl-tel-input v27.1.2<\/strong> by Jack O'Connor \u2014 https:\/\/github.com\/jackocnr\/intl-tel-input \u2014 licensed under the MIT License. See <code>assets\/intl-tel-input-LICENSE.txt<\/code>.<\/li>\n<li><strong>Country flag SVGs<\/strong> \u2014 flags are not copyrightable in most jurisdictions and are distributed under the same GPLv2 licence as this plugin.<\/li>\n<\/ul>\n\n<p>\"Elementor\" and \"Elementor Pro\" are trademarks of Elementor Ltd. This plugin is not affiliated with, endorsed by, or sponsored by Elementor Ltd.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate <strong>Elementor<\/strong> and <strong>Elementor Pro<\/strong>.<\/li>\n<li>Upload this plugin via <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>, or unzip into <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate.<\/li>\n<li>In the Elementor editor, drop a <strong>Form<\/strong> widget on the page, add a <strong>Tel<\/strong> field, and toggle <strong>Country Code \u2192 Show<\/strong> in the field settings.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20add%20a%20country%20code%20dropdown%20in%20elementor%20form%3F\"><h3>How do I add a country code dropdown in Elementor form?<\/h3><\/dt>\n<dd><p>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 <strong>Country Code \u2192 Show<\/strong> in the field settings. The dropdown, flags, and per-country validation are enabled with a single click \u2014 no extra widgets to add and no configuration required to get started.<\/p><\/dd>\n<dt id=\"does%20elementor%20have%20a%20built-in%20country%20code%20field%3F\"><h3>Does Elementor have a built-in country code field?<\/h3><\/dt>\n<dd><p>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 \u2014 you just toggle one setting per Tel field.<\/p><\/dd>\n<dt id=\"how%20do%20i%20validate%20phone%20numbers%20by%20country%20in%20elementor%3F\"><h3>How do I validate phone numbers by country in Elementor?<\/h3><\/dt>\n<dd><p>Enable <strong>Strict Validation<\/strong> 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 <code>elementor_pro\/forms\/validation\/tel<\/code> action, so the rule cannot be bypassed by disabling JavaScript.<\/p><\/dd>\n<dt id=\"does%20this%20work%20without%20elementor%20pro%3F\"><h3>Does this work without Elementor Pro?<\/h3><\/dt>\n<dd><p>No. The Form widget is an Elementor Pro feature, so Elementor Pro is required for this plugin to work.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20wpml%20and%20polylang%3F\"><h3>Does it work with WPML and Polylang?<\/h3><\/dt>\n<dd><p>Yes. The country-list locale is resolved from WPML's <code>ICL_LANGUAGE_CODE<\/code> or Polylang's <code>pll_current_language()<\/code> 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.<\/p><\/dd>\n<dt id=\"what%20value%20gets%20submitted%3F\"><h3>What value gets submitted?<\/h3><\/dt>\n<dd><p>The full E.164 number, e.g. <code>+919876543210<\/code>. The input is kept in sync on every keystroke and just before submit, so the value Elementor receives is already in international format.<\/p><\/dd>\n<dt id=\"does%20it%20make%20external%20http%20calls%3F\"><h3>Does it make external HTTP calls?<\/h3><\/dt>\n<dd><p>No. The country list, flags, and validation library are all bundled locally. Auto-detect uses the browser's <code>navigator.language<\/code>, not an IP lookup \u2014 which makes the plugin GDPR-friendly out of the box.<\/p><\/dd>\n<dt id=\"how%20do%20i%20translate%20the%20error%20messages%3F\"><h3>How do I translate the error messages?<\/h3><\/dt>\n<dd><p>Three options:<\/p>\n\n<ol>\n<li>Use WPML String Translation or Polylang \u2014 the strings are registered automatically.<\/li>\n<li>Generate a <code>.po\/.mo<\/code> file in <code>\/languages\/<\/code> using Loco Translate or POEdit.<\/li>\n<li>Override them in code via the <code>pfcc_error_messages<\/code> filter:\n   add_filter( 'pfcc_error_messages', function( $msgs ) { $msgs[2] = 'Zu kurz.'; return $msgs; } );<\/li>\n<\/ol><\/dd>\n<dt id=\"does%20the%20country%20dropdown%20appear%20translated%20too%3F\"><h3>Does the country dropdown appear translated too?<\/h3><\/dt>\n<dd><p>Error messages: yes. Country names: English by default in 1.0. You can provide an <code>i18n<\/code> object at <code>window.intlTelInputI18n_PFCC<\/code> via a custom snippet to localise them. Bundled i18n packs are planned for 1.1.<\/p><\/dd>\n<dt id=\"can%20i%20use%20multiple%20tel%20fields%20on%20the%20same%20page%3F\"><h3>Can I use multiple Tel fields on the same page?<\/h3><\/dt>\n<dd><p>Yes \u2014 each field is initialised independently.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20elementor%20popups%3F\"><h3>Does it work with Elementor Popups?<\/h3><\/dt>\n<dd><p>Yes. The dropdown z-index is set to sit above popup backdrops.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.5<\/h4>\n\n<ul>\n<li>Added: bundled <code>intlTelInputWithUtils.min.js<\/code> so per-country phone-number validation and E.164 formatting work without a separate utils fetch.<\/li>\n<li>Added: plugin icon for the WordPress.org listing.<\/li>\n<li>Added: demo video on the listing page.<\/li>\n<li>Docs: rewritten readme with SEO-optimised description, new FAQ entries, and a Compatibility &amp; Use Cases section.<\/li>\n<\/ul>\n\n<h4>1.0.4<\/h4>\n\n<ul>\n<li>Added: new developer filters to match the documented integration surface:\n\n<ul>\n<li><code>pfcc_default_country<\/code> \u2014 override the default country ISO-2 per field at render time.<\/li>\n<li><code>pfcc_preferred_countries<\/code> \u2014 filter the top-of-list country order (array or CSV).<\/li>\n<li><code>pfcc_only_countries<\/code> and <code>pfcc_exclude_countries<\/code> \u2014 dynamically whitelist \/ blacklist the dropdown.<\/li>\n<li><code>pfcc_validation_enabled<\/code> \u2014 globally disable the server-side sanity check (for users bringing their own validator via libphonenumber-php).<\/li>\n<li><code>pfcc_validation_regex<\/code> \u2014 override the allowed-characters regex used during server-side shape validation.<\/li>\n<li><code>pfcc_validation_min_digits<\/code> and <code>pfcc_validation_max_digits<\/code> \u2014 tighten or relax the digit-count bounds (defaults 4 and 15).<\/li>\n<\/ul><\/li>\n<li>Unchanged: <code>pfcc_error_messages<\/code> and <code>pfcc_locale<\/code> continue to work as before.<\/li>\n<\/ul>\n\n<h4>1.0.3<\/h4>\n\n<ul>\n<li>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.<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Fixed: flags now render correctly in intl-tel-input v27 \u2014 paintFlags scans every <code>.iti__flag<\/code> node directly and applies per-country inline SVGs with <code>!important<\/code>, so every flag in the dropdown matches its country.<\/li>\n<li>Fixed: the invalid <code>pattern=\"[0-9()#&amp;+*-=.]+\"<\/code> attribute emitted by Elementor Pro's Tel field is now removed on init \u2014 eliminates the browser-level <code>SyntaxError<\/code> thrown by engines that evaluate patterns under the RegExp <code>v<\/code> flag.<\/li>\n<li>Changed: the library's sprite background is disabled in CSS (<code>.iti__flag { background-image: none !important; }<\/code>) \u2014 inline per-country SVGs survive WP-Rocket \"Remove Unused CSS\" and LiteSpeed CSS minification.<\/li>\n<li>Removed: runtime fetch of <code>intlTelInputUtils.js<\/code> \u2014 <code>loadUtils<\/code> is unset; client-side validation uses a digit-count fallback and the server-side check on <code>elementor_pro\/forms\/validation\/tel<\/code> is authoritative.<\/li>\n<li>Improved: dropdown, search, and selected-country styling refreshed for better visual consistency with Elementor themes.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Internal maintenance release \u2014 superseded by 1.0.2.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Country dropdown on Elementor Pro Form tel fields.<\/li>\n<li>WPML \/ Polylang integration for validation strings and country-list locale.<\/li>\n<li>Cache-plugin-safe per-flag SVG rendering.<\/li>\n<li>E.164 pre-fill guard.<\/li>\n<li>No-intercept submission handling (fixes duplicate-submit and multi-step bugs present in other plugins).<\/li>\n<li>Server-side validation hook on <code>elementor_pro\/forms\/validation\/tel<\/code>.<\/li>\n<\/ul>","raw_excerpt":"Add an international country code dropdown with flags to Elementor form phone fields. Lightweight, WPML-aware, with strict per-country validation.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/304685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=304685"}],"author":[{"embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/morkizdigital"}],"wp:attachment":[{"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=304685"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=304685"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=304685"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=304685"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=304685"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/tr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=304685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}