How to Auto-Fill City/State from Zipcode on your Forms

Have you ever been filling out a form on a website when you realized your city and state had already been populated for you? It used to be amazing but now it’s just the standard. If your website doesn’t auto-populate the city and state after someone enters the zip, you’re falling behind. Luckily it’s super easy to do.

Why would you want to do this?

  • It makes less fields that your customer has to fill out. Less fields = more conversions
  • It increases data quality and consistency. No more misspellings or different CASES in your list
  • Everyone else is doing it. Seriously, this has been popular since 2001.


autofill

Here’s how, in 3 easy steps:

  1. Acquire a Zipcode Location database. Here’s one that we offer that provides easy zip to city/state lookup.
  2. Write a server-side script that will lookup the city and state given the zip as a url parameter. This will be used in an AJAX call. Sample script is provided below.
  3. Put a javascript snippet on your form that will call that script once the zip code has been filled out. We’ve provided an example of this script below too.

Here’s an example server-site lookup script (written in PHP, using a MySQL database)

<?php
//you'll have to replace your credentials here
$mysqldatabase="XXXX";
$mysqluser="XXXX";
$mysqlpassword="XXXXX";

//connect to db
$DBCONN=mysql_connect("localhost",$mysqluser,$mysqlpassword);
if(!$DBCONN) die("Couldn't connect to MySQL Server.");

//perform lookup
$query = "SELECT city, state_abbr FROM EasyDbsZipcodeLocations WHERE zip=".mysql_real_escape_string($_GET['zip']);
$result=mysql_db_query($mysqldatabase, $query) or die(mysql_error());

//print out results
$row = mysql_fetch_array($result);
echo $row['city'].",".$row['state_abbr'];
?>

Here’s an example client-side AJAX script (Javascript)

<script>
var ajax = getHTTPObject();

function getHTTPObject()
{
	var xmlhttp;
	if (window.XMLHttpRequest) {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	  // code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
	  //alert("Your browser does not support XMLHTTP!");
	}
	return xmlhttp;
}

function updateCityState()
{
	if (ajax)
	{
		var zipValue = document.getElementById("zipcode").value;
		if(zipValue)
		{
			var url = "path/to/your/script/get_city_state.php";
			var param = "?zip=" + escape(zipValue);

			ajax.open("GET", url + param, true);
			ajax.onreadystatechange = handleAjax;
			ajax.send(null);
		}
	}
}
function handleAjax()
{
	if (ajax.readyState == 4)
	{
		citystatearr = ajax.responseText.split(",");

		var city = document.getElementById('city');
		var state = document.getElementById('state');

		city.value = citystatearr[0];
		state.value = citystatearr[1];
	}
}

//then on your form:
// 1: Update zip field to call onblur="updateCityState();"
// 2: Make sure your zip, city, and state fields have ID's with those names
</script>

That’s all you need! Awesome!

Check out a live, working demo here.

Everyone else is already doing this so if you’re not, your competitors are! Feel free to post any questions in the comments below.

Marketing with Race by Zip

Many people don’t realize that even though the United States is known as a melting pot, it still remains highly segmented when it comes to races living in particular regions. You’ll find that for each zip code there is a predominant ethnicity living there. This can be used to our advantage by delivering highly customized racial content based on where your visitors or potential customers are located.

Take for example you know that most of your customers are African-American. Why not customize your website to have a picture of a black family as your hero shot? It will give them something they relate to, and make them feel like this site caters to them specifically. Take a look at how all of the models on the FUBU site are African American:

Fubu

What if your customers are spread all over? Then you can segment your website based on where they are coming from and give them a custom experience. This is typically done by asking for a visitor’s zip code when they land on the site. With this information you can customize the rest of their visit with aspects just for them!

Here are some more examples. Did you know that:

  •  98.1% of the population of zip code 60620 (Chicago, IL) is black.
  • 71.6% of the inhabitants of zip 91755 (Monterey Park, CA) are asian.
  • 96.6% of the population of zipcode 87420 (Shiprock, NM) is native american.
  • 98.8% of the citizens in zip code 41164 (Olive Hill, Kentucky) are white.

Dale Earnhardt Jr NASCAR Unites Patriotic wallpaper 16x10

This can also work the other way – if you know that there is no majority of the population, don’t place anything that is very racial specific and instead embrace things which are common likes among all backgrounds.

The US Census provides racial data by zipcode for the most common ethnicities: white, black, native american, asian, and hawaiian. You can try extracting the data yourself (which has been known to cause headaches), at the US Census Website. Or you can download one of our previously compiled databases ready for install within minutes! See our 2010 Census Demographics Database by Zip

Would love to hear your experiences doing this! Leave them in the comments below.

How to get Census Data by Zipcode

The 2010 US Census has loads of useful data – it can be used for research, market targeting, or even for your business. Information such as population, incomes, land area, race, age, sex, language, housing, and other vital demographics are extremely useful. Data organized by city is too difficult to match up, and by state is not granular enough – but zip code is something everyone can relate to. Unfortunately when you first arrive to the Census Website you can easily get lost.

Here’s how you can get the data you want. Start at the American Fact Finder. First you pick which data you want. Choose the “Topics” button on the left hand side. You’ll see a wealth of categories (People, Housing, Business and Industry, Year, Product Type, Program, Dataset). Drill down into the category you want and choose the piece of data you’re looking for (For example: ‘People: Age & Sex: Age of Householder’).

Then you need to choose how you want it broken down by area. Click the “Geographies” button on the left. To get things separated by zip code, select the ‘5-digit ZIP Code Tabulation Area’. You can limit it by state, or instead choose ‘All  5-digit ZIP Code Tabulation Areas Within United States’.

american fact finder

Now you’ll see a table in the main part of the page which will show you which datasets you can pull this information from. If you want your data to be from the 2010 Census (which is more accurate than the ACS surveys), make sure you choose one from either the “2010 SF1 100% Data” or “2010 SF2 100% Data” (SF1 and SF2 means the Summary File, all population responses, not a portion of the people).

The last step is to choose the file you want, then choose to download it. You’ll notice that it’ll come in weird formats, and it may take you a while to find the exact file you’re looking for. That’s why I have aggregated the most common fields for you by zip in database files ready for MySQL, Excel, Access, Oracle, CSV, and more. Check out this 2010 US Census Demographics Database by Zipcode

It took me a while to learn all the data, but once you get the hang of it it’s pretty useful. Good luck!

What do the prefixes mean on the 2010 US Census tables?

Table Prefixes:

When browsing the census data, you’ll notice a few prefixes on the table ID’s. Knowing what they mean will help your search for data.

P – Population
H – Household
QT – Quick Table

What are ZCTA’s?

The 2010 Census doesn’t use zipcodes, it uses ZCTA’s (zip code tabulation area) which makes counting easier for the tabulators. ZCTA’s are the same as zipcodes for 99.9% of the data (in other words, a very small number of houses will be represented by a different zipcode). This is simply because some locations have multiple zip code per block, which makes it hard for the census. For most cases this has no effect on the accuracy of the data and can be used interchangeably with zip codes. In fact, the Census Bureau provides ZCTAs for the purpose of zip code statistics.

For more information, see the ZCTA Frequently Asked Questions