在一頁式網頁內使用多個Google reCAPTCHA

參考連結

• How do I show multiple recaptchas on a single page?
• Displaying the widget

html

建立RecaptchaField1及RecaptchaField2兩個元素，準備用來呈現reCAPCHA

<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>

Js

將特定ID的Html元素定義為需要render成reCAPCHA

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

呼叫reCAPCHA的核心script，onload的方法需與上述建立的callback一致

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

鄉鄉鄉