We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up.

The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.

Here’s the example form HTML we’ll use for the rest of this article. It’s just two text fields (name and email) and a submit button:

1
2
3
4
5
6
7
8
9
10
11
12

<form action="http://mywebsite.com/form_submit.php" method="post">
     <p>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" />
     </p>
     <p>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" />
     </p>
     <button type="submit" onclick="return submitAjaxForm();">Submit</button>
     <p id="ajaxMessage"></p>
</form>

There’s three things you should take note of:

1. The form’s action attribute is set to a page on mywebsite.com, not facebook.com (replace mywebsite.com with your own domain)
2. The submit button has an onSubmit event that calls a function submitAjaxForm, which we’ll define shortly
3. At the end of the form is an empty paragraph tag. We’ll use this space to display messages to the user.

On our server, form_submit.php is a simple PHP script that logs the submissions, and sends back a message for the user letting them know the submission was successful. It might look something like this:

1
2
3
4

<?php
     log_submission($_POST['name', $_POST['email']);
     echo "Thank you for your submission!";
?>

Of course, your script will be more sophisticated than this one, and doesn’t have to be written in PHP. Its on your server, so you can handle logging the submission however you like. Just make sure the output is valid FBML.

With the form HTML added to your Facebook page and the logging script in place, the only thing left is adding the Javascript to submit the form via AJAX and show the confirmation message.

Note: Facebook does not allow you to use any Javascript function you like, for security purposes. Instead they’ve created a library of Javascript functions for accessing the DOM, AJAX, and event binding called FBJS. These functions are used in the example below.

We’ll now define the submitAjaxForm() function we referenced earlier in our submit button’s onSubmit event:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script><!--
function submitAjaxForm() 
{ 
	// declare a new FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
 
	// define a callback to handle the response from the server
	ajax.ondone = function(data) 
	{ 
		document.getElementById('ajaxMessage').setInnerFBML(data);
	}
 
	// let the user know we're sending the data	
	document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');
 
	// collect field values
	var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
	ajax.post('http://mywebsite.com/form_submit.php', queryParams);
	return false;
}
//--></script>

Note: The opening and closing HTML comments embedded in the Javascript are important, so leave them intact.

The example is fairly self explanatory, but here’s what’s happening:

1. Declare a new Ajax object, which is one of the FBJS classes. We then set its response type to FBML (Ajax.RAW and Ajax.JSON are also accepted).
2. Define a callback function to handle the response from the server. In this case, our function simply takes the response from the server and displays it in the #ajaxMessage paragraph we defined earlier.
3. Update the user to let them know their data is being submitted using FBJS’s setInnerFBML function.
4. Collect the form field’s values into an array named queryParams, using FBJS’s getElementById and getValue functions. Although getElementById is similar to the standard Javascript function, it accounts for the random slugs Facebook injects into div id’s for security (View Source on a Facebook page and look at the div ID’s to see this in action).
5. Send the AJAX request, using FBJS’ Ajax.post function. The second argument is optional, and should be an array containing the query parameters.
6. “return false;” prevents the form’s normal submit behavior

That’s all there is to it! If you have any questions or if I should clarify a section, let me know in the comments.

The Challenge

Given 2 text files, each containing approximately 1500 anonymous IP addresses, we were to determine how many resolved to each US state. Separate counts were to be maintained for each list. The data was needed for a time sensitive report, and the clock was ticking.

The Tools

There are several freely available SQL databases which correlate IP addresses to their geographic location, such as this one maintained by iplocationtools.com. If we’d been building a web app setting up a local instance would have made sense, but at 4.1 million rows it was going to take too long to get a local instance running.

What we needed was a web service to do the lookups for us. In the past, we’d been unable to find a free web service to fulfill this role, as most will not provide data beyond a country level. But today we were lucky, and Google quickly turned up the perfect solution: a free REST web service running the very same database from iplocationtools.com. Its exactly what it says on the tin: a free IP geolocation webservice. It gave us even more accuracy than we needed (cities and zipcodes!), and even better it was running on Google’s App Engine, so we knew it could handle a heavy load.

With the primary problem solved, the only thing needed was a simple PHP script to read in the input files, query the web service for each IP, parse the JSON results, and maintain a total for each state.

The Solution

Thanks to PHP5’s excellent JSON support, the script to interact with the web service was trivial. I won’t bore you with the file I/O and tallying, but here’s the function which converts the IP address to its state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
	function getStateFromIp($ip)
	{
		$resp = json_decode(file_get_contents('http://freegeoip.appspot.com/json/' . urlencode($ip)));
		if (!$resp->status)
		{
			// lookup failed
			return false;
		}
		else
		{
			return $resp->regioncode;		
		}
	}      
?>

Take note of the the json_decode function. If you’re not already familiar with it I’d highly recommend taking a few minutes to familiarize yourself with PHP5’s JSON functions. JSON is becoming a de facto standard for web services, so being able to painlessly convert to and from JSON in PHP is critical.

Finally, we simply used print_r to dump the array containing the per state totals, and used Monarch to pull the data into an Excel file which we then delivered to the customer. (Note: under normal circumstances we would have reached a more elegant solution, but given the time constraints brute force was the name of the game.)

Conclusion

On-demand web services are fundamentally changing the way we interact with data. Projects which were formerly large, slow, and expensive can now be completed in a matter of hours or days for a fraction of the cost. Perhaps most importantly, anyone can get involved.

Its an exciting time, and we’re happy to be a part of it all. Thanks for reading!

If your company needs help with a custom dataset contact us today. Even if you’re not sure exactly what to ask for, we can help fill in the blanks.

We’ve identified 10 ways in which normal HTML forms fall short, and dug up the Javascript and CSS code you’ll need to fix them. Although the best enhancements are so intuitive as to be unnoticed, rest assured your visitors would thank you if they knew.

Note: Many of the solutions in this list depend on jQuery, our javascript framework of choice.

Combo Boxes

For those unfamiliar, a Combo Box is a combination of a text box and a list box. It allows the user the option of selecting from a list of predefined items, or entering a new item of their choice. Your browser’s address bar is a perfect example.

Its an elegant solution to a common problem, yet the combo box was somehow left out of HTML’s form elements.

Enter Sexy Combo, a jQuery plugin which provides a seamless solution. Users without javascript will simply encounter a normal select element.

Progress Bars For Uploads

The standard file input frustrates users with its awkwardness and lack of information. Furthermore, not being able to upload asynchronously results in a lot of wasted time.

To be fair, providing information on an ongoing upload is trickier than it might sound. Thankfully, SWFUpload provides a very clean solution that will convert your standard file inputs into a very flexible and asynchronous file uploader complete with a progress bar.

Note: As the name implies, SWFUpload uses an invisible Flash movie to actually perform the upload. As such, your users will need Flash as well as javascript enabled to take advantage.

Date Selection

Using a standard text input for a date leads to all manner of formatting issues, and using 3 select boxes is cumbersome. Desktop apps have a great solution – the date picker, which is to say a pop-up calendar.

jQuery UI’s Datepicker plugin is a perfect solution.

Note: The download page is for the entire jQuery UI library, but will allow you to download only what you want. I’d recommend only downloading the Datepicker with Packed compression, as the library is quite large.

Time Selection

Time selection in a normal HTML form has the same problems as date selection, but it lacks a uniform solution. We’ve provided 2 implementations, so that you can decide which is more appropriate for your audience.

Time Entry is a jQuery plugin that is simple and very customizable. Its normal behavior is to provide a text box where the user can use the arrow keys to quickly set the hour, minute, and am/pm settings. Its similar to how you set the time in Windows, so it should be intuitive for most visitors.

ClockPick is a more creative, but less traditional solution. If you’re generally comfortable with creative inputs, its a fantastic interface.

Color Selection

Color selection might not apply to every app, but when you need it the native options leave you out in the cold. There’s only a handful of visitors who would know what a hex code is, and even fewer who have their favorites memorized.

ColorPicker is a very nice solution, which provides a color picker similar to that in Adobe Photoshop.

Input Masking / Validation

Input masking is when a text box has static characters already included, and the cursor moves intelligently. For example, a text box for a social security number should already have the dashes, and after you enter the first three numbers the cursor should move past the first dash. Furthermore, it shouldn’t allow anything but numbers to be entered.

Input validation is checking to see if the value the user entered falls within the boundaries. In our social security number example, if the number entered isn’t exactly 9 digits, its not valid.

Note: Client-side validation can be easily overridden by a malicious visitor, so you’ll need to sanitize and validate your data server-side as well.

The Masked Input jQuery plugin can implement both of these features for us. It will let you define any custom mask, and you can use its “completed” callback function to flag the inputs as valid.

Better Support for Defaults

HTML inputs do allow for default values, but its nice to have them disappear when the input gains focus, and reappear on blur if the user hasn’t entered anything.

The aptly named Default Values plugin does exactly that.

AJAX Form Submission

Submitting forms can be a great use of AJAX, particularly if you have a series of forms which are affected by the user entered values (i.e. a wizard). Its also a nice way to break a long form into stages to decrease abandonment.

The jQuery Form Plugin is an easy way to convert your current forms to AJAX forms while preserving their functionality for users without Javascript. If you are feeling creative or want to write something more customized, jQuery’s serialize function will get you almost all the way there.

Automatically Growing Textareas

If you’ve used Facebook or Basecamp, you’ve probably noticed that the textareas get longer when you’re running out of space. Its aesthetically pleasing and very convenient.

Here’s a jQuery plugin to add the same behavior to your textareas.

Spin Buttons

A spin button is a text box with up/down arrows, allowing the user to easily “nudge” a numeric value up or down. Like a combo box, the user can still type in their own value.

They are most useful when the range of possible values is fairly small – for example selecting the number of diners in a reservation.

The jQuery Spin Button plugin is a nice implementation of this control.

One More Thing

Each of these ten solutions requires at least one external javascript library, and some require stylesheets. Implementing all ten would be great, but including a bunch of external javascript / css files can drastically increase the load time of your page.

Therefore, we recommend you do 2 things:

1. Concatenate your Javascript and CSS files as much as makes sense.
2. Compress them using Dean Edward’s packer and CSSDrive’s CSS Compressor, respectively.

Also, if you know of any scripts that we missed here let us know in the comments. Thanks for reading!