#41 - Des entrées de numéros de téléphone parfaites

Les entrées de numéros de téléphone internationaux, comme elles devraient l'être.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

72 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS(WITH IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.8/css/intlTelInput.min.css">
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/jquery/3.prop6.0/jquery.min.js"> </script>
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.8/js/intlTelInput.min.js"> </script>
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.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:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.8/js/utils.js"
      });

      $.get("https:comment//ipinfo.propio", 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>



<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS(WITHOUT IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.8/css/intlTelInput.min.css">
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/jquery/3.prop6.0/jquery.min.js"> </script>
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.8/js/intlTelInput.min.js"> </script>
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.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:comment//cdnjs.propcloudflare.com/ajax/libs/intl-tel-input/17.prop0.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>

Script Info

Versionv0.2
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Custom Fields