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>

how to disable mouse over of a youtube video ?

If we are embedding youtube videos in our webpage, usually we can play/pause the videos. Even we will redirect to youtube video page. Normally we can’t change the properties of play/pause functionality on mouse over. But we can disable the area of the video by using css .

First embed the youtube video in our page.

<embed src="http://www.youtube.com/v/R55e-uHQna0&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>

After that create a div with absolute position similar as the height and width of the video.
Set a transparent background for that div.

<style type="text/css">
#apDiv1 {
position:absolute;
width:425px;
height:350px;
background:url(transparent.png);}
</style>
<div id="apDiv1"></div>

So no event will work on the flash video file. This will be applicable for all flash videos.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable mouse over of a youtube video</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:425px;
height:350px;
background:url(transparent.png);}
</style>
</head>
<body>
<div id="apDiv1"></div>
<embed src="http://www.youtube.com/v/R55e-uHQna0&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</body>
</html>

Hidden form field to prevent spam

Most of the website has a contact form to send emails to webmasters. And most of these forms are targeted by spam bots. They automatically fill the data’s in the form elements and submit these data’s and as a result our mail box will full of spam emails.

In order to avoid this spam emails we can use Captcha . A Captcha is an image that contains a verification code. It may be a text or a number, or a combination of both
The user must enter the verification code to prove that the entry is not a spam. We are checking the verification code in the server side. But now a day’s spam bots have the ability of character recognition and probably they can break the Captcha. So we need to increase the complexity of Captcha verification code. But it will very difficult for users to read the verification code.

Hidden Form Field

This is one simple way to prevent the spam data’s. This is also knows as Invisible Captcha. Just add an extra hidden field in the form. Using css hide the visibility of the text box. Noramlly humans can't see the hidden form elements and they wont fill the datas. So the this field remains empty.But spam bots are fill all form elements. So in the server side we can check the hidden filed value , and can check whether it’s a spam or not.

Example :

<label for="email">Email:</label><input type="text" name="txtemail" value="" />
<input class="confirmation-field" type="text" name="txtCaptcha" value="" />
<style>
.confirmation-field { display: none; }
</style>