New Topic/Question
Wow! Where to begin?
Well, 1st off, you'll need to make certain that you have installed the fbml onto your facebook page or application. This is simply done by visiting Static FBML & clicking "add to my page" under the icon in the upper left. Once installed click edit & it's listed as FBML under your options.
Once you are editing your FBML code, there are two simple boxes. The 1st is "Box Title". This is the label text for the tab across the top. Keep is short as the text will be truncated if you try to enter too much. The 2nd box is where you input the fbml code.
The 1st chunk of code that we need is our Ajax script. We could just use standard PHP get or post, but then our viewers would possibly get confused or worried that something is happening that shouldn't. Ajax is the solution
<script><!--
function submitAjaxForm() {
// declare a new FBJS AJAX object
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) { document.getElementById('ajaxMessage').setInnerFBML(data);
}
document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');
var queryParams = { 'Comments' : document.getElementById('Comments').getValue(), 'name' : document.getElementById('name').getValue(), 'Organization' : document.getElementById('Organization').getValue(), 'email' : document.getElementById('email').getValue(), 'Telephone' : document.getElementById('Telephone').getValue() };
ajax.post('http://akroncdnr.com/ajaxemail.php', queryParams);
return false;
}
//--></script>
This is really quote simple. Each input is gathered individually with document.getElementById & sent to PHP $_POST array over Ajax. Rather than have a submit button, we're going to use Facebook's Javascript (FBJS) to call submitAjaxForm() on the button click. This will gather the input values, just like the $_POST array, & pass them to the url value provided in ajax.post.
Now we can just use simply html to display a quick set of input values :
<p><b><h2>Need a service? Get a quote!</h2></b></p> <p><b> Welcome to our FaceBook Quote Request Page!</b></p> <p> <b>Get a quote by email</b>:<br>Just fill out this form, & a customer support representative will quickly reply to your question & advice on an action along with a quoted price & time frame. </p><p> <table border=0> <tr><td> <form method="post" action="http://akroncdnr.com/ajaxemail.php"> <div class="fc-tbx"><label for="subject">Subject:</label><br /> <select name="subject" id="subject"> <option value="hardware">PC/Laptop hardware repair</option> <option value="software">Virus, Malware, or other software errors</option> <option value="windows">Boot, reboot, Blue Screen errors</option> <option value="dslite">Nintendo DS Lite</option> <option value="web">Web Design & Web Hosting</option> <option value="development">Software Development</option> <option value="other">Other...</option> </select> </div> <div class="fc-tbx"><label for="Comments">Comments and Questions:</label><br /> <textarea name="Comments" id="Comments" rows="11" cols="50" ></textarea></div> <div class="fc-tbx"><label for="Name">Name (Optional):</label><br /> <input type="text" size="41" maxlength="400" name="name" id="name" /></div> <div class="fc-tbx"><label for="Organization">Organization (Optional):</label><br /> <input type="text" size="41" maxlength="400" name="Organization" id="Organization" /></div> <div class="fc-tbx"><label for="email">E-mail address (Optional):</label><br /> <input type="text" size="41" maxlength="400" name="email" id="email" /></div> <div class="fc-tbx"><label for="Telephone">Telephone: (Optional)</label><br /> <input type="text" size="41" maxlength="400" name="Telephone" id="Telephone" /></div>
& each id is used as you would with the $_POST array, except over Ajax.
Now here is the part I was talking about earlier. The onclick for submitAjaxForm().
<button type="submit" onclick="return submitAjaxForm();">Submit</button><input type="reset" value="Clear" />
Simple enough
Then finish the form :
</div> </form></td>
& we are ready for collecting input. But wait, there's more!
We can supply a blank paragraph tag, & be certain to label it ajaxMessage. This way we can fill it upon return from Ajax.
<p id="ajaxMessage"></p> <p> <b>We look forward to hearing from you!</b> </p>
Now onto the server code. Lets use PHP on our server to gather & use the data.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$comments = $_POST['Comments'];
$orgz = $_POST['Organization'];
$phone = $_POST['Telephone'];
if(log_submission($name, $email, $comments, $orgz, $phone)==0) {
echo "Submission was sucesful!";
}
else {
echo "There was an error processing your request.<br>Please try again later.<br>";
}
?>
Gather the inputs from $_POST. Please be sure to scrub your data for nasty code
Then with everything gathered, validated, & prepared for usage, pass it to a function. I suggest using an email script, but really it's your call!
The two echo statements in the above code will be displayed in the paragraph labeled ajaxMessage. You now have a contact form, in it's own tab, on your facebook profile, that functions as a direct gateway to your own server for gathering, processing, & responding to the users input data.
To see this in action for your self, head over to my Facebook quote request page.
Enjoy!
MultiQuote
| 