While working today, I was having an issue finding information on how to add a lead capture form on our Facebook Page. Luckily I stumbled across this amazing post! Submitting a Contact Form via AJAX From Your Facebook Page
However, this solution didn’t completely work out of the box so I had to pull some knowledge in from working on previous PHP Forms.
The Facebook Code
Both of these pieces of code should be placed on your Static HTML Page/Tab
The Form
1 2 3 4 5 6 7 8 9 10 11 12 | <form action="http://YOURWEBSITE.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> |
The AJAX
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
Please note that either of these can be edited to add or remove form fields. You just need to check to make sure the queryParams are updated in the Ajax as they are queried by the “getElementById” function
The PHP
I don’t know any other scripting languages at the moment and don’t have a desire to learn others at this point so everything else was done in PHP. The default PHP script can be found at the link above. This modified script will allow you to send an email using the PHP Mail function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <?php // Set Default Timezone to Indianapolis for Submission Date/Time date_default_timezone_set('America/Indianapolis'); // Get User Content from the Form $name = stripslashes($_POST['name']); $email = stripslashes($_POST['email']); $phone = stripslashes($_POST['phone']); $address = stripslashes($_POST['address']); $products = stripslashes($_POST['product']); // Set Date for when Submission was Sent $date = date('F d, Y @ h:i a', time()); // Email headers and subject information $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //HTML Content Type $headers .= 'From: ' . $name . '<' . $email . '>'; //Who's it from? The person that filled out the form! $subject = 'YOUR EMAIL SUBJECT'; $recipient = 'You@YourDomain.com'; $msg = "<strong>Submission Info:</strong>" . "<br /><br />" . "<strong>Submitted: </strong>" . $date . "<br />" . "<strong>Name: </strong>" . $name . "<br />" . "<strong>Phone: </strong>" . $phone . "<br />" . "<strong>Email: </strong>" . $email . "<br />" . "<strong>Address: </strong>" . $address . "<br />" . "<strong>Product: </strong>" . $products ."<br />" . "<strong>How they Found Us: </strong>Facebook"; //Mail $msg to the recipient on the form if (mail($recipient, $subject, $msg, $headers)) { //Output a confirmation that the email has been sent echo "<p><strong>" . $name . " Your Entry has been submitted. </strong><p>"; } else //Error Message if problems arise { echo "<p>Message failed to send."; } ?> |
This is the code that I used. I plan on updating to counter an empty form. But haven’t had the time to do that as of yet. Let me know if you have any thoughts on how to improve a lead capture form on a Facebook page! Please note that I did NOT write this code and all credit should go to the original author George Huger and his post Submitting a Contact Form via AJAX From Your Facebook Page