SplinterNet is a new project that allows P2P microblogging over bluetooth to avoid government censorship. It's currently in beta and available only as an Android application. This server-less messaging is completely anonymous to prevent government retaliation. While you can send a SplinterNet message to your buddy via bluetooth, one can also post the message to the internet as well if one has access to internet. A post can contain text and image. Each screen has a "panic button" to quickly get out of the screen. Messages can be marked as important, too. Important posts are synced first. Website: https://github.com/megamattron/SplinterNet License: Open Source
Read More
Google Analytics is the web's most favorite tracking application used by millions. They are also rolling out real-time analytics. But if you're the admin of a site and you're testing several features of a site, you probably won't want to a track your visits. Here's how you can do that in Wordpress. Google Analytics' tracking code is inserted inside the <head> tag. So, you can restrict this insertion using the following codes in your theme's header.php file:
<?php
if(!current_user_can('edit_users')):
?>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_setDomainName', 'domain.tld']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<?php endif; ?>
This is pretty simple: it checks whether the logged in user is admin. If not, it inserts the tracking codes. You can find more about Roles and Permissions in Wordpress. Note: Do change UA-XXXXXX-X and domain.tld with correct values.

Labels: ,

Read More
SocialPort is a social-media Wordpress plugin that lets readers easy access to social-media bookmarking sites. It's just like bookmarking buttons — but what makes it stand out is that it adds a fixed port containing all the links. No matter how lengthy your page is, SocialPort sticks to the page. To make it unobtrusive, I have added an option for the readers to hide the port. This happens to be my first ever WP plugin! So, it's probably simpler in the way it works.

Installation

The ZIP file contains social-port directory. Extract the directory and upload the entire directory to your plugins directory in wordpress installation. (The plugins directory is inside wp-content/ directory) Now, in your WordPress Dashboard, go to Plugins. You'd find Social Port appearing among the list of plugins. Just activate it clicking the link.

Admin Section

Once Social-port is installed, you can access the admin section inside your plugins menu in WordPress Dashboard.
The admin section comes with a host of options to control how Social Port acts
1. SocialPort comes in three vibrant colors. You can choose from Orange, Black and Blue.
2. You can decide on what text you'd like to show beside the buttons.
3. You can link the RSS button to your Feedburner feed address. You can leave it blank if you want to link to the default feed address.
4. The toggler can be positioned either at Bottom Right or at Bottom Left.
5. You can let readers open a new tab/window if they click the links. Leave it unchecked to open links in the same window/tab.

Removing Links

Social Port comes with links to 7 popular social-sharing sites. If you want to remove buttons of any of them, you can do so by changing the socialport.tpl file. You can find it inside the tpls directory.
The buttons are stacked this way:
<!--Twitter Button Start-->
<div class='social-port-button twitter'>
	<a href="http://twitter.com/home/?status=[+title+]+[+permalink+]" title='Share this on Twitter' [+target_window+]>Share on Twitter</a>
</div>
<!-- Twitter Button End -->


<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

<!-- Facebook Button Start -->
<div class='social-port-button facebook'>
	<a href='http://facebook.com/share.php?u=[+permalink+]' title='Share with your friends on Facebook' [+target_window+]>Share on Facebook</a>
</div>
<!-- Facebook Button End -->

<!-- Digg Button Start -->
<div class='social-port-button digg'>
	<a href='http://digg.com/submit?phase=2&url=[+permalink+]&title=[+title+]' title='Share this on Digg' [+target_window+]>Share on Digg</a>
</div>
<!-- Digg Button End -->

<!-- Delicious Button Start -->
<div class='social-port-button delicious'>
	<a href='http://del.icio.us/post?url=[+permalink+]&title=[+title+]' title='Save this on Delicious' [+target_window+]>Share on Delicious</a>
</div>
<!-- Delicious Button End -->

<!-- Reddit Button Start -->
<div class='social-port-button reddit'>
	<a href='http://www.reddit.com/submit?url=[+permalink+]' title='Share this on Reddit' [+target_window+]>Share on Reddit</a>
</div>
<!-- Reddit Button End -->

<!-- LinkedIn Button Start -->
<div class='social-port-button linkedin'>
	<a href='http://www.linkedin.com/shareArticle?mini=true&url=[+permalink+]&title=[+title+]' title='Share this on Linkedin' [+target_window+]>Share on LinkedIn</a>
