No-Plugin Phone Number Input (Country Name, Country Emoji, Phone Number)

Hey everyone,

Over the past week, I’ve been wrestling with a couple of different phone number input plugins so that their design would work with the looks of my app, while also trying to get them to do a few non-standard things, such as fetching the country’s emoji flag from it.

I eventually gave up and one evening ended up building my own phone number input from the scratch using standard Bubble elements only. I’ll share the process with everyone, just in case someone else finds it useful, too. (I know a post like this would have probably saved me a ton of time with the Regex part.)

Without further ado:

1. Set up the country/emoji/calling code dropdown

Create a dropdown and put the following into the dropdown’s choices:

🇦🇫 Afghanistan +93
🇦🇽 Åland Islands +358
🇦🇱 Albania +355
🇩🇿 Algeria +213
🇦🇸 American Samoa +1684
🇦🇩 Andorra +376
🇦🇴 Angola +244
🇦🇮 Anguilla +1264
🇦🇬 Antigua & Barbuda +1268
🇦🇷 Argentina +54
🇦🇲 Armenia +374
🇦🇼 Aruba +297
🇦🇺 Australia +61
🇦🇹 Austria +43
🇦🇿 Azerbaijan +994
🇧🇸 Bahamas +1242
🇧🇭 Bahrain +973
🇧🇩 Bangladesh +880
🇧🇧 Barbados +1246
🇧🇾 Belarus +375
🇧🇪 Belgium +32
🇧🇿 Belize +501
🇧🇯 Benin +229
🇧🇲 Bermuda +1441
🇧🇹 Bhutan +975
🇧🇴 Bolivia +591
🇧🇦 Bosnia & Herzegovina +387
🇧🇼 Botswana +267
🇧🇷 Brazil +55
🇮🇴 British Indian Ocean Territory +246
🇻🇬 British Virgin Islands +1284
🇧🇳 Brunei +673
🇧🇬 Bulgaria +359
🇧🇫 Burkina Faso +226
🇧🇮 Burundi +257
🇰🇭 Cambodia +855
🇨🇲 Cameroon +237
🇨🇦 Canada +1
🇨🇻 Cape Verde +238
🇳🇱 Carribbean Netherlands +599
🇰🇾 Cayman Islands +1345
🇨🇫 Central African Republic +236
🇹🇩 Chad +235
🇨🇱 Chile +56
🇨🇳 China +86
🇨🇽 Christmas Islands +61
🇨🇨 Cocos Islands +61
🇨🇴 Colombia +57
🇰🇲 Comoros +269
🇨🇩 Congo-Kinshasa +243
🇨🇬 Congo-Brazzaville +242
🇨🇰 Cook Islands +682
🇨🇷 Costa Rica +506
🇭🇷 Croatia +385
🇨🇺 Cuba +53
🇨🇼 Curaçao +599
🇨🇾 Cyprus +357
🇨🇿 Czechia +420
🇩🇰 Denmark +45
🇩🇯 Djibouti +253
🇩🇲 Dominica +1767
🇩🇴 Dominican Republic +1
🇪🇨 Ecuador +593
🇪🇬 Egypt +20
🇸🇻 El Salvador +503
🇬🇶 Equatorial Guinea +240
🇪🇷 Eritrea +291
🇪🇪 Estonia +372
🇪🇹 Ethiopia +251
🇫🇰 Falkland Islands +500
🇫🇴 Faroe Islands +298
🇫🇯 Fiji +679
🇫🇮 Finland +358
🇫🇷 France +33
🇬🇫 French Guiana +594
🇵🇫 French Polynesia +689
🇬🇦 Gabon +241
🇬🇲 Gambia +220
🇬🇪 Georgia +995
🇩🇪 Germany +49
🇬🇭 Ghana +233
🇬🇮 Gibraltar +350
🇬🇷 Greece +30
🇬🇱 Greenland +299
🇬🇩 Grenada +1473
🇬🇵 Guadeloupe +590
🇬🇺 Guam +1671
🇬🇹 Guatemala +502
🇬🇬 Guernsey +44
🇬🇳 Guinea +224
🇬🇼 Guinea-Bissau +245
🇬🇾 Guyana +592
🇭🇹 Haiti +509
🇭🇳 Honduras +504
🇭🇰 Hong Kong +852
🇭🇺 Hungary +36
🇮🇸 Iceland +354
🇮🇳 India +91
🇮🇩 Indonesia +62
🇮🇷 Iran +98
🇮🇶 Iraq +964
🇮🇪 Ireland +353
🇮🇲 Isle of Man +44
🇮🇱 Israel +972
🇮🇹 Italy +39
🇨🇮 Ivory Coast +225
🇯🇲 Jamaica +1
🇯🇵 Japan +81
🇯🇪 Jersey +44
🇯🇴 Jordan +962
🇰🇿 Kazakhstan +7
🇰🇪 Kenya +254
🇰🇮 Kiribati +686
🇽🇰 Kosovo +383
🇰🇼 Kuwait +965
🇰🇬 Kyrgyzstan +996
🇱🇦 Laos +856
🇱🇻 Latvia +371
🇱🇧 Lebanon +961
🇱🇸 Lesotho +266
🇱🇷 Liberia +231
🇱🇾 Libya +218
🇱🇮 Liechtenstein +423
🇱🇹 Lithuania +370
🇱🇺 Luxembourg +352
🇲🇴 Macau +853
🇲🇬 Madagascar +261
🇲🇼 Malawi +265
🇲🇾 Malaysia +60
🇲🇻 Maldives +960
🇲🇱 Mali +223
🇲🇹 Malta +356
🇲🇭 Marshall Islands +692
🇲🇶 Martinique +596
🇲🇷 Mauritania +222
🇲🇺 Mauritius +230
🇾🇹 Mayotte +262
🇲🇽 Mexico +52
🇫🇲 Micronesia +691
🇲🇩 Moldova +373
🇲🇨 Monaco +377
🇲🇳 Mongolia +976
🇲🇪 Montenegro +382
🇲🇸 Montserrat +1664
🇲🇦 Morocco +212
🇲🇿 Mozambique +258
🇲🇲 Myanmar +95
🇳🇦 Namibia +264
🇳🇷 Nauru +674
🇳🇵 Nepal +977
🇳🇱 Netherlands +31
🇳🇨 New Caledonia +687
🇳🇿 New Zealand +64
🇳🇮 Nicaragua +505
🇳🇪 Niger +227
🇳🇬 Nigeria +234
🇳🇺 Niue +683
🇳🇫 Norfolk Island +6723
🇰🇵 North Korea +850
🇲🇰 North Macedonia +389
🇲🇵 Northern Mariana Islands +1670
🇳🇴 Norway +47
🇴🇲 Oman +968
🇵🇰 Pakistan +92
🇵🇼 Palau +680
🇵🇦 Panama +507
🇵🇬 Papua New Guinea +675
🇵🇾 Paraguay +595
🇵🇪 Peru +51
🇵🇭 Philippines +63
🇵🇱 Poland +48
🇵🇹 Portugal +351
🇵🇷 Puerto Rico +1
🇶🇦 Qatar +974
🇫🇷 Réunion +262
🇷🇴 Romania +40
🇷🇺 Russia +7
🇷🇼 Rwanda +250
🇧🇱 Saint-Barthélemy +590
🇸🇭 Saint Helena +290
🇰🇳 Saint Kitts & Nevis +1869
🇱🇨 Saint Lucia +1758
🇫🇷 Saint Martin +590
🇵🇲 Saint Pierre & Miquelon +508
🇻🇨 Saint Vincent & Grenadines +1784
🇼🇸 Samoa +685
🇸🇲 San Marino +378
🇸🇹 São Tomé & Príncipe +239
🇸🇦 Saudi Arabia +966
🇸🇳 Senegal +221
🇷🇸 Serbia +381
🇸🇨 Seychelles +248
🇸🇱 Sierra Leone +232
🇸🇬 Singapore +65
🇸🇽 Sint Maarten +1721
🇸🇰 Slovakia +421
🇸🇮 Slovenia +386
🇸🇧 Solomon Islands +677
🇸🇴 Somalia +252
🇿🇦 South Africa +27
🇰🇷 South Korea +82
🇸🇸 South Sudan +211
🇪🇸 Spain +34
🇱🇰 Sri Lanka +94
🇸🇩 Sudan +249
🇸🇷 Suriname +597
🇳🇴 Svalbard & Jan Mayen +47
🇸🇿 Swaziland +268
🇸🇪 Sweden +46
🇨🇭 Switzerland +41
🇸🇾 Syria +963
🇹🇼 Taiwan +886
🇹🇯 Tajikistan +992
🇹🇿 Tanzania +255
🇹🇭 Thailand +66
🇹🇱 Timor-Leste +670
🇹🇬 Togo +228
🇹🇰 Tokelau +690
🇹🇴 Tonga +676
🇹🇹 Trinidad & Tobago +1868
🇹🇳 Tunisia +216
🇹🇷 Turkey +90
🇹🇲 Turkmenistan +993
🇹🇨 Turks & Caicos Islands +1649
🇹🇻 Tuvalu +688
🇻🇮 U.S. Virgin Islands +1340
🇺🇬 Uganda +256
🇺🇦 Ukraine +380
🇦🇪 United Arab Emirates +971
🇬🇧 United Kingdom +44
🇺🇸 United States +1
🇺🇾 Uruguay +598
🇺🇿 Uzbekistan +998
🇻🇺 Vanuatu +678
🇻🇦 Vatican City +39
🇻🇪 Venezuela +58
🇻🇳 Vietnam +84
🇼🇫 Wallis & Futuna +681
🇪🇭 Western Sahara +212
🇾🇪 Yemen +967
🇿🇲 Zambia +260
🇿🇼 Zimbabwe +263

