Recaptcha'nın güncel sürümü ( reCAPTCHA API sürüm 2.0 ) ile, tek bir sayfada birden fazla recaptchas'a sahip olabilirsiniz.
Recaptcha'yı klonlamaya veya sorunu çözmeye çalışmanıza gerek yoktur. Tek yapmanız gereken, recaptchalar için birden fazla div öğesi koymalı ve recaptchaları içlerinde açıkça oluşturmalısınız.
Google recaptcha api ile bu çok kolaydır:
https://developers.google.com/recaptcha/docs/display#explicit_render
Örnek html kodu:
<form>
<h1>Form 1</h1>
<div><input type="text" name="field1" placeholder="field1"></div>
<div><input type="text" name="field2" placeholder="field2"></div>
<div id="RecaptchaField1"></div>
<div><input type="submit"></div>
</form>
<form>
<h1>Form 2</h1>
<div><input type="text" name="field3" placeholder="field3"></div>
<div><input type="text" name="field4" placeholder="field4"></div>
<div id="RecaptchaField2"></div>
<div><input type="submit"></div>
</form>
JavaScript kodunuzda, recaptcha için bir geri arama işlevi tanımlamanız gerekir:
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
Bundan sonra, recaptcha komut dosyası url'niz şöyle görünmelidir:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
Veya recaptcha alanlarınıza kimlik vermek yerine, bir sınıf adı verebilir ve bu öğeleri sınıf seçicinizle döngüye sokabilir ve .render () çağırabilirsiniz.