page loader

Creating A HTML Select Box With Automatic Country Selection

 

The above select box will automatically select your country by detecting your geolocation. This is a great way to improve use experience in your website where you don’t require the visitor to scroll through a long list of countries in order to find theirs. It is so much better for the user when their location has been preselected.

 

To automatically select the visitor’s location, you will need to obtain the visitor’s IP address and then convert it into their geolocation using an IP to location database. This is a complex and expensive process, however using Geolify this can be achieved at a minimal cost and with hardly any coding.

 

The first step is to sign up with Geolify and start a new ‘Geo Java’ service. This service will allow you to determine visitor geolocation by using a javascript call to Geolify. When you sign up and setup a new ‘Geo Java’ service, you will get one line of javascript code as shown below. This code needs to be pasted in your website’s HEAD. If you view the source code of this page, you will find the below code.

<script type=’text/javascript’ src=’http://www.geolify.com/geojavascript.php?id=551‘ ></script>

 

Once you paste the ‘Geo Java’ code, you will then be able to get visitor location by calling a few simple javascript functions.

 

Below is the code we use to display our country select box. It is just a standard HTML select box with options. This needs to be placed where you want the select box to appear in your website. Take note of the select ID.

<select id=”autocountryselect”>
<option value=”AF”>Afghanistan</option>
<option value=”AX”>Åland Islands</option>
<option value=”AL”>Albania</option>
<option value=”DZ”>Algeria</option>
<option value=”AS”>American Samoa</option>
<option value=”AD”>Andorra</option>
<option value=”AO”>Angola</option>
<option value=”AI”>Anguilla</option>
<option value=”AQ”>Antarctica</option>

<option value=”AG”>Antigua and Barbuda</option>

<!– Add as many countries as you want here… –>
</select>

 

The code below is what actually automatically sets the value of the select box. This needs to pasted in your website anywhere after the select box code above. What this code does, it is gets the element (select box) by it’s ID and then set’s its value to the country code.

The country code is obtained by using Geolify’s country code function. The country code will be equivalent to the option values in the select box. The country code function is one of the functions provided with Geolify. You can also get country name, city name, state name, longtitude, latitude and so on.

<script type=”text/javascript”>
document.getElementById(“autocountryselect”).value = geolify_country_code();
</script>

 

So there your have it, a super simple way to design a HTML automatic country select box. You can easily do the same for states and cities using Geolify.

 

 

GEOLIFY

#1 Geo Targeting SaaS

Geo Redirects

Geo Content

Geo Popups

Geo Images

Geo Notifications

Geo Links

Geo Javascript

Get Started For Free