</div>
<!-- LinkedIn Button End -->

<!-- Feed Button Start -->
<div class='social-port-button feed'>
	<a href='[+feed_url+]' title='Grab the feed'>Grab the feed</a>
</div>
<!-- Feed Button End -->
So, for instance, if you'd like to remove the StumbleUpon button, you can remove the following lines:
<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

Sources, Credits and Support

The icons are from here. Please use the comment section for issues related to this plugin. While I cannot guarantee full support, I would try my best to help you. Cheers!
Read More
Today we are going to create AJAX search suggestions inside input text fields. This is different from AJAX Auto-suggest or AJAX Live Search. The idea is simple — we are going to show the user suggestive terms as (s)he types. When the user hits the enter key, the suggestion is sent as the query. This feature was there in Google's search-box before they launched Google Instant search. (I recently added this nice feature on PulsePro's Admin Panel.) Let's build it together!
Search Suggest Screenshot

What we need

All we need is PHP 5 and a simple database table to search. For the purpose of this tutorial, let us create table called world. You can find the SQL for the table here at MySQL's site or download the source files of the tutorial. (If you're super beginner with MySQL, here's how you can set this up.) Note that the database is pretty big so it may take some time to execute the SQL commands.
There are three tables inside the world database. We only need the city table for this tutorial. The structure is like the following:
We are going to let the users search the city names. So, the Name field is our hero!

CSS Files and Structure

By the time we end this tutorial, the directory structure would be like this:
In index.php file, we add the following lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Search Suggest in Textfield</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='searchSuggest.js'></script>
<link rel='stylesheet' href='style.css'></link>
</head>
<body>
<div id='wrapper'>
<form action="http://google.com/" method='get'>
	<div class="infoWrapper">
		<div class="infoTitle">Search Cities</div>
		<div class="infoContent">
			<input type="text" id="redText" disabled="disabled" autocomplete="off" value="" class='text long'/>
			<input type="text" autocomplete="off" id="search" value="" name="q" class='text long search'/>
		</div>
	</div>
	<div class="infoWrapper">
		<div class="infoTitle"> </div>
		<div class="infoContent">
			<input type="submit" value='Google Search' id='search_button' />
		</div>
	</div>
</form>
</div>
</body>
</html>
This is fairly simple file. The only thing that needs attention is the presence of a disabled input element. We are going to place this disabled input field behind the text input where the user actually types. Also note that we have turned off autocomplete. This is to prevent any unwanted text suggestions that the browser may show.
But how on earth could we possibly put the disabled text field behind active text input? Well, the following CSS (inside style.css) will do the magic.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-size: 14px;
line-height:1.3em;
text-align:center;
font-family:Arial, sans-serif;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}

/**
Generic Form styles
**/
.infoWrapper {
	clear:both;
	margin-bottom:10px;
}

.infoTitle {
	color:#808080;
	float:left;
	width:230px;
	text-align:right;
	margin-right:5px;
	line-height:29px;
}

.infoContent {
	padding-left:130px;
	text-align: left;
}

.text{
    border-color: #CCCCCC #C3C3C3 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    margin-right: 4px;
    padding: 5px;
}

.text.long {
	width:350px;
}

/**
Form Elements
**/
#redText, #search {
	background: none repeat scroll 0 0 transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}

#search_button {
	margin-top:10px;
}
The first few lines (up to line 23) are to reset browser specific styles. (It's a good practice to use these styles in almost all HTML files.) Then, there are some generic form styles to prettify our form. What needs attention is here:
#redText, #search {
	background: transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}
redText is the id of the disabled input and search is the id of active input field. We have positioned both absolutely. This makes one overlap on the other. Next, we set the z-index of disabled input less than the active input. This brings the active input to the front. The other property to notice is that we are forcing the user to type in lowercase (text-transform: lowercase). It's not a good practice but this makes things easier for us developers (at least for this tutorial).

Server Side Data Handling

Now, we are going to work with ajax.php.
<?php
//connect to mysql and select db
mysql_connect('YOUR_HOSTNAME', 'YOUR_USERNAME', 'YOUR_PASSWORD') or die("Cannot connect to database!");
mysql_select_db('world') or die("Cannot select database!");

$result = array();
$search_text = urldecode(filter_var(trim($_POST['q']))); // $_POST['q'] is the search string which user types. It is sent via ajax
$q = "SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'";
$r = mysql_query($q);
if(mysql_num_rows($r)>0){
	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];
}
echo json_encode($result);
?>
	
