カスタム reCAPTCHA v2 キーの追加

利用可能なプラン: すべてのプラン

スパム対策として reCAPTCHA を使いたいが、ユーザーを Formspree がホストするページにリダイレクトさせたくない場合があります。フォームの設定ページでカスタム reCAPTCHA キーを指定すると、reCAPTCHA をフォームに直接埋め込むことができます。その場合、クライアント側のトークンを認証する際に reCAPTCHA サーバーとの通信にあなたの reCAPTCHA キーが使用されます。

まず、reCAPTCHA 管理コンソールにアクセスします。新しいキーを作成（または既存のキーを使用）し、v2 reCAPTCHA を選択します。ドメインを追加して Submit をクリックします。サイトキーとシークレットキーが表示されます。

Screen_Shot_2019-09-30_at_10.16.09_AM.png

次に、Formspree フォームの Settings タブにアクセスし、CAPTCHA が有効になっていることを確認します。「Adjust settings」をクリックし、CAPTCHA ソリューションとして「Custom reCAPTCHA」を選択して、提供されたフィールドにカスタムキーを貼り付けます。

recaptcha v2 guide.png

最後のステップは、reCAPTCHA ウィジェットをあなたのサイトに追加することです。標準的なフォーム設定では、次のように追加できます。

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{form_id}" method="POST">
      <input type="email" name="email" placeholder="email@example.com" />
      <div class="g-recaptcha" data-sitekey="your_site_key"></div> <!-- replace with your recaptcha SITE key not secret key -->
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

別の方法を使いたい場合は、Google デベロッパーページの reCAPTCHA に reCAPTCHA のさまざまな実装方法が詳しく説明されています。独自のフィールドを使用する場合、フォームは g-recaptcha-response（フィールドのデフォルト名）という名前のフィールドを探しますので、別の名前に変更しないでください。

reCAPTCHA フィールドを必須フィールドにしたい場合は、JavaScript と CSS を使用できます。以下の例では、HTML5 バリデーションを使用してフィールドを必須にします。

// javascript
window.onload = function() {
  var el = document.getElementById('g-recaptcha-response');
  if (el) {
    el.setAttribute('required', 'required');
  }
}

/* CSS */
#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -50px 0 0 0 !important;
  z-index: -999999;
  opacity: 0;
}