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.