Here we first connect to MySQL and select the world database. (Make sure you change YOUR_HOSTNAME, YOUR_USERNAME and YOUR_PASSWORD with proper credentials.) Then we create an empty array $result. We also santize the search string with filter_var. Next we query the City table with:
SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'
This SQL statement finds the rows whose Name field starts with the search string. In case of several matches, we just need the first match. So we find the first match and set the suggestion with:
	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];
Finally, we encode the array as a JSON output.

JavaScript

Next we move to searchSuggest.js and put the following code inside it:
$(function(){
	$("#search").keyup(function(e){
		$this = $(this);
		$searchBtn = $('#search_button');
		search_text = $this.val();
		$('#redText').val('');
		if(search_text){
			$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});
			$.ajax({
				url: "ajax.php",
				type: "post",
				dataType: "json",
				data: "q="+encodeURIComponent($this.val()),
				error: function(){
					// pass
				},
				success: function(obj){
					$("#redText").css({"background-image":"none"});
					if('suggestion' in obj) {
						if(obj.suggestion!=null){
							$('#redText').val(obj.suggestion);
							if(e.keyCode === 39){ // right arrow key pressed
								$('#redText').val('');
								$this.val(obj.suggestion);
							} else if(e.keyCode === 13) { // enter pressed
								$("form").submit();
							}
						}
					}
				}
			});
		}
	});
	
	$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});
});
Lot of code. Let's break this down into smaller parts. First, when the user types into the text-field, we clear out the disabled text-field (#redText) where we are going to place the suggestions. Then, as the user types and as we make an ajax request, we show an animated loading image at the right side of the input field, with the following line:
$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});
Then, we make ajax request to ajax.php, which we already created in the last step. Note that we didn't do anything if we fail to make ajax call (the error property of ajax call). This is because we don't want to interrupt the user while typing. When we receive ajax response, we first hide the animated background. Then, we check if there is at all any suggestion sent via ajax (i.e. if there is any City name matching the typed characters). The following codes are important here:
if('suggestion' in obj) {
	if(obj.suggestion!=null){
		$('#redText').val(obj.suggestion);
		if(e.keyCode === 39){ // right arrow key pressed
			$('#redText').val('');
			$this.val(obj.suggestion);
		} else if(e.keyCode === 13) { // enter pressed
			$("form").submit();
		}
	}
}
If suggestion exists, we set the value of the disabled input text (redText) to the suggestion. Next, we go a bit further and do something more. If the user presses the right arrow key, we set the value of the active text field to the suggestion. Again, if the user presses Enter key, we submit the form.
So, what happens if user submits the form?
$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});
We first check if there is any suggestion. If there is, we set the value of the active text field to the suggestion and set the search query (q). If there is no suggestion, search query is the same as the text user typed in. Then, we take the user to the Google search page for the search query.
Of course, if your site is http://example.com and your search results page is http://example.com/search, the last step would be something like:
location.href = "http://example.com/search/?q="+q;
And that's all! Hope you enjoyed the tutorial. Don't forget to check out other tutorials and subscribe to the feed!
Read More
It's been almost a month since I released a premium version of PulseLite — the open source PHP AJAX Voting component. It has got plenty of features. The documentation lets you integrate this component with your existing web-site. If you are building a web-application (or has an existing one), PulsePro is the perfect choice to let your users interact with your application. What makes PulsePro stand out from other vote-components is its ability to let users cancel votes — just like Reddit, YouTube, Facebook Like, Google +1, StackOverflow among many other popular web-applications.
Here are some of the features PulsePro comes with:
  • Easy to install.
  • Secure and XSS-proof.
  • Five different styles to match your web-application.
  • Prevents multiple voting.
  • Cross-browser compliant.
  • Comes with an Admin Panel that lists top voted items and more.
  • Ban IP addresses.
  • Enable/Disable voting on certain items.
If you have a web-site or web-application, you may want to let your readers/users vote on items. Not only that, you may want to check how your posts/items are performing, which are the most popular ones, which are the least. The admin area that comes with this component is perfect for this purpose. If some items are performing bad, you know where to improve. In short, PulsePro lets you check the pulse of your application!

Labels: , , , , ,

