広告

google reCAPTCHA v3 2分以上でも使えるようにする

この記事は約10分で読めます。

google reCAPTCHA v3でハマったのに、記事を書いていなかったような・・・

ということで、

google reCAPTCHA v3は2分以上経過してから送信できるようにするには、JavaScriptで送信ボタンをアレンジする必要があります。

<form id="form-1" name="form_1" method="post" action="">
  <input ~~~~~~~>など  フォームの内容
  <!-- JavaScriptでidを使って指定しているのでお忘れなく -->
  <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
  <input type="submit" name="btn_confirm" id="btn_confirm" value="送信確認画面へ">
  <button type="button" onclick="location.href='<?php echo esc_url( PAGE_URL ); ?> '">リセット</button>
</form>            

こんな感じのフォームにして、

~~~~の部分はgoogle reCAPTCHA v3を設定したときに出てくる個別のコード?です。

<script src="https://www.google.com/recaptcha/api.js?render=~~~~~"></script>
<script>
  // 送信ボタン指定.
  var btn_confirm = document.getElementById('btn_confirm');
  // btn_confirmをクリックしたら.
  btn_confirm.addEventListener( 'click', function(e) {
    //デフォルトの動作(送信)を停止.
    e.preventDefault();
    grecaptcha.ready(function() {
      grecaptcha.execute('~~~~~', {action: 'submit'}).then(function(token) {
        // recaotchaトークン挿入場所指定.
        var recaptchaResponse = document.getElementById('recaptchaResponse');
        // トークン挿入.
        recaptchaResponse.value = token;
        // submit()でフォームname="form_1"の内容を送信.
        document.form_1.submit();
        return false;
      });
    });
  });
</script>

はい。これで行くと思います。

応用編

処理の時間がかかるな・・・ってときは

<form id="yorozuya_form" name="yorozuya_form" method="post" action="">
  フォームの内容
<div id="yorozuya_form-submit">
  <button name="btn_submit" value="送信" id="subbtn" type="button" data-type="submit">申し込む</button>
</div>
</form>
<script>
// 送信ボタン指定.
var subbtn = document.getElementById('subbtn');
subbtn.addEventListener( 'click', function(e) {
  // デフォルトの動作(送信)を停止.
  e.preventDefault();
  // ボタンを非表示.
  subbtn.style.display ="none";
  // ボタンの上のDIVを指定.
  var formSubmit = document.getElementById( 'yorozuya_form-submit' );
  // 処理中の表示を作る.
  var addDiv = document.createElement( 'div' );
  addDiv.textContent = '処理中です。しばらくお待ちください。';
  formSubmit.appendChild(addDiv);
  // google reCAPTCHA v3のトークン挿入と送信処理.
  grecaptcha.ready(function() {
    grecaptcha.execute('~~~~', {action: 'submit'}).then(function(token) {
      // recaotchaトークン挿入場所指定.
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      // トークン挿入.
      recaptchaResponse.value = token;
      // フォーム送信.
      document.yorozuya_form.submit();
      return false;
    });
  });
});
</script>

JavaScriptでボタンを非表示、表示を切り替える方法も

<form id="yorozuya_form" name="yorozuya_form" method="post" action="">
  フォームの内容
  <button name="btn_submit" value="送信" id="subbtn" type="button" data-type="submit">申し込む</button>
<div id="yorozuya_form-submit" style="display: none;">処理中です。しばらくお待ちください。</div>
</form>
<script>
// 送信ボタン指定.
var subbtn = document.getElementById('subbtn');
var yorozuyaFormSubmit = document.getElementById('yorozuya_form-submit');
subbtn.addEventListener( 'click', function(e) {
  // デフォルトの動作(送信)を停止.
  e.preventDefault();
  // ボタンを非表示.
  subbtn.style.display ="none";
  // 処理中の表示をONに.
  yorozuyaFormSubmit.style.display ="block";
  // google reCAPTCHA v3のトークン挿入と送信処理.
  grecaptcha.ready(function() {
    grecaptcha.execute('~~~~', {action: 'submit'}).then(function(token) {
      // recaotchaトークン挿入場所指定.
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      // トークン挿入.
      recaptchaResponse.value = token;
      // フォーム送信.
      document.yorozuya_form.submit();
      return false;
    });
  });
});
</script>

こんな感じもありです。

すべて実装しているので、問題があったらお知らせいただけると嬉しいです。