Registration Forms Data Select Box Helpers

One of the more tedious tasks for both Developers and Users is the Account Registration process, and other forms that you are trying to collect information from. Whether that is a shipping and billing information for a checkout process, a user signup form, etc. As a Developer it can be time consuming to construct a well-defined form, especially if you are looking to add some intelligence to it. And if you really want a user to spend the time filling out the form, making it as quick and easy as possible will certainly lead to less abandoned carts, more forms being submitted, and at the end of the day provide more results. To help you move things along we have provided several help lists and code fragments to assist in your form design process.

Countries Selection

So let's start with the first selection you may want to have a user enter which is a Country of Origin, since the country field could drive many other selections like State or Province. Additionally, this is quite often where you would start running into some data inconsistencies since a user entered country can often provide results that break data integrity issues. One user may enter 'US', another 'USA', yet another as 'United States', etc. PHP Array Data and JavaScript JSON data implementation is described below. You can download the countries data in CSV, MySQL, Excel, MS Access, XML and DBF formats in our Free Lists Section and linked to the right.

Countries Array - PHP Approach

$countries = array(  
    "AF" => "Afghanistan",  
    "AL" => "Albania",  
    "DZ" => "Algeria",  
    "AS" => "American Samoa",  
    "AD" => "Andorra",  
    "AO" => "Angola",  
    "AI" => "Anguilla",  
    "AQ" => "Antarctica",  
    "AG" => "Antigua and Barbuda",  
    "AR" => "Argentina",  
    "AM" => "Armenia",  
    "AW" => "Aruba",  
    "AU" => "Australia",  
    "AT" => "Austria",  
    "AZ" => "Azerbaijan",  
    "BS" => "Bahamas",  
    "BH" => "Bahrain",  
    "BD" => "Bangladesh",  
    "BB" => "Barbados",  
    "BY" => "Belarus",  
    "BE" => "Belgium",  
    "BZ" => "Belize",  
    "BJ" => "Benin",  
    "BM" => "Bermuda",  
    "BT" => "Bhutan",  
    "BO" => "Bolivia",  
    "BA" => "Bosnia and Herzegovina",  
    "BW" => "Botswana",  
    "BV" => "Bouvet Island",  
    "BR" => "Brazil",  
    "IO" => "British Indian Ocean Territory",  
    "BN" => "Brunei Darussalam",  
    "BG" => "Bulgaria",  
    "BF" => "Burkina Faso",  
    "BI" => "Burundi",  
    "KH" => "Cambodia",  
    "CM" => "Cameroon",  
    "CA" => "Canada",  
    "CV" => "Cape Verde",  
    "KY" => "Cayman Islands",  
    "CF" => "Central African Republic",  
    "TD" => "Chad",  
    "CL" => "Chile",  
    "CN" => "China",  
    "CX" => "Christmas Island",  
    "CC" => "Cocos (Keeling) Islands",  
    "CO" => "Colombia",  
    "KM" => "Comoros",  
    "CG" => "Congo",  
    "CD" => "Congo, the Democratic Republic of the",  
    "CK" => "Cook Islands",  
    "CR" => "Costa Rica",  
    "CI" => "Cote D'Ivoire",  
    "HR" => "Croatia",  
    "CU" => "Cuba",  
    "CY" => "Cyprus",  
    "CZ" => "Czech Republic",  
    "DK" => "Denmark",  
    "DJ" => "Djibouti",  
    "DM" => "Dominica",  
    "DO" => "Dominican Republic",  
    "EC" => "Ecuador",  
    "EG" => "Egypt",  
    "SV" => "El Salvador",  
    "GQ" => "Equatorial Guinea",  
    "ER" => "Eritrea",  
    "EE" => "Estonia",  
    "ET" => "Ethiopia",  
    "FK" => "Falkland Islands (Malvinas)",  
    "FO" => "Faroe Islands",  
    "FJ" => "Fiji",  
    "FI" => "Finland",  
    "FR" => "France",  
    "GF" => "French Guiana",  
    "PF" => "French Polynesia",  
    "TF" => "French Southern Territories",  
    "GA" => "Gabon",  
    "GM" => "Gambia",  
    "GE" => "Georgia",  
    "DE" => "Germany",  
    "GH" => "Ghana",  
    "GI" => "Gibraltar",  
    "GR" => "Greece",  
    "GL" => "Greenland",  
    "GD" => "Grenada",  
    "GP" => "Guadeloupe",  
    "GU" => "Guam",  
    "GT" => "Guatemala",  
    "GN" => "Guinea",  
    "GW" => "Guinea-Bissau",  
    "GY" => "Guyana",  
    "HT" => "Haiti",  
    "HM" => "Heard Island and Mcdonald Islands",  
    "VA" => "Holy See (Vatican City State)",  
    "HN" => "Honduras",  
    "HK" => "Hong Kong",  
    "HU" => "Hungary",  
    "IS" => "Iceland",  
    "IN" => "India",  
    "ID" => "Indonesia",  
    "IR" => "Iran, Islamic Republic of",  
    "IQ" => "Iraq",  
    "IE" => "Ireland",  
    "IL" => "Israel",  
    "IT" => "Italy",  
    "JM" => "Jamaica",  
    "JP" => "Japan",  
    "JO" => "Jordan",  
    "KZ" => "Kazakhstan",  
    "KE" => "Kenya",  
    "KI" => "Kiribati",  
    "KP" => "Korea, Democratic People's Republic of",  
    "KR" => "Korea, Republic of",  
    "KW" => "Kuwait",  
    "KG" => "Kyrgyzstan",  
    "LA" => "Lao People's Democratic Republic",  
    "LV" => "Latvia",  
    "LB" => "Lebanon",  
    "LS" => "Lesotho",  
    "LR" => "Liberia",  
    "LY" => "Libyan Arab Jamahiriya",  
    "LI" => "Liechtenstein",  
    "LT" => "Lithuania",  
    "LU" => "Luxembourg",  
    "MO" => "Macao",  
    "MK" => "Macedonia, the Former Yugoslav Republic of",  
    "MG" => "Madagascar",  
    "MW" => "Malawi",  
    "MY" => "Malaysia",  
    "MV" => "Maldives",  
    "ML" => "Mali",  
    "MT" => "Malta",  
    "MH" => "Marshall Islands",  
    "MQ" => "Martinique",  
    "MR" => "Mauritania",  
    "MU" => "Mauritius",  
    "YT" => "Mayotte",  
    "MX" => "Mexico",  
    "FM" => "Micronesia, Federated States of",  
    "MD" => "Moldova, Republic of",  
    "MC" => "Monaco",  
    "MN" => "Mongolia",  
    "MS" => "Montserrat",  
    "MA" => "Morocco",  
    "MZ" => "Mozambique",  
    "MM" => "Myanmar",  
    "NA" => "Namibia",  
    "NR" => "Nauru",  
    "NP" => "Nepal",  
    "NL" => "Netherlands",  
    "AN" => "Netherlands Antilles",  
    "NC" => "New Caledonia",  
    "NZ" => "New Zealand",  
    "NI" => "Nicaragua",  
    "NE" => "Niger",  
    "NG" => "Nigeria",  
    "NU" => "Niue",  
    "NF" => "Norfolk Island",  
    "MP" => "Northern Mariana Islands",  
    "NO" => "Norway",  
    "OM" => "Oman",  
    "PK" => "Pakistan",  
    "PW" => "Palau",  
    "PS" => "Palestinian Territory, Occupied",  
    "PA" => "Panama",  
    "PG" => "Papua New Guinea",  
    "PY" => "Paraguay",  
    "PE" => "Peru",  
    "PH" => "Philippines",  
    "PN" => "Pitcairn",  
    "PL" => "Poland",  
    "PT" => "Portugal",  
    "PR" => "Puerto Rico",  
    "QA" => "Qatar",  
    "RE" => "Reunion",  
    "RO" => "Romania",  
    "RU" => "Russian Federation",  
    "RW" => "Rwanda",  
    "SH" => "Saint Helena",  
    "KN" => "Saint Kitts and Nevis",  
    "LC" => "Saint Lucia",  
    "PM" => "Saint Pierre and Miquelon",  
    "VC" => "Saint Vincent and the Grenadines",  
    "WS" => "Samoa",  
    "SM" => "San Marino",  
    "ST" => "Sao Tome and Principe",  
    "SA" => "Saudi Arabia",  
    "SN" => "Senegal",  
    "CS" => "Serbia and Montenegro",  
    "SC" => "Seychelles",  
    "SL" => "Sierra Leone",  
    "SG" => "Singapore",  
    "SK" => "Slovakia",  
    "SI" => "Slovenia",  
    "SB" => "Solomon Islands",  
    "SO" => "Somalia",  
    "ZA" => "South Africa",  
    "GS" => "South Georgia and the South Sandwich Islands",  
    "ES" => "Spain",  
    "LK" => "Sri Lanka",  
    "SD" => "Sudan",  
    "SR" => "Suriname",  
    "SJ" => "Svalbard and Jan Mayen",  
    "SZ" => "Swaziland",  
    "SE" => "Sweden",  
    "CH" => "Switzerland",  
    "SY" => "Syrian Arab Republic",  
    "TW" => "Taiwan, Province of China",  
    "TJ" => "Tajikistan",  
    "TZ" => "Tanzania, United Republic of",  
    "TH" => "Thailand",  
    "TL" => "Timor-Leste",  
    "TG" => "Togo",  
    "TK" => "Tokelau",  
    "TO" => "Tonga",  
    "TT" => "Trinidad and Tobago",  
    "TN" => "Tunisia",  
    "TR" => "Turkey",  
    "TM" => "Turkmenistan",  
    "TC" => "Turks and Caicos Islands",  
    "TV" => "Tuvalu",  
    "UG" => "Uganda",  
    "UA" => "Ukraine",  
    "AE" => "United Arab Emirates",  
    "GB" => "United Kingdom",  
    "US" => "United States",  
    "UM" => "United States Minor Outlying Islands",  
    "UY" => "Uruguay",  
    "UZ" => "Uzbekistan",  
    "VU" => "Vanuatu",  
    "VE" => "Venezuela",  
    "VN" => "Viet Nam",  
    "VG" => "Virgin Islands, British",  
    "VI" => "Virgin Islands, U.s.",  
    "WF" => "Wallis and Futuna",  
    "EH" => "Western Sahara",  
    "YE" => "Yemen",  
    "ZM" => "Zambia",  
    "ZW" => "Zimbabwe"  
);