Read More
Building on top of the AJAX Contact Form and modifying one of Wufoo's elegant forms available at the gallery, I made a more secure, easy-to-install AJAX Contact Form with more features. It's available for download and takes just a couple of minutes to configure and get it running. Perfect for your website — whether personal or professional.

Features

  • AJAX Form Validation
  • XSS-proof
  • Super easy to install. Just edit a configuration file and upload.
  • Open Source. Fully customisable.
  • HTML5 Features
  • Cross-browser compatible
  • No database required. PHP 5.2+

Installation

Download the zip file and unpack. Edit the config.php file. You'd need API keys from reCAPTCHA. Under My Sites, create a new site and check the field that says Enable this key on all domains (global key). Note the public and private keys. Edit the PRIV_KEY and PUB_KEY values in config.php. Also, edit the email-address and subject line. Upload the files to your server and it's ready! (Also, replace images/cflogo.png with your logo.)

Mail Format

When someone fills in the contact form and sends message using this form, you'd receive a mail with the following information:
  • Sender's Name
  • Sender's Email
  • The body of the message
  • IP Address of the sender
  • Time and Date when the message was sent

Troubleshooting

If you do not recieve mails, it's probably the server settings. Ask your server administrator.

Customizations

If you need any customization, you can mail me for a quote.

Labels: , , , , , ,

Read More

Today we are going to create a nifty contact form powered by AJAX and reCAPTCHA. reCAPTCHA, now acquired by Google, was a project by Carnegie Mellon University that aims to stop bots from spamming websites. reCAPTCHA serves more than 200 million captchas everyday. It is almost impossible that you have not been challenged to type those distorted wavy words.
Did you know? reCAPTCHA words are case-insensitive. In most cases, while typing the words, we find it hard to capitalize certain characters. Well, we can just get away without capitalizing. The words entered by humans are used to digitize books. The words are from scanned old books. You can learn more here.
Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.

Get The Keys

We would need API keys from reCAPTCHA to show captchas. You can sign in with your Google account at reCAPTCHA and get a pair of API keys after adding a domain. (It is not necessary to own a domain, just check the the field that says "Enable this key on all domains (global key)" and the keys will work on all domains.) The first key is a public key, served via javascript and the second one is a private key to handle server-side requests. Also, download the reCAPTCHA PHP library.

Layout

Once we are ready with the keys and the library, let's begin building the form. The form we are going to create will be simple and easy to navigate. Here is how the layout is made:

First, we create an index.php file and put the following lines of code inside it.
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Contact Form With reCaptcha</title>
<style type='text/css'> 
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}
 
#wrapper {
width:600px;
margin:0 auto;
text-align:left;
padding:6px;
}

.message {
 text-align:left;
 width:100%;
 padding:15px 22px;
 display:none;
}

.loader {
 background:url("images/ajax-loader.gif") no-repeat center left;
}

.success {
 background:url("images/success.png") no-repeat center left;
}

.error {
 background:url("images/error.png") no-repeat center left;
}

.infoWrapper {
 clear:both;
 margin-top:10px;
}

.infoTitle {
 color:#808080;
 float:left;
 width:110px;
 text-align:right;
}

.infoContent {
 padding-left:130px;
 text-align: left;
}

label {
 cursor:pointer;
}

.input-text {
 border:1px solid #808080;
}

.long {
 width:450px;
}

