How to pre-select country calling codes using ipdata

Knowing which country your customer is in can be valuable for many reasons. One of the most frustrating parts of any website is the form filling, and entering your country calling code is one of the worst.

Even with a well-designed form, scrolling through all the calling codes (around 243, depending on which source you use) is difficult and slow. If you’re able to search the list, it’s still frustrating, is it +44 for the Isle of Man, Guernsey, United Kingdom, or Jersey? Does it matter? Will selecting the wrong country break everything? All these questions can easily be answered without any user input and solved using some simple JavaScript.

How NOT to do it

First, let’s take a look at how many websites implement their country code selection…

Scrolling through hundreds of options is not good enough for your users. Let’s give them something better.

How to do it

There’s an excellent library called [intl-tel-input](https://github.com/jackocnr/intl-tel-input) which can provide us with an easy-to-use and pretty input for collecting phone numbers with their calling code. Let’s add it to our page and see how much better it is.

<!-- Load the intl-tel-input styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" />

<!-- This is our phone number input -->
<input type="tel" id="phone" />

<!-- Load the intl-tel-input script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>

<!-- Initialise the library -->
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input, {
    // utilsScript is useful for providing validation and pretty formatting
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js",
  });
</script>

And here are the results, much better!

Unfortunately, due to the large number of countries, there’s still a lot of scrolling involved to find the correct calling code. The library allows users to type in their own calling code, and it’ll update the flag accordingly, but we can still do better.

Auto-select the correct country

Using ipdata, we can look up the user’s country and use that to pre-select the correct calling code. intl-tel-input has an easy option to help make this even simpler.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" />

<input type="tel" id="phone" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>

<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input, {
    initialCountry: "auto",
    geoIpLookup: function(success) {
      // Get your api-key at https://ipdata.co/
      fetch("https://api.ipdata.co/?api-key=test")
        .then(function(response) {
          if (!response.ok) return success("");
          return response.json();
        })
        .then(function(ipdata) {
          success(ipdata.country_code);
        });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js",
  });
</script>

Now, when the library loads, it’ll call our geoIpLookup function and use the country code returned by ipdata. If it’s unable to detect the country for any reason, it’ll fall back to the default country.

Let’s see what happens if we load the page from a location in the Åland Islands, which is located right at the bottom of the list.

Now, we’re greeted with the familiarity of our native flag and allowed to immediately begin entering our phone number without any scrolling. If, for example, the customer is on holiday in a different country, they can still select the correct calling code using the selector.

Conclusions

Making your customers happy should be at the top of your priority list. Giving them slow, clunky, and difficult to use country calling code selector will do exactly the opposite. In just a few lines of code, we’ve been able to totally transform the user experience into a quick and pleasant one.

Location information can be used for much more than collecting phone numbers with country calling codes. Watch this space for more examples of using ipdata.co to improve your users’ form-filling experience!