どうもユーキです。

お問い合わせフォームを作ってたときにgoogle recaptcha v3を設置することになり、意外と手間だったので、備忘録として設置方法を残しておきます。

設置方法

早速ファイルから記載します。

htmlファイル

<!-- head内のjquery.min.jsの後に設置する -->
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script><!-- 公式サイトだと?render=のあとはsitekeyになっているが上記の書き方にすることでコールバック関数を実行できます -->
<script>
// google reCAPTCHA onload
var clientId;
function onRecaptchaLoadCallback() {
  clientId = grecaptcha.render('inline-recaptcha', {
    'sitekey': 'XXXXXXXXXXXXXXXX', // 取得したサイトキーを入れる
    'badge': 'inline',
    'size': 'invisible'
  });

  grecaptcha.ready(function() {
    gRecaptcha();
  });
}

// google reCAPTCHA exec
function gRecaptcha() {
  grecaptcha.execute(clientId, {action: 'homepage'})
  .then(function(token) {
    // Verify the token on the server.
    var forms = document.getElementsByTagName( 'form' );

    for ( var i = 0; i < forms.length; i++ ) {
      var fields = forms[ i ].getElementsByTagName( 'input' );

      for ( var j = 0; j < fields.length; j++ ) {
        var field = fields[ j ];

        if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
          field.setAttribute( 'value', token );
          break;
        }
      }
    }
  });
}
</script>

<!-- 以下をform内に設置する -->
<div class="formRow">
  <div id="inline-recaptcha"></div>
  <input type="hidden" value="" name="g-recaptcha-response">
</div>

上記を設定するだけです。
サイトキーの取得は、こちらから取得できます。（googleアカウントが必要になります）
https://www.google.com/recaptcha/admin#list

ちなみに、非同期で扱いたい場合は、ajaxを実行するたびに、gRecaptcha()を実行するときちんと動作します。

【2018/2/2追記】
WordPress用ですが我がビジネスパートナーである株式会社ウィズ・プランニングさんと共同でプラグインを作成してみました！
解説動画も作ってくださってますので、簡単に実装できるかと思います。
ぜひともご利用くださいませ！

ご利用はこちらから