TAGreCAPTCHA
Google reCAPTCHA V3の導入方法
最終更新日:
Google reCAPTCHA V3を問い合わせフォームに導入する方法をご紹介します。
Google reCAPTCHA V3のサイトキー・シークレットキーの取得
まず、reCAPTCHAのサイトキー・シークレットキーを取得するために下記からgoogleにドメインの登録をします。
取得方法はrecAPTCHA管理画面の「新規登録」からサイト情報を登録します。
登録後、サイトキーとシークレットキーが表示されますのでそれをメモします。
HTMLへreCAPTCHAを埋め込む
次に、HTMLのhead内もしくはfooterに
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script> <script> document.getElementById("フォームのID").addEventListener('submit', onSubmit); function onSubmit(e) { e.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('サイトキー', {action: 'submit'}).then(function(token) { var recaptchaToken = document.getElementById('recaptchaToken'); recaptchaToken.value = token; document.getElementById("フォームのID").submit(); }); }); } </script>
を追加します。
サイトキーとなっている箇所に取得したサイトキーを
フォームのIDの箇所に