# Adding a country code picker to a phone number input field enhances (ok)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2Fjq1vGEJ8H3QEidMdLvbG%2Fimage.png?alt=media&#x26;token=6b4d576b-a8b9-4d72-a2b9-f78cbdea2057" alt=""><figcaption></figcaption></figure>

```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />
<input type="tel" id="phone" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input, {
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
  });
</script>
```

Bản hoàn thiện hơn sử dụng với class

```
add_action('wp_footer', function() {
    ?>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17/build/js/intlTelInput.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
        const phoneInputs = document.querySelectorAll(".phone-input");
        phoneInputs.forEach(function (input) {
            const iti = window.intlTelInput(input, {
                initialCountry: "us", // hoặc "auto"
                preferredCountries: ["us", "vn", "au", "se"],
                separateDialCode: true,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
            });
            // Bắt sự kiện submit của form chứa input này
            const form = input.closest("form");
            if (form) {
                form.addEventListener("submit", function () {
                    input.value = iti.getNumber(); // +84901234567
                });
            }
        });
    });
    </script>
    <?php
});
```