現在のバージョンのRecaptcha(reCAPTCHA APIバージョン2.0)では、1つのページに複数のrecaptchaを含めることができます。
再キャプチャのクローンを作成したり、問題を回避したりする必要はありません。reaptchaに複数のdiv要素を配置し、recaptchaをそれらの中に明示的にレンダリングするだけです。
これはgoogle recaptcha apiで簡単です:https ://developers.google.com/recaptcha/docs/display#explicit_render
以下は、htmlコードの例です。
<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コードで、recaptchaのコールバック関数を定義する必要があります。
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
この後、recaptchaスクリプトのURLは次のようになります。
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
または、recaptchaフィールドにIDを指定する代わりに、クラス名を指定し、クラスセレクターでこれらの要素をループして.render()を呼び出すことができます。