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.


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.

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.

You live in

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

	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.


About the Author

Kevin Leary is a web developer in Boston, MA specializing in enterprise website design and development, online marketing, and conversion optimization.