Intl tel input country code and input mask

Design help Custom code
1

Hello, I’m currently working on a optin form were we need a phone input to reach out to the leads.
To make this as easy as possible for visitors I have used GitHub - jackocnr/intl-tel-input: A JavaScript plugin for entering and validating international telephone numbers.
And this is my code(inside head):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.hide {
		display: none;
}
#valid-msg {
    color: #2b9348;
    
}
#error-msg {
		color: #C31014;
    
}
</style>

and this is the code before tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js" integrity="sha512-L3moecKIMM1UtlzYZdiGlge2+bugLObEFLOFscaltlJ82y0my6mTUugiz6fQiSc5MaS7Ce0idFJzabEAl43XHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8-beta.1/inputmask.js" integrity="sha512-aSxEzzrnqlqgASdjAelu/V291nzZNygMSFMJ0h4PFQ+uwdEz6zKkgsIMbcv0O0ZPwFRNPFWssY7gcL2gZ6/t9A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>      
  var input = document.querySelector("#phone");
  var iti = window.intlTelInput(input, {
  initialCountry: "de",
  preferredCountries: ["de", "se", "gb", "es" ],
  placeholderNumberType:"MOBILE",
  autoPlaceholder:"polite",
  utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js",
});
</script>

<!-- validator code -->
<script>
var input = document.querySelector("#phone"),
 	errorMsg = document.querySelector("#error-msg"),
    validMsg = document.querySelector("#valid-msg");


var updateInputValue = function (event) {
       dialCode.value = "+" + iti.getSelectedCountryData().dialCode;
};
input.addEventListener('input', updateInputValue, false);
input.addEventListener('countrychange', updateInputValue, false);

var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

var reset = function() {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

input.addEventListener('blur', function() {
  reset();
  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      var errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});

input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>

<!--Button styling submission-->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const phoneInput = document.querySelector('#phone');
    const targetFormButton = document.querySelector('#form-submit');
    if (!phoneInput || !targetFormButton) return;

    phoneInput.addEventListener('input', () => {
      const isValid = phoneInput.checkValidity();
      targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
      targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
    });
  });
</script>

1.What I’m looking to add is first of all a way to pass the formated version of the phone number meaning with the country code into the submission.
2.Add an input mask, as you can see I have tag for jquery inputmask.

If anyone knows how to do this, I would greatly appreciate it!

2

To get the full country code add hiddenInput: “full”, and then add under the init of the intl tel input script

$("form").submit(function() {
  var full_number = phone_number.getNumber(intlTelInputUtils.numberFormat.E164);
$("input[name='phone[full]'").val(full_number);
  alert(full_number)
  
});