2. Add the phone number input field

Create a regular text input, place it to the right of the dropdown, and set the Content Format to “Text (numbers only)”.

3. Extract the data you need from the dropdown

To extract the emoji flag from the dropdown, use the following Regex on its value:

^.{4}

To extract the country name from the dropdown, use the following Regex on its value:

\S[A-Za-z.éã].*(?=\s+[0-9]+$)

To extract the phone number, use the following Regex on the dropdown’s value first and then concatenate the value from the text input:

[+0-9]+

That’s it!

You get a nice and clean phone number input you can style to your heart’s liking and easily refine even further with more rules relevant to your app:

Sep-15-2019%2015-45-47

37 Likes

You’re an absolute star :heart:

1 Like

Thanks man! :v:

1 Like

@chaostorm
Thanks for posting this. It looks awesome. I am hoping that you might be able to post some screen shots of how this looks, especially the part 3 of extract data portion.

Personally, I have no background in coding and find it really difficult to understand most tips without some visual aide as well as the written instructions.

Also, do you have any more details of how you put the content into the dropdown? Was it set up as a dynamic or static choices? Also, how did you get the emojis in there?

I found this post while trying to search for a way to add an emoji choice to my app as I assume a lot of users may not be familiar with the keyboard shortcuts and wouldn’t access the built in emojis from the input, so I wanted to create a popup with choices for them to select on a button selection.