Countries Drop Down- PHP Approach

Creating the select box with this method can be done with just a few lines of code:

echo '<select name="countries">';  
foreach($countries as $k=>$c) {  
    echo '<option value="'.$k.'">'.$c.'</option>';  
}  
echo '</select>'; 

Countries JSON - jQuery Approach

Working with JavaScript to fill in the country select select options is very easy as well, for exmple using JSON data and jQuery. You can check out the Live Demonstration Code for a working example.

$.each(countries, function(key, value)
{   
     $('#countries').
          append($("").
          attr("value",key).
          text(value)); 
});

live demo

States or Province Selection

The next logical item to pre-fill would be a selection of states or provinces. You can grab a copy of a list that contains all U.S. States and Territories with associated abbreviations. From our Free Data area, or download using the link to the right if you need it in a raw format. A working example using PHP Arrays as well as jQuery with a JSON Array is illustrated below to fill in the list of States to choose from. Aside from some convenience, the overall goal is also keeping the integrity of your data in tact.

States Array - PHP Approach

$states = array(  
    'AL'=>"Alabama",    
    'AK'=>"Alaska",    
    'AZ'=>"Arizona",    
    'AR'=>"Arkansas",    
    'CA'=>"California",    
    'CO'=>"Colorado",    
    'CT'=>"Connecticut",    
    'DE'=>"Delaware",    
    'DC'=>"District Of Columbia",    
    'FL'=>"Florida",    
    'GA'=>"Georgia",    
    'HI'=>"Hawaii",    
    'ID'=>"Idaho",    
    'IL'=>"Illinois",    
    'IN'=>"Indiana",    
    'IA'=>"Iowa",    
    'KS'=>"Kansas",    
    'KY'=>"Kentucky",    
    'LA'=>"Louisiana",    
    'ME'=>"Maine",    
    'MD'=>"Maryland",    
    'MA'=>"Massachusetts",    
    'MI'=>"Michigan",    
    'MN'=>"Minnesota",    
    'MS'=>"Mississippi",    
    'MO'=>"Missouri",    
    'MT'=>"Montana",  
    'NE'=>"Nebraska",  
    'NV'=>"Nevada",  
    'NH'=>"New Hampshire",  
    'NJ'=>"New Jersey",  
    'NM'=>"New Mexico",  
    'NY'=>"New York",  
    'NC'=>"North Carolina",  
    'ND'=>"North Dakota",  
    'OH'=>"Ohio",    
    'OK'=>"Oklahoma",    
    'OR'=>"Oregon",    
    'PA'=>"Pennsylvania",    
    'RI'=>"Rhode Island",    
    'SC'=>"South Carolina",    
    'SD'=>"South Dakota",  
    'TN'=>"Tennessee",    
    'TX'=>"Texas",    
    'UT'=>"Utah",    
    'VT'=>"Vermont",    
    'VA'=>"Virginia",    
    'WA'=>"Washington",    
    'WV'=>"West Virginia",    
    'WI'=>"Wisconsin",    
    'WY'=>"Wyoming"  
);

