hCaptcha を使用する — Formspree Docs

hCaptcha のボット検出サービスを Formspree で使用して、フォームを保護できます。hCaptcha はプライバシー、アクセシビリティ、カスタマイズ性に重点を置いた Google reCAPTCHA の代替手段です。

まず、hCaptcha ダッシュボードにアクセスします。サイトを追加（または既存のサイトを使用）してドメインを追加します。エンタープライズ向けの高度な機能や、無料アカウントで利用できる機能もあります。必要に応じて設定して Save をクリックします。

作成後、利用可能なサイトのリストとサイト名の下に表示される Site key を確認できます。

Site key をコピーします。このキーは HTML フォームコードの設定に使用します。

次に、アカウント設定ページにアクセスして Account-level Secret をコピーします。このキーは Formspree のフォーム設定に使用します。

Site Key と Secret の両方を用意したら、Formspree フォームの設定タブにアクセスし、CAPTCHA が有効になっていることを確認します。

Adjust settings をクリックして Secret Key を貼り付けます。Save をクリックします。

最後のステップは、フォームコードに hCaptcha を追加することです。div コンポーネントに Site key を貼り付ける必要があります。標準的なフォーム設定では、次のように追加できます。

<html>
  <head>
    <title>hCaptcha Demo</title>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{your-form-id}" method="POST">
      <input type="text" name="email" placeholder="Email" />
      <div class="h-captcha" data-sitekey="{your-site-key}"></div>
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

また、AJAX を使ってフォームを送信することもできます。以下の例で、jQuery を使用して hCaptcha でフォームを送信する方法を確認してください。

<html>
  <head>
    <title>hCaptcha Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <form id="form" method="POST">
      <input type="email" name="email" placeholder="email@example.com" />
      <div class="h-captcha" data-sitekey="{your-site-key}"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <script type="text/javascript">
      $("form").submit(function(e){
      e.preventDefault();
      var hcaptchaVal = $('textarea[name=h-captcha-response]').val();

      $.ajax({
        url: 'https://formspree.io/f/{your-form-id}',
        type: "POST",
        dataType: "json",
        data: {"h-captcha-response": hcaptchaVal, "email": $("input[name='email']").val()},
        success: function(data) {
          console.log(data)
        }
      })
     });
    </script>
  </body>
</html>

ローカルで開発している場合、hCaptcha はローカルホスト（127.0.0.1）でホストされているアプリでは実行できないことに注意してください。これを回避するには、ホストエントリを設定するか、ngrok などの HTTP トンネリングサービスを使用する必要があります。