Contact Form 7: Countries, Flags, Intl Phones, Geolocation
Code: Proper Country Phone input in CF7
Wrapped two libraries and added a settings page in Contact > CPF Settings. Settings are for all forms, and that by itself is not proper coding.
Using two separate libraries:
Pure JavaScript plugin for entering and validating international telephone numbers jackocnr/intl-tel-input
Country Picker
Country picker mrmarkfrench/country-select-js also based on intl-tel-input, using jQuery
Here are a couple of problematic decisions - using jQuery and often outdated libraries - for example, intl-tel-input is in version 12.4.0 from 2018, while the latest is v17.0.19 from 2022
country-regions/country-region-selector: Dynamic country and region dropdowns for your forms.
mrmarkfrench/country-select-js: A quick jQuery-based country picker based on intl-tel-input is built based on the jackocnr/intl-tel-input
Data Resources
Resources for those libraries are taken from the following.
Collection: Countries Data / Regions Data
In multiple languages and with national flags stefangabos/world_countries, extensive constantly updated lists of world countries, country codes. Updated list of world countries, in JSON, CSV, XML and YAML at mledoze/countries country-regions/country-region-data: A source list of countries, regions and shortcodes in JSON and JS format. sufyan-ashraf/js-countries-states-cities the data for countries, states and cities
Collection: Country Flags
Updated collection of flags country in SVG / PNG fonttools/region-flags Flags in 4x3 and 1x1 formats lipis/flag-icons: 🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration Optimized 3:2 for small screens catamphetamine/country-flag-icons: Vector (*.svg) country flag icons in 3x2 aspect ratio Round flags HatScripts/circle-flags: A collection of 400+ minimal circular SVG country, state and language flags hampusborgos/country-flags: SVG and PNG renders of all countries’ flags. madebybowtie/FlagKit: Beautiful flag icons for usage in apps and on the web. With just the links to WIkipedia SVG flags ronatskiy/country-flags-svg: A list of countries with url links to a svg image which you can simply use in your web application
Demos:
Code: Offline Geolocation
JavaScript Library: Select
Vanilla JS / Plain JS, dependency-free
Tom Select with repo at orchidjs/tom-select: Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
Choices-js/Choices: A vanilla JS customisable select box/text input plugin ⚡️ is similar to Select2 and Selectize but without the jQuery dependency, and it uses the powerful Fuse search library for filtering list items.
Vanilla Javascript Nice Select2 with repo at bluzky/nice-select2: A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns
tail.select.js je interesantan i malo drugačiji od ostalih.
Probably abandoned and unmaintained libraries: typeahead.js by Twitter, JavaScript-autoComplete by Pixabay, amazon-autocomplete, Selectr are all unmaintained.
jQuery dependent
Select2 - The jQuery replacement for select boxes
selectize/selectize.js: Selectize is the hybrid of a textbox and
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes is deprecated.
MOJ PLUGIN
The Utilities Script is still approximately 215KB even after minification. This is because formatting and validating international numbers is a complex task that varies depending on the country or district, and the script currently supports around 230 countries. To prevent any blocking, the utilsScript option will only fetch the script once the page has finished loading.