How to add multiple recaptcha on same page

When you create any website. You add lots of forms such as registration, login, contact us etc.
But you got unwanted data through this forms. This is known as spam.

CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content.

There are many types of captcha. Google is also providing a captcha named Recaptcha. This is one of the best captcha now days.

It's free and easily customization. You can get api and document from https://developers.google.com/recaptcha/ .  Here i am not providing any tutorial for this. I am assuming that you have already read above link tutorial.

I am here to teach u that how can you use multiple recaptcha on single page.
In general, there is no way to add multiple recaptcha. You can do this by some javascript tricks.

Follow these steps:

Step 1:
Generate Api for recaptcha from https://developers.google.com/recaptcha.
Step 2:
Add code before </head>

<script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins.min.js" charset="utf-8"></script>

 <script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins-adds.min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

<script type="text/javascript">
  var recapexist = false;$(document).ready(function() {  
// Create our reCaptcha as needed 

$('#contactform').find('*').focus(function(){  

if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#myrecap').animate({'height':'130px'},'fast'); 
} 
else if(recapexist == 'rate'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#rate-response').fadeOut('fast',function(){$(this).html("");}); $('#myraterecap').animate({'height':'1px'},'fast');  
$('#myrecap').animate({'height':'130px'},'fast'); } }); 


$('#rateform').find('*').focus(function(){  
if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#myraterecap').animate({'height':'130px'},'fast'); } 
else if(recapexist == 'contact'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :) Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#contact-response').fadeOut('fast',function(){$(this).html("");}); $('#myrecap').animate({'height':'1px'},'fast');  
$('#myraterecap').animate({'height':'130px'},'fast'); } }); });

</script>
Step 3:

Add following code where you want to add form

<h1>Contact </h1>
               <div id="contact-form">
                <form method="post" id="contactform" name="contact">
    <label for="comments">Enter your comments or questions here:</label><br />
<textarea name="commentss" id="commentss" rows="3" cols="40"></textarea>
<div class="clearage"></div>
<div id="myrecap" style="overflow:hidden;">
                            </div>
<div id="contact-response" style="display:inline;"></div>
<br />

                         
<input type="submit" name="submit" value="Submit" />
</form>
                    </div>

<h1>Rate</h1>

<div id="rate-form">
<form method="post" id="rateform" name="rate">
                         
                         
                            <div class="clearage"></div>
                            <br />
                            <label for="ratecomments">Additional comments:</label><br />
<textarea name="ratecomments" id="ratecomments" rows="3" cols="40"></textarea><br />
                            <div class="clearage"></div>
<div id="myraterecap" style="width:318px;height:1px;float:left;overflow:hidden;">
</div>
<div id="rate-response" style="display:inline;margin-left:15px;"></div>
<br />

<div class="submit"><input type="submit" name="submit" value="Submit" /></div>
</form>
                     
                    </div>

Step 4:

That's it. Run this program. You will see two forms such as contact and rate. When you fill contact form, a recaptcha will appear under contact form. When you try to fill rate form, a recaptcha appear under rate form.
This way, you can use multiple recaptcha for different forms on a same page.

                   

Read More