Contact Form 7: Countries, Flags, Intl Phones, Geolocation

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.

jamieholst/selectToAutocomplete: Turns any select tag into an autocomplete field with weighted options, synonyms and loose matching

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


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 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