Check Phone Numbers Worldwide with Google’s Solution

Hello everyone, Yellow is in touch!

We all have to fiddle with checking phone numbers on application forms at one time or another. Usually the reason is too much trash: users, out of nothing to do, send random numbers to affiliate network, because of this we see a large number of leads on Facebook andtracker, we rejoice, and then it all falls into trash and GG WP.

Let’s deal with invalid numbers and first consider how we usually solve this problem.

Removing empty numbers

The very first thing you need to do, if affiliate network did not do this for you, is to remove the ability to send a form with an empty number. To do this, just add the attribute to the number input fieldrequired.

<input type="text" name="phone" required/>

Now, when trying to click on the submit button, the user will be shown a message asking them to fill out the phone field:

It would also be good to change the field type totel and add autocomplete. About thisread it on my telegram channel.

Input masks

Standard solution today. The mask is a number template for the selected GEO and usually includes 2 things: the length of the number and the set of available digits. It looks something like this (for RU):

+7-999-999-99-99

Nines in this case indicateany number. Therefore, in order for the second digit of the number to be nine, it must be preceded by a slash. In total, the number should have 11 digits, of which the first should be a seven, the second a nine, and the rest any.

Some JavaScript plugin is connected to the page (usually this is InputMask) and write something like this:

var selector = document.getElementById("phone");
var im = new Inputmask("+7-999-999-99-99");
im.mask(selector);

Advantages of the method: works, just connect

Disadvantages of the method: you have to figure out what valid phone numbers look like in a particular GEO and write masks for them. If you make a mistake, you will lose leads. Sometimes users start writing their number with the country code, although usually the code is already included in the mask, which leads to incorrect numbers in the application. Sometimes numbers in a country can be of different lengths; writing under such a mask becomes even more of a hassle.

LibPhoneNumber from Google

At Google Corporationthere is a solutionfor parsing, formatting and validating phone numbers. We will not use it directly, but will consider another JavaScript libraryInternational Telephone Input. It is more convenient to use and at the same time it uses the same solution from Google under the hood.

Let’s briefly look at what we get in the end:

Our script will automatically determine the user’s country by his IP address and show the flag of this country in the phone input field
After entering each number, the script will check the validity of the number and will not allow you to submit a form with an incorrect number

Advantages of the method: works for all countries, no need to invent masks

Disadvantages of the method: does not restrict the user when entering, but it doesn’t matter, because sending game still won’t work!

Connection and use

First of all, let’s open an exampleand see how to connect the library to your landing pages. To do this, add to the tag<head>link to the library and css style.

After that we add immediately after the tag<body>a script that will enable number checking for your input fields in all forms on the page.

Now look at the field highlighted in red: as you understand, in my example the check is set for geo RU, but we need to make it work universally. Let’s consider 2 options.

Making the script universal using Keitaro

If you have it on handtrackerKeitaro, then everything is simpler than steamed turnips, instead

initialCountry: 'RU',

we write

initialCountry: '{country_code}',

When the user gets to your landing page, Keitaro will automatically replace the macro{country_code}to its GEO code.

Making the script universal using JS code

The idea is this: the user visits the page, the script itself breaks through his IP in the geobase and determines the country. To do this you need to set the country to'auto'and register the function for determining the country.

  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "us";
      callback(countryCode);
    });
  },

In this case, JQuery is used to send the request and the IpInfo.io database is used. If you want, use any other one.

Result

When trying to send an invalid number, the user gets rejected from the gate, which is what we needed.

Let’s implement it and make it a plus, gentlemen!

Check Phone Numbers Worldwide with Google’s Solution

Removing empty numbers

Input masks

LibPhoneNumber from Google

Connection and use

Making the script universal using Keitaro

Making the script universal using JS code

Result

1 comments “<trp-post-container data-trp-post-id='662'>Check Phone Numbers Worldwide with Google’s Solution</trp-post-container>”

Write a comment Отменить ответ

Removing empty numbers

Input masks

LibPhoneNumber from Google

Connection and use

Making the script universal using Keitaro

Making the script universal using JS code

Result

What to read next

1 comments “<trp-post-container data-trp-post-id='662'>Check Phone Numbers Worldwide with Google’s Solution</trp-post-container>”

Write a comment Отменить ответ