Form Question - City / Country Drop Down Option

Community resources General
1

Hi Everyone,

I am creating a form to collect information from customers. Name, Location, email address etc.

One of the options is to select a country. How do I create a selection that automatically generates the cities in that country after the country has been created?

For Example a customer chooses USA in the first selection, I would like the next selection to include only cities from the USA.

Is this possible to create?

Thanks in advance for any help.

1 Like
2

Based on the answer her.

Country

Designer side:

Add select menu ==>add #id country for this dropdown + Remove all options from this dropdown:

screenshot:
image

without label maybe use one option:
image

custom code

Add custom code before body (copy-paste):

<script>
function addCountries(whereto) {
  var countriesfile = "United States of America, Afghanistan, Albania, Algeria, Andorra, Angola, Antigua & Deps, Argentina, Armenia, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bhutan, Bolivia, Bosnia Herzegovina, Botswana, Brazil, Brunei, Bulgaria, Burkina, Burma, Burundi, Cambodia, Cameroon, Canada, Cape Verde, Central African Rep, Chad, Chile, People's Republic of China, Republic of China, Colombia, Comoros, Democratic Republic of the Congo, Republic of the Congo, Costa Rica, Croatia, Cuba, Cyprus, Czech Republic, Danzig, Denmark, Djibouti, Dominica, Dominican Republic, East Timor, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, Ethiopia, Fiji, Finland, France, Gabon, Gaza Strip, The Gambia, Georgia, Germany, Ghana, Greece, Grenada, Guatemala, Guinea, Guinea-Bissau, Guyana, Haiti, Holy Roman Empire, Honduras, Hungary, Iceland, India, Indonesia, Iran, Iraq, Republic of Ireland, Israel, Italy, Ivory Coast, Jamaica, Japan, Jonathanland, Jordan, Kazakhstan, Kenya, Kiribati, North Korea, South Korea, Kosovo, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Macedonia, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro, Morocco, Mount Athos, Mozambique, Namibia, Nauru, Nepal, Newfoundland, Netherlands, New Zealand, Nicaragua, Niger, Nigeria, Norway, Oman, Ottoman Empire, Pakistan, Palau, Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland, Portugal, Prussia, Qatar, Romania, Rome, Russian Federation, Rwanda, St Kitts & Nevis, St Lucia, Saint Vincent & the, Grenadines, Samoa, San Marino, Sao Tome & Principe, Saudi Arabia, Senegal, Serbia, Seychelles, Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands, Somalia, South Africa, Spain, Sri Lanka, Sudan, Suriname, Swaziland, Sweden, Switzerland, Syria, Tajikistan, Tanzania, Thailand, Togo, Tonga, Trinidad & Tobago, Tunisia, Turkey, Turkmenistan, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, Uruguay, Uzbekistan, Vanuatu, Vatican City, Venezuela, Vietnam, Yemen, Zambia, Zimbabwe";
  var countries = countriesfile.split(", ");
  for(var c = 0; c<countries.length; c++) {
    $(whereto).append('<option value="' + countries[c] + '">' + countries[c] + '</option>');
  }
}

Webflow.push(function() {
  addCountries('#country');
});
</script>

Publish.

Result:

image
image969×604 17.1 KB

City

The same idea (I duplicate the code).

<script>
function addCities(whereto) {
  var Citiesfile = "city1, city2, city3, city4, city5, city6";
  var cities = Citiesfile.split(", ");
  for(var c = 0; c<cities.length; c++) {
    $(whereto).append('<option value="' + cities[c] + '">' + cities[c] + '</option>');
  }
}

Webflow.push(function() {
  addCities('#city');
});
</script>

image

Result:

image
image966×291 7.08 KB

Full copy-paste code (City & Country):

<script>
/* #### 1/2. select menu add countries #### */
function addCountries(whereto) {
  var countriesfile = "United States of America, Afghanistan, Albania, Algeria, Andorra, Angola, Antigua & Deps, Argentina, Armenia, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bhutan, Bolivia, Bosnia Herzegovina, Botswana, Brazil, Brunei, Bulgaria, Burkina, Burma, Burundi, Cambodia, Cameroon, Canada, Cape Verde, Central African Rep, Chad, Chile, People's Republic of China, Republic of China, Colombia, Comoros, Democratic Republic of the Congo, Republic of the Congo, Costa Rica, Croatia, Cuba, Cyprus, Czech Republic, Danzig, Denmark, Djibouti, Dominica, Dominican Republic, East Timor, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, Ethiopia, Fiji, Finland, France, Gabon, Gaza Strip, The Gambia, Georgia, Germany, Ghana, Greece, Grenada, Guatemala, Guinea, Guinea-Bissau, Guyana, Haiti, Holy Roman Empire, Honduras, Hungary, Iceland, India, Indonesia, Iran, Iraq, Republic of Ireland, Israel, Italy, Ivory Coast, Jamaica, Japan, Jonathanland, Jordan, Kazakhstan, Kenya, Kiribati, North Korea, South Korea, Kosovo, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Macedonia, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro, Morocco, Mount Athos, Mozambique, Namibia, Nauru, Nepal, Newfoundland, Netherlands, New Zealand, Nicaragua, Niger, Nigeria, Norway, Oman, Ottoman Empire, Pakistan, Palau, Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland, Portugal, Prussia, Qatar, Romania, Rome, Russian Federation, Rwanda, St Kitts & Nevis, St Lucia, Saint Vincent & the, Grenadines, Samoa, San Marino, Sao Tome & Principe, Saudi Arabia, Senegal, Serbia, Seychelles, Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands, Somalia, South Africa, Spain, Sri Lanka, Sudan, Suriname, Swaziland, Sweden, Switzerland, Syria, Tajikistan, Tanzania, Thailand, Togo, Tonga, Trinidad & Tobago, Tunisia, Turkey, Turkmenistan, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, Uruguay, Uzbekistan, Vanuatu, Vatican City, Venezuela, Vietnam, Yemen, Zambia, Zimbabwe";
  var countries = countriesfile.split(", ");
  for(var c = 0; c<countries.length; c++) {
    $(whereto).append('<option value="' + countries[c] + '">' + countries[c] + '</option>');
  }
}

Webflow.push(function() {
  addCountries('#country');
});

/* #### 2/2. select menu add cities #### */
function addCities(whereto) {
  var Citiesfile = "city1, city2, city3, city4, city5, city6";
  var cities = Citiesfile.split(", ");
  for(var c = 0; c<cities.length; c++) {
    $(whereto).append('<option value="' + cities[c] + '">' + cities[c] + '</option>');
  }
}

Webflow.push(function() {
  addCities('#city');
});
</script>
3 Likes
3

Hey @Siton_Systems @larkwad can you explain how do you connect the cities field to auto populate with Cities according to the Country Selection. With this code I’m able to populate two separate fields.

For Example a customer chooses USA in the first selection, I would like the next selection to include only cities from the USA

Thanks in advance for any help :wink: