Here is the scenario-

You have a html form (say a comment form with fields name, password and comment). To prevent abuse, you want to add a recaptcha to this form. Now adding recaptcha directly in the form has an obvious disadvantage. People viewing the page could shy away from writing comments seeing the boring big re-capthcha to be filled in.

Solution- simple. Just have a form which does not have re-captcha. When the user enters the details for the comment and submits, a new popup should show up with the recaptcha and a submit button. This recaptcha should be used for validation.

Now how can we show recaptcha popup without any server side processing?

Well to tell in words, the solution is to show a dummy form in the html page and show the actual form with recaptcha in a javascript based popup box. The form in the popup box should contain hidden fields for all the fields present in the original comment form, so only the captcha is actually visible to the user.
Note: Google provides two versions of re-captcha. One using iframe and other using Ajax. You need to use the ajax one so that we can load it dynamically in a popup. (read googles documentation here)

e.g.
Comment form (the form in the html page)
<form tye="post" action="" name="commentform" onsubmit="FunctionThatShowsPopup();">
    <input type="text" name="name"  value="" />
    <input type="text" name="email"  value="" /> 
    <textarea name="comment"></textarea>
</form>

Popup Form (the form in the popup box)
<form tye="post" action="xxx.cgi" name="captchacommentform">
    <input type="hidden" name="name"  value="" />
    <input type="hidden" name="email"  value="" /> 
    <input type="hidden" name="comment"  value="" /> 
    <div id="captchahere"></div>  ← Here is where re-captcha image will be shown
</form>

Now "FunctionThatShowsPopup" has an importatnt part. It should -
1. show a javascript based popup with the popup form as content.

2. It should change values of the fields (name, email, comment) in the popup form with what the user had typed in the comment form. A simple javascript line would do this-
  document.captchacommentform.name.value=document.commentform.name.value; 

3. It should call the recaptcha javascript call that actually loads the captcha image. It looks like this-
Recaptcha.create("public key here",
    "captchahere",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
); 

That's it. now when user clicks on the submit form in the popup, the form along with captcha gets submitted to what ever your action script is(xxx.cgi in this case) which can do captcha validation and process the data.

Fine, the theory part looks good. But how to implement?

As a web developer the first question that would come to your mind is how I can implement a javascript popup that can load a form in a popup and then call a function to populate all values and then load the captcha. Well there are two options

1. Hard way- You can develop a popup box on your own

2. Easy way - You ca use a ready made popup box that has all these capabilities in built. Well we have implemented sucha a complete package using a modified lightweight tinybox popup box. The images below show a comment form that the user sees and the captcha popup that will come up after filling the form and submitting.

Click here to download the zipped implementation package.

Package contents-
1. tinybox.js script
2. sample.html file implementing the comment form
3. popup.html file which will be shown as the popup form 
4. functions.js which contains functions that validates the form, shows a popup window with captcha and populates all hidden fields in the popup window with user filled values.

NOTE: If you use ajax, you can easily substitute tinybox with the ajax based popup you are already using in your site. Just use the form in the article above and you will be all set.