International Phone Input IMPLEMENTATION

Hi guys.
I’m looking for a way to implement an International Telephone Input, like this one:
International Telephone Input

I tried to make something manually with a dropdown element and an input. But I encountered some issues by doing that. And the main one is about getting the right format of digits for any country…

Has anyone ever tried to do something similar? Do you have any ideas on how to achieve this please??

Thanks

1 Like

This shouldn’t be too hard.

DATABASE:
You will need to either find a database (and upload it to Bubble) or create your own table. Some fields would be the country name, amount of numbers, country flag, example, etc.

DESIGN - DROPDOWN:
From the link you provided, here’s how you recreate that dropdown like experience. Make a group with a data type of the database table you now have. Put an image in the group. That image will be the flag from the table. Create a Focus Group that is attached to the initial group. When the initial group is clicked, the Focus Group will be displayed. The Focus Group should contain a repeating group of all of the items in your new database table. The repeating group should have about 5-7 items showing and be a vertical scroll. When an item is clicked, it becomes the new country (use states for this).

DESIGN - INPUT:
Add the input next to the initial group as seen in your example. The placeholder should be the example you listed in your table.

WORKFLOW:
Make sure every time you change the country, the input is reset. You do this by using the “input’s value is not empty” in the action’s conditional.

Hope this solves your problem,
Daniel

4 Likes

Thank you Daniel!
The part on DESIGN - DROPDOWN was definitely helpful. I didn’t think of that idea using the focus group…
Otherwise I guess I didn’t explain myself clearly: what I’m looking for are especially the phone validation (for each country) feature in the input field and an auto country selection based on the geolocation feature in the dropdown element etc… they are listed under Features and Examples in this page:

Let me explain myself about the phone validation (the most important feature for me):

In US for example, an international number would look like this: +1-541-754-3010 (+1 for the country code, followed by 10 digits).
A French international number would look like this: +33 6-63-64-80-18 (+33 for the country code, followed by 9 digits) etc…

I know I can use the Text (numbers only) as the content format and check Limit the number of characters in my input field to have some control on what an user can type there. And since for each country the format number isn’t the same, I could put different validation conditions (depending on what country flag have been selected in the dropdown group) in the “Conditional” tab of my input field.
But here again 2 problems remains:

  • with the Limit number of characters checked, I could restrain the number of digits to 9, if the US flag have been chosen by the user. But he could type less than 9 digits: there’s no Number of minimum characters required to force the exact amount of digits/characters.

  • Even if there was a Number of minimum characters required content format, you still don’t know if the typed number is existing/the right one. So I thought of making a “Twilio send message” process in the Workflow… But I haven’t done that before, it might be not easy/free to do this. And this is included in the “International Phone Input” (Google’s libphonenumber for validation)

The second important feature I’m looking for is the auto country selection, based on geolocation:

I’m thinking of “Current geographic position” to get an address and thus the country of user’s location, extract the country name with regex, and compare it with my dropdown elements for a match (using here again some regex). BTW is that the is easiest way to go?

Anyway, if you look in the Features of the International Telephone Input (from the image above), you can see there are those 2 features and much more I don’t even know the use. That’s why I assumed it’s maybe easier to Implement it → download and setup the github project on bubble (doable? Maybe by building a plugin I assume…) Rather than trying to re-create it. Remember there are about 200 countries and I feel like it would be smarter to implement it (again if it’s doable) instead of re-creating the whole thing… Could you enlighten me on this please?

Thanks a lot

Good idea to implement into a plugin, many of us will use it.

To solve the first set of problems.

  1. You can always make the Button “non clickable” when the input doesn’t have a certain amount of characters. Now instead of having 1,000 conditionals, instead, use the database table’s “amount of numbers” value to automatically get that number locked with only 1 conditional

  2. Use Send Click. Since you won’t need incoming messages, it’ll only cost you approx. 1 cent per message. When your user clicks a button to (submit or continue), something in the database can save a random verification number. This number will also be sent to the user’s phone. Then you’ll simply have an input for that verification number. If it matches the one in the database, that phone will be marked as verified. (PM me if you need help with this implementation.

To solve the second set of problems.

  1. No need for regex. Getting the current geo position is great but it requires the user allowing you to have their location. But once their location is locked in, just extract there location’s Country and compare it to your list of Countries. If you want to be 100% accurate, I believe countries have country codes. If so, add those codes to your database list and user the geo location’s country code instead.

  2. I’ve never built a plugin so I can’t give you any advice their. All I know is that it’s doable via Bubble. If there is an API connection to be made, that may be better.

1 Like

Alright I’ll see how it will go with all this.
I haven’t build any plugin either but I might start with this one :slight_smile:
Anyway I’ll keep posting here for further issues.

Thank again @dbevan!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.