Phone Number Field With Country Code Dropdown List

Md_Mahinur_Khan
Userlevel 3
Badge

Hey Guys,

 

In the community, i see many guys are looking for Country code in the phone number field. I solved with dropdown list with all International Flags.
 

Live link: http://unbouncepages.com/country_code_dropdown_list_in_phone_number/

 

Screenshot 2022-03-15 at 8.23.34 PM

Screenshot 2022-03-15 at 8.23.34 PM846×594 49.9 KB


See this what i did with Unbounce form.

 

Now let me share the source code and documentation.

See this video documentation.

 


 

or follow this guide.

 

Step 1:

Copy this code and put in your Unbounce JS, make sure you put to the HEAD

 

 

Step 2:

Now copy this code and put in your Unbounce JS, Make sure you put to the Before Body End Tag

 

 

Step 3

Now copy this code and put in your Unbounce CSS

 

 

Step 4

IMPORTANT: Now update the phone number field ID. ID should be phone like this…
 

 

Screenshot 2022-03-15 at 8.46.23 PM

Screenshot 2022-03-15 at 8.46.23 PM668×674 25.3 KB

 

 

Step 5

Now you’re all done!

 

 

If you have still any questions or if you can’t setup with the code, you can contact me at mdmahinurkhan9@gmail.com I’ll help you!

 

 

Thanks,

Mahinur

 

Mahinur

24 replies

Emmanuelle_Galou

Hi Mahinur and many thanks, your post lands right on time for me 😉

How can I change the default country US & UK?

Cheers,

Emmanuelle

S
Badge +1

Thank you Mahinur! Well done.

Michael_McInnes1
Rank
Userlevel 3
Badge

This is amazing Mahinur! Thank you! :spinbounce:

Md_Mahinur_Khan
Userlevel 3
Badge

Which country would you like to setup as default? I can try with that…

Mahinur
Emmanuelle_Galou

Hi,
FRance 😉 I guess we have found something thanks to https://github.com/jackocnr/intl-tel-input
Many thanks @Md_Mahinur_Khan

Oliver_Lord
Rank
Userlevel 4
Badge

Hey Mahinur,

Thanks for making this - it looks great. This has come up many times in my interactions with our customers, so I’ll make sure to point them this way 🔥

Md_Mahinur_Khan
Userlevel 3
Badge

Hi Mahinur and many thanks, your post lands right on time for me 😉

How can I change the default country US & UK?

Cheers,

Emmanuelle


Follow this, i figured it out 

https://gist.github.com/mpro9x/e42fbe6e7d93982edba16908818f4694

You’ll apply ISO code of your country in line 14 for to change the default countries. 

You’ll find your Country ISO Codes here: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

And then you’ll change 41 line code for that country extension code.

Now you’re done!

Mahinur
Rennan_Mendes

Hi Mahinus,
Could you please share the code again?


 

Amanda
Rank
Userlevel 4
Badge +1

Hi @Md_Mahinur_Khan. Tagging for you for visibility, it looks like the GitHub links in your original posts are no longer working and @Rennan_Mendes is hoping you might be able to share the code again? Thanks in advance for this valuable resource!

Md_Mahinur_Khan
Userlevel 3
Badge

Hi @Md_Mahinur_Khan. Tagging for you for visibility, it looks like the GitHub links in your original posts are no longer working and @Rennan_Mendes is hoping you might be able to share the code again? Thanks in advance for this valuable resource!

Ahh Let me update

Mahinur
Md_Mahinur_Khan
Userlevel 3
Badge

Hi @Md_Mahinur_Khan. Tagging for you for visibility, it looks like the GitHub links in your original posts are no longer working and @Rennan_Mendes is hoping you might be able to share the code again? Thanks in advance for this valuable resource!