States Drop Down- PHP Approach

Creating the select box for a state is identical to the example used above for the country:

echo '<select name="states">';  
foreach($states as $k=>$s) {  
    echo '<option value="'.$k.'">'.$s.'</option>';  
}  
echo '</select>'; 

The concept for filling in the state options with JavaScript is exactly as with the earlier example, just with the different JSON Data Array:

live demo

Putting Things Together

While all of the above helps to save some time for the user being able to just select, and for you as the develop being able to just copy / paste some code and not type everything from scratch, adding some intelligence to the form that will populate available states or provinces based on a country chosen for example is where you can start making your user's life a bit easier.

I have mashed up the two previous examples, added in another Array for Canada Provinces and put together more of a real world example with jQuery:

Country and State Live Demo

Going Further - Cities, Counties and Zip Codes

Hopefully the above is enough to get you moving on the right track, and will allow you to take a bit of the work out of form creation and letting your users complete it easier. Expanding on what we cave done so far, things like filling in available Cities or Town Names, Post Codes, Counties, Area Codes, etc. would be the next logical step of progression for our form.

We have created a few databases with a good deal of extended information for the U.S. Canada and Australia that will allow you to implement all of that additional dynamic selection logic:

U.S. Cities and Zip Codes Master List

Canada Province, City and Postal Code Master Data

Australia Suburbs and Postal Parcel Database