Smart Forms Using GeoIP  Location

/

GeoIP technology allows us to detect where a specific user is located based on their IP address. With MaxMind’s new JavaScript API it is easy to auto-fill any location form fields to make processes easier for users. This avoids one of the common user interface design mistakes we often encounter: the use of poor defaults.

Sample

GeoIP: Smart Form Design

This is a very basic but common example of how you can use this in your projects.

How it’s done

You’ll need to start by linking to a copy of jQuery and the MaxMind GeoIP JavaScript API.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="https://j.maxmind.com/app/geoip.js" type="text/javascript"><!--mce:1--></script>

If for some reason the MaxMind data service goes down, the first field will be the default. Not the end of the world. It’s estimated that services uptime is about 99.95%.

Next you’ll need an XHTML form that contains a state select (or dropdown) field. Here’s a basic one I’ve recently used in a prototype.

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

Next you’ll need to add the jQuery function/process itself to make everything work. This can be included inline in the <head> of the document or externally, it doesn’t matter.

JavaScript / jQuery

$(function(){
    var $state = geoip_region();
    $('#states option[value='+$state+']').attr('selected','selected');
});

That’s it!

Easy as pie. Hope this helps, I know I’m pretty excited about it.

Resources