#41 - Perfect Phone Number Inputs v0.2

International phone number inputs, the way they should be.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo

With IP Lookup

Use this if you want the users' IP country to automatically be prefilled. IMPORTANT: Do not use this with profile forms or it will behave erratically.


<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS (WITH IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"> </script>
<script>
  $(document).ready(function() {
    $('input[ms-code-phone-number]').each(function() {
      var input = this;
      var preferredCountries = $(input).attr('ms-code-phone-number').split(',');

      var iti = window.intlTelInput(input, {
        preferredCountries: preferredCountries,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
      });

      $.get("https://ipinfo.io", function(response) {
        var countryCode = response.country;
        iti.setCountry(countryCode);
      }, "jsonp");

      input.addEventListener('change', formatPhoneNumber);
      input.addEventListener('keyup', formatPhoneNumber);

      function formatPhoneNumber() {
        var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
        input.value = formattedNumber;
      }

      var form = $(input).closest('form');
      form.submit(function() {
        var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
        input.value = formattedNumber;
      });
    });
  });
</script>

‍

Without IP Lookup

Use this on profile forms and/or if you do not want to automatically prefill based on user IP.


<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS (WITHOUT IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"> </script>
<script>
  $(document).ready(function() {
    $('input[ms-code-phone-number]').each(function() {
      var input = this;
      var preferredCountries = $(input).attr('ms-code-phone-number').split(',');

      var iti = window.intlTelInput(input, {
        preferredCountries: preferredCountries,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
      });

      input.addEventListener('change', formatPhoneNumber);
      input.addEventListener('keyup', formatPhoneNumber);

      function formatPhoneNumber() {
        var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
        input.value = formattedNumber;
      }

      var form = $(input).closest('form');
      form.submit(function() {
        var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
        input.value = formattedNumber;
      });
    });
  });
</script>

Description

Attribute

No items found.

v0.2 - Performance improvements & prefill fix

In this updated version, the number is always shown in international format and works with prefills/profile forms. Also, a version has been added which does not look up IP addresses.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Add a Phone Number Field to your Webflow Form (with Country Select)

Memberscripts needed:

https://www.memberstack.com/scripts/perfect-phone-number-inputs

Tutorial:

Cloneable:

https://webflow.com/made-in-webflow/website/phonenumber-input

Why/When would need to Add a Phone Number Field to your Webflow Form?

Make it easier for users to fill in their phone numbers without worrying about their country codes.
Reduce friction and improve your users’ experience.

The less friction introduced in users’ experiences, the better – that’s UX 101. If you’re asking your visitors for their phone numbers, a good way to make it as easy as possible and as error-proof as possible for them is to give them a country selector and perhaps even better, to have it pre-filled with their correct country codes.

That’s exactly what we’ll be doing below and – spoiler alert – it’s super easy and quick.

Adding a phone number field to Webflow forms

To add a phone number field to a Webflow form, we’re going to use MemberScript #41 – Perfect Phone Number Inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is build out the form itself and style it however you want.

Next up, select the phone number field and add the following attribute to it:

ms-code-phone-number=”ca,gb,us”

In our example above, the attribute’s value consists of a list of 3 ISO standard two-letter country codes. These represent the preferred countries that will show up at the top of the list.

You can go ahead and replace those country codes with whatever you think is more appropriate for your target audience and you can also remove some of them or add as many as you like.

Making it work

Now that you’ve got the form set up, all you need to do is add the MemberScript #41 custom code to your page, before the closing body tag.

For this MemberScript, we’ve got two pieces of code, depending on your use case:

Code with IP lookup – this will use users’ IP address to pre-fill their country code (but don’t use this with profile forms, it won’t work well).
Code without IP lookup – this will work well with profile forms and it won’t pre-fill users’ country codes based on their IPs.

Conclusion

That’s everything, you can now go ahead and test your form’s phone number field.

If you want to use our demo project to get you started, just click the image below to add it to your Webflow site.

Our demo can help you with adding an auto-formatting international phone number input with a selector, autolocation and preferred countries.

Take me to the Scripts!

Read full documentation

Button Text

Something not working as expected?