.tall {
 height:150px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div id='wrapper'>

<h4>Contact Us</h4>
<div class='message'>

</div>

<form name='contact' id='contact'>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='name'>Name</label>
  </div>
  <div class="infoContent">
   <input type="text" name='name' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='email'>Email</label>
  </div>
  <div class="infoContent">
   <input type="text" name='email' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="message">Message</label>
  </div>
  <div class="infoContent">
   <textarea name='message' id='note' class='input-text long tall'></textarea>
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="">Are you human?</label>
  </div>
  <div class="infoContent">
   <!-- reCAPTCHA code goes here -->
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle"></div>
  <div class="infoContent">
   <input type='submit' value='Send Message'/>
  </div>
 </div>
</form>
</div>
</body>
</html>
Now, that's a lot of code that needs to be explained.
  • The first few CSS styles inside the <style> tag are pretty self-explanatory. The message class is shown at the top of the form when it is submitted. The error, success, and loader classes are to identify the kind of message shown. We will add the classnames via jQuery.
  • Each section inside the form is wrapped inside infoWrapper class. The labels are the wrapped in infoTitle class and each input field in infoContent class. The other classes (input-text, long and tall) are to prettify the form-elements.
  • We have also added jQuery javascript library and a functions.js file (we would later create).
  • We have added an empty div with message class. The text will be filled in and determined via AJAX.
  • The form, as explained earlier, is simple and minimal in its approach.
  • Note that we have commented the section where we are going to put the reCAPTCHA code.

Integrate reCAPTCHA

Now that we have the form, it's time to integrate reCAPTCHA. We add the following lines of code at the top of the index.php file:
<?php
include_once("recaptchalib.php");
define("PUB_KEY", "YOUR PUBLIC KEY HERE");
?>
recaptchalib.php is the PHP library. Of course, you need to replace "YOUR PUBLIC KEY HERE" with your actual public key. Next, we add the following codes inside the form where the reCAPTCHA codes should be (the commented section, remember?)
<?php echo recaptcha_get_html(PUB_KEY); ?>
Now, if you reload the page, reCAPTCHA words should be there. Next we are going to handle the form response via ajax.

Server Side

We create an ajax.php file and inside it, we put the following lines of code:
<?php
require_once('recaptchalib.php');
define("PRIV_KEY", "YOUR PRIVATE KEY HERE");

$name = filter_var($_POST['name']);
$message = filter_var($_POST['message']);
$email = filter_var($_POST['email']);

if(in_array('', array($name, $message, $email))) {
//one (or more) of the required fields is empty
$result = "field_error";
} else {
 $resp = recaptcha_check_answer (PRIV_KEY, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
     //Captcha was entered incorrectly
  $result = "captcha_error";
   } else {
     //Captcha was entered correctly
     $result = "success";
     //You can enter your mail functions here. It's like:
     // mail("yourmail@domain.com", "Email Subject", $message);
 }
}

echo $result;
?>
 
Let's break it down.
  • We included the recaptchalib.php library and the private key.
  • We sanitize the form data with filter_var
  • We check if any of the form data is empty with in_array. If any of them is indeed empty, we set the value of $result variable to be field_error
  • If none of the fields are empty, we check the answer for the reCAPTCHA words with recaptcha_check_answer. This function is defined inside the recaptchalib.php library.
  • The return value of recaptcha_check_answer is a PHP object. The object has a $is_valid variable value which is true if the words are typed correctly. So, we check whether the response is valid or not. If it's not valid, we set $result to captcha_error, and if it's valid $result is success. (After this point, you can mail the message to your mail address or save it to a database, as per your requirement.)
  • And finally we output $result
So, ajax.php outputs any of the three values — (1) field_error (when one or more fields is/are empty), (2) captcha_error (when typed words don't match with the captcha) and (3) success (voila).

jQuery Functions

We now create functions.js file. And inside it we put the following lines of code:
$(function(){
 $("#contact").submit(function(){
  $(".message").removeClass("success").removeClass("error").addClass("loader").html("Sending message").fadeIn("slow");
  $.ajax({
   type: "POST",
   url: "ajax.php",
   data: $(this).serialize(),
   dataType: 'text',
   success: function(msg){
    switch(msg) {
     case "field_error": // one or more fields is/are empty
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please fill in all the required fields.");
      break;
     case "captcha_error": // captcha wasn't typed correctly
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please type the words correctly and try again!");
      break;
     case "success": // all good
      $(".message").removeClass("loader").addClass("success");
      $(".message").html("Your message has been sent. You'll soon hear from us!");
      break;
     default: // Hmm. The default case. You never know.
      alert("Something is wrong. Please try again.");
    }
   }
  });
  Recaptcha.reload();
  return false;
 });
});
When the form is submitted, the above javascript removes success and error classes from the message section and adds the loader class to show that the message is being sent. While this is being shown to the user, an AJAX call is made that sends the form data to our ajax.php file. The response from ajax.php is then filtered with a switch. In each cases, the loader class is removed from the message section and appropriate class is added alongwith message texts. And whatever the case is, we always reload the captcha with Recaptcha.reload(). This function is provided in the javascript served via recaptcha_get_html PHP function.
If you're working with reCAPTCHA (whether on this contact form or some commenting system), you can use Recaptcha.reload() to reload the captcha without reloading the form. Helpful for form validation.
(Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.)
And that's it! This is just the basics of how things work. So go ahead customize and let us know in the comments. :-)

Labels: , , ,

Read More