HighLevel Support Portal

<style>
  input[type="text"][name="phone"] {
    display: none;
  }
</style>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
  integrity="sha512-yye/u0ehQsrVrfSd6biT17t39Rg9kNc+vENcCXZuMz2a+LWFGvXUnYuWUW6pbfYj1jcBb/C39UZw2ciQvwDDvg=="
  crossorigin="anonymous"
/>

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
  integrity="sha512-DNeDhsl+FWnx5B1EQzsayHMyP6Xl/Mg+vcnFPXGNjUZrW28hQaa1+A4qL9M+AiOMmkAhKAWYHh1a+t6qxthzUw=="
  crossorigin="anonymous"
></script>

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"
></script>

<div id="phone-cont">
  <input type="tel" id="phone" onkeyup="injectValue()" />
</div>

<script>
  var input = document.querySelector("#phone");
  var iti = window.intlTelInput(input, {
    separateDialCode: true, initialCountry: "us"
  });

  input.addEventListener("countrychange", function () {
    injectValue();
  });

  function injectValue() {
    $("input[type='text'][name='phone']")[0].value =
      "+" + iti.getSelectedCountryData().dialCode + $("#phone")[0].value;

    $("input[type='text'][name='phone']")[0].dispatchEvent(new Event("input"));
  }
</script>

<style>
  #phone {
    padding-left: 90px;
    background-color: #f3f8fb;
    border: none;
    height: 3rem;
    border-radius: 5px;
    width: 100%;
  }

  .iti {
    width: 100%;
  }

  #phone-cont {
    margin-top: -1rem;
  }
</style>

Edit: You can select the default country for the dropdown by changing the value of the parameter: initialCountry which is set to "us", on line 33 in the code provided above.