How to setup a Drop-Down-List with Country-Code + Flag + Telephone-Prefix?


I’d like to setup a comfortable dropdown-selector showing an ordered list with following content on each row :

  • Country-Code | Flag | Country-Name

(Country-Code a.k.a. Prefix a.k.a. Dial-Code)

I don’t understand yet how to load the list into the Form. Can anyone provide a short step-by-step ?

Here an external source for the list, but not sure which format is required for the KOBO-TOOLBOX environment :

I also presume a select_one question type with a minimal appearance are necessary.

I also presume I should insert a new Flag-Column between columns A and B :

Any hints much appreciated !

Best regards :slight_smile:

Hi @alienationfreez,

Are you planning to use ENKETO web form or KoboCollect (The android app) to collect data?

1 Like

Hello Hakan,

I’m not sure about that choice yet. The purpose at the end is to display the form via a wordpress-environment and I’m not sure

  • how to achieve that
  • if there is any possibility to embed the form with just a code snippet or so ( is there any ? )

As far as I understand, KOBOCOLLECT (the ANDROID App) is restricting the user-group to only ANDROID-users, while the ENKETO-Webform is a more generic way of deployment. Therefor I’d rather opt for the ENKETO-Webform solution.


1 Like


Now I really wanted to challenge this problem. I’ve got 2 solutions for you, the first one is the easy one:

  • The Easy Solution:
    Just create the labels as Country-Code | Flag | Country-Name and make the appearance minimal, so when someone selects an answer all of the data is there.

But I believe you’re not looking for that kind of solution :slight_smile:

  • The Not So Easy Solution:

1- In order to create rows, you need to collect data in Enketo Webforms, preferably in a desktop. You’ll need to use grid theme. See here to how to set up your form in grid theme: Using Alternative Enketo Web Form Styles — KoboToolbox documentation

2- I’m assuming you want to use each question;
For example if someone knows the name of the country, then the country code and the flag should be choosen as default, and vice versa for all the other options.
This requires some calculations that you’ll need to adjust for each option. (You’ll see them in the excel file I provided and in the survey sheet)

3- Using emojis is a hard one, I’m not sure all respondents will have access to country flag emojis (For instance I don’t see them in my computer, so I used heart emojis as a proof of concept)

There you go:

Screenshot 1 (When nothing is selected)

Screenshot 2 (When emoji is selected the 2nd question gets a default answer)

Screenshot 3 (When the color is selected the 1st question gets a default answer)

This is the survey sheet:
(see the calculation and appearance columns)

type name label required appearance calculation
select_one Emoji Q1 Please select (emoji) false w1 minimal if(${Q2}= ‘C1’, ‘E1’, if(${Q2}= ‘C2’, ‘E2’, if(${Q2}= ‘C3’, ‘E3’, ’ ')))
select_one Color Q2 Please select (color) false w1 minimal if(${Q1}= ‘E1’, ‘C1’, if(${Q1}= ‘E2’, ‘C2’, if(${Q1}= ‘E3’, ‘C3’, ’ ')))

This the choices sheet:

list_name name label
Emoji E1 :heart:
Emoji E2 :blue_heart:
Emoji E3 :yellow_heart:
Color C1 Red
Color C2 Blue
Color C3 Yellow

This is the settings sheet:
(see the style)

title style
Automatic Answer Select Grid Theme theme-grid

This is the xls version of the form: (you can change this according to your needs)
Automatic Answer Select Grid Theme.xlsx (10.3 KB)

Hope this works for you.

1 Like

Thanks a lot, Hakan !

I needed a few days to chew your input, update and think about my TEST-docs.

I replaced «Emoji» by «Country_Code»
I replaced «Color» by «Country»
A first TEST-attempt is so far working :

2023-08-16_Automatic_Answer_Select_Grid_Theme.53.3.1.xlsx (7.9 KB)

…but as I have to handle 244 countries, I am wondering if any syntax might be able to shorten the calculation-code, in order to streamline the expression of spans, e. g. : if($[Q2]= ‘C1-C244’, ‘E1-E244’) …Unfortunately, this piece of code doesn’t seem to work yet :

2023-08-16_Automatic_Answer_Select_Grid_Theme.53.4.0.xlsx (22.5 KB)

Do you also perhaps know any way to display the two columns (Country-Code and Flag_Country-Name) side by side, so the user could select between «ordering_by_Country-Code» or «ordering_by_Flag_Country-Name» before choosing from the lists ?

I really appreciate you help – hoping this is not too much input.


I mean arrays (spans).