Create a contact form in Facebook page using php,Ajax and FBML

A Facebook page is a public profile page about our business to share with Facebook users. Any Facebook user can create fan pages, if he has a number of 25 fans. Mainly the Facebook profile page is description about our self or our product. If we add a contact form in these page users can easily contact us. The following example shows how to create an AJAX based contact form in the Facebook page.

To create a page, go to applications and add FBML application. This application will add a box in our webpage and here we can add HTML or FBML (Facebook Markup Language) for enhanced Page customization.

Step 1 :Create a Contact form in page
Create a contact form in the page to get the data’s from the user. We can use our simple html to create the form.

<form method="post" action="http://www.domain-name.com/contact-facebook.php">
<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>
<input type="button" value="Submit">
</form>

The above is a simple contact form. We are submitting the form data’s using ajax. So to invoke an ajax function, we must call the ajax function in a particular event. We are trying to call the ajax function in the onclick event. So we can change the button code as follows.

<input type="button" onclick="return sendFormData();" value="Submit">

Step 2 : Create the ajax function

Facebook doesn’t allow us to use any JavaScript we like to use. They have created a JavaScript library to access the DOM, ajax, events etc. This is known as FBJS. We are using these functions to work with the forms. Our ajax function is as follows.

<script><!--
function sendFormData()
{
// creating a new FBJS AJAX object
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;

// creating a handle to get response from the server
ajax.ondone = function(data)
{
document.getElementById('name').setValue('');
document.getElementById('email').setValue('');
new Dialog().showMessage('Confirmation', data);
}
// get the form values
var fields = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
ajax.post('http://www.domain-name.com/contact-facebook.php', fields);
return false;
}
//--></script>

Working
First the above function creates an Ajax object using FBJS class. After that we create a response type to FBML

Define a call back function to handle the response from the server. After execution of the requested server page this function executes. Here we have removed the textbox contents and create a Facebook alert box to popup the result message from the server. We can use various types of dialog boxes here.

Getting the form elements values and keep these values in an array. We are using FBJS getValue function to get the element values.

Using the ajax.post function we are sending this data to our server file. The server file processes the data’s.

return false is used to prevent the script from page submission.

Step 3 : Create the mail sending code

Create a mail sending code and name it as 'contact-facebook.php'. Keep the file in the root folder of our server. Add a main sending code as follows.

<?php
extract($_POST);
// create a mail sending code
$to = 'sample@sample.com';
$subject = ' Contact message from Facebook Client';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: '.$name.' <'.$email.'>' . "\r\n";

$message = '<table width="458" border="0"><tr><td width="120">Name : </td><td width="328">'.$name.'</td></tr><tr><td>Email : </td><td>'.$Email.'</td></tr></table>';

if (mail($to, $subject, $message, $headers))
$answer = "Thank you for contacting us";
else
$answer = "Error.. Cannot send the mail";
// mail sending code ends
echo $answer;

?>

The above code sends the mail to the mail id we specify. Also will populate the result message in the Facebook page.


FBML Source Code

<script><!--
function sendFormData()
{
// creating a new FBJS AJAX object
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;

// creating a handle to get response from the server
ajax.ondone = function(data)
{
document.getElementById('name').setValue('');
document.getElementById('email').setValue('');
new Dialog().showMessage('Confirmation', data);
}
// get the form values
var fields = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
ajax.post('http://www.domain-name.com/contact-facebook.php', fields);
return false;
}
//--></script>



<form method="post" action="http://www.domain-name.com/contact-facebook.php">
<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>
<input type="button" onclick="return sendFormData();" value="Submit">
<p id="ajaxMessage"></p>
</form>