Phone Input with Country Code Select

Design help Custom code
1

I built a website for a client about 9 months ago, with intermediate Webflow skills and beginner Javascript skills. Somewhere along the line I managed to integrate this Javascript library ~ which I found used in this Webflow showcase project to successfully add dropdown to select a country code for a phone number. This is important to the client because apparently they get a lot of submissions where users neglect to add the country code to the their phone number.

image
image1158×984 52.5 KB

I successfully added it on this page and now I want to add the same plugin on another page ~ but the trouble is, it was a while ago and I don’t quite remember how I got it working, and the documentation on the plugin’s GitHub isn’t really helpful.

What I can gather from the structure of the working page is that the plugin uses a hidden input (which is in an HTML embed just before the input with the is of PHONE ~ as well as adding the script to the page.

Side note: is putting the script in an embed at the bottom of the navigator the same as putting it in the Page Settings under before </body>? My limited knowledge of coding tells me that those two options would be identical, but I can’t put it in the page footer because there’s a lot of code there already.

image
image1330×1102 95.4 KB

I’m trying to add the country code select to the form on this page - (click through to the phone# input on the last page before Submit) — but it isn’t working for me.

If anyone could take a look and help me out, I’d be very appreciative and could write a full post with detailed information on how to achieve this, and hopefully the comunity would benefit.

Thanks all~

Here is my read-only link

2

Hi @shawncarrie,

Try replacing the code within the HTML embed with this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js"></script>

<!-- Intl-tel-input -->
<script>
var phoneInput = document.querySelector("#PHONE"),
	dialCode = document.querySelector(".dialCode"),
 	errorMsg = document.querySelector("#error-msg"),
    validMsg = document.querySelector("#valid-msg");

var iti = intlTelInput(phoneInput, {
  initialCountry: "us",
  placeholderNumberType: 'FIXED_LINE',
});

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

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

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

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

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

I copied the original code from the project you linked and changed the ‘input’ variable to ‘phoneInput’ as I think it was clashing with some of your other code. Managed to get it working on my end - screenshot here.

Hope this helps!

3

That did indeed do the trick for me! :smiley:

Would you mind sharing your process of how you figured out there was a conflict?
So the problem was just with my page? Maybe a variable with the same name input?

4

Hi @shawncarrie,

It was kind of lucky actually - the first thing I did was console.log(input) to make sure that the code was finding the field and I got ‘input is not defined’, I tried the same thing on the special-offers page and the cloneable and they both returned the correct input so I guessed that it might be clashing with another variable.

5

I definitely need to learn more Javascript… But should already know enough that the console should be the first place to go ~ I feel like that’s both the blessing and curse of Webflow - it makes things much easier to learn, but then you sort of escape some basics that might cause you errors…

I’m thinking of writing up a post for the Webflow blog that helps with some of these pitfalls that I’ve encountered - thanks a lot for your help!