2 Likes

@boston85719 Sure thing! Here are the screenshots:

1. Set up the country/emoji/calling code dropdown

Create a dropdown, set its Choices Style to “Static Choices”, copy the contents of the country flag/name/calling code list I provided in the original post, and paste it into the Choices field like this:

As for how I typed emojis, I’m on a Mac, so I did it by pressing Cmd+Ctrl+Space and selecting the emoji I needed. Here are the detailed instructions.

2. Add the phone number input field

Create an input and set it to this:

3. Extract the data you need from the dropdown

The Regex part is probably explained most easily in the following way.

Create a text element.

Let’s set it up to display the values you want to fetch. Nothing fancy yet, just type in the stuff you see below into the text field.

Okay, now let’s set up the Regex part using the regular expressions I provided above. The process is pretty much the same for each - the only part that differs is the regular expression used. (That’s where the term Regex comes from, btw.) I’ve included screen recordings of all three just in case.

The emoji:

flag

The country name:

country

The calling code:

code

Okay, last step - testing what we’ve just built. You can see how the contents of the text box change depending on which country I choose in the dropdown.

test

Hope that helps. :slight_smile:

6 Likes

Update: I edited the original post to replace the old Regex for the country name with a new one that doesn’t have issues with Bubble. Since I opened the topic, I’ve discovered the previous one did save the country name to the database properly when used in a workflow, but it also caused the Bubble Inspector to throw a Regex error. The new one fixes that and is used in the more detailed example above.

2 Likes

This looks fantastic, nice work!

1 Like

@chaostorm Thank you so much for the detailed and easy to follow instructions. Made my life a lot easier and helped me understand a bit more Regex ( a complicated topic for me ).

Cheers

1 Like

@cmccray Thank you! :blush:

@boston85719 My pleasure! If it’s any consolation to you, I’ve been in tech for well over a decade and regular expressions are still a complicated topic to me. :smile: (They do star in one of my favorite xkcd comics, though.)

5 Likes

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