I don’t find the way to edit the post :( Could you tell me please from where can i edit the post?

Mahinur
T
Badge

@Md_Mahinur_Khan  man if u cant edit just paste the link in a reply , thank you

Amanda
Rank
Userlevel 4
Badge +1

Hi @theblackwidow1081, all the links in @Md_Mahinur_Khan’s original post have now been updated. 👍  

T
Badge

Hi @theblackwidow1081, all the links in @Md_Mahinur_Khan’s original post have now been updated. 👍  

thank u Amanda and Md mahinur much appreciate it

C
Badge 
Hello, we have added this code to our own landing page and it works very well, but we cannot see which country code the leads choose in the lead data in unbounce. Where is this data collected, how can we view it in the unbounce lead panel?
Oliver_Lord
Rank
Userlevel 4
Badge 
Hello, we have added this code to our own landing page and it works very well, but we cannot see which country code the leads choose in the lead data in unbounce. Where is this data collected, how can we view it in the unbounce lead panel?

Hi,

 

If you go to the page overview, then click on the ‘Leads’ tab, you should see the country code appear, both in the ‘phone number’ field as well as the ‘full phone’ field. Here’s a test lead I ran on my page:
 

 

C
Badge 
Thanks a lot, we can see it in the field you specified, but when I fill out a few test forms, I see that the country code of some countries is still not reflected on the panel, only the number is reflected. Can we have all selected country codes reflected here? You can see the full_name field of some test mails in the ss below, there are some that start with + and some that don't show the country code.
 

 

 

Oliver_Lord
Rank
Userlevel 4
Badge

Thanks for this info. 

 

I see what you mean. I just tested on more countries and I am seeing the same.

 

@Md_Mahinur_Khan , would you be able to help out here? Also, would it be possible to add an additional field that pulls in the country name as well as the phone number?

C
Badge

Thanks for this info. 

 

I see what you mean. I just tested on more countries and I am seeing the same.

 

@Md_Mahinur_Khan , would you be able to help out here? Also, would it be possible to add an additional field that pulls in the country name as well as the phone number?

Hello there, is there any update about this? I kindly wanted to remind my latest comments :) Would be amazing to see your possible solutions.

C
Badge

Thanks for this info. 

 

I see what you mean. I just tested on more countries and I am seeing the same.

 

@Md_Mahinur_Khan , would you be able to help out here? Also, would it be possible to add an additional field that pulls in the country name as well as the phone number?

Hello there, is there any update about this? I kindly wanted to remind my latest comments :) Would be amazing to see your possible solutions.

Hello there, is there any update about this topic? We are still trying to solve this, will be waiting for your response. Thanks in advance.

Md_Mahinur_Khan
Userlevel 3
Badge

Thanks for this info. 

 

I see what you mean. I just tested on more countries and I am seeing the same.

 

@Md_Mahinur_Khan , would you be able to help out here? Also, would it be possible to add an additional field that pulls in the country name as well as the phone number?

Hello there, is there any update about this? I kindly wanted to remind my latest comments :) Would be amazing to see your possible solutions.

Hello there, is there any update about this topic? We are still trying to solve this, will be waiting for your response. Thanks in advance.



Hi Ceren,

Sorry for the delayed response. I’ve read above comments.

Please take a look on this loom video

 

Let me know if you need more specific solution?

Thanks,
Mahinur​​​​​​​

Mahinur
P
Badge

Hi @Md_Mahinur_Khan, How are you?

We implemented the script and had doubts when we saw your example website: Why do we only see the flags, not the banners, plus the country code?

On the other hand, is the CSS designed so that the form still looks good on mobile?

Thank you!

A

Hello, i would kindly like to ask what is the field id to have the country name instead of country id(ex. Great Britain instead of GB) and if it’s possible using smart builder.

The test landing page we have for reference. https://www.aristodevelopers.com/ab5eb231-5f00-4a99-875a-904654c83254/

 

 

Thanks in advance

Michael_McInnes1
Rank
Userlevel 3
Badge

Hey @Aristo! I am no developer by any means but it looks like the script is pulling the country names from a plugin. I am not completely sure how you would modify that… 🤔  Any thoughts @Md_Mahinur_Khan? 

Reply


Terms & ConditionsCookie settings