サイトのフォームから送る

サーバーを持たない静的サイトでも、ページに貼ったスクリプトから直接送れます。 この経路だけは受信URLがページのHTMLに出る＝誰でも見えます。 そのため、許可ドメインとスパム対策の2つが揃って初めて有効になります。

送り先

POST https://tsubamemail.com/forms/<トークン>
Content-Type: application/json

2つの準備

1. 許可ドメインを登録する

受信口の設定 →「接続方法」に、設置するサイトのURLを登録します。 ブラウザが送る Origin と突き合わせ、一致しないものは拒否します。1件も登録していないと、すべての送信が拒否されます。

ブラウザは Origin をページのスクリプトから書き換えられないため、 受信URLをコピーして他人のサイトに貼っても動きません。 サブドメインは別扱いなので、www 付きでも使うなら両方登録してください。

2. Turnstile を入れる（必須）

Cloudflare Turnstile のウィジェットをフォームに置きます。これが無いと送信できません。

許可ドメインの照合だけでは足りないためです。ブラウザ以外（コマンドラインなど）からは Origin を自由に付けられるので、それだけではボットを止められません。 1件受信するたびにメールの費用と月間の受信上限を消費するので、対策が無いと スパムで上限に達し、本物の問い合わせが届かなくなります。

設置するコード

フォームの name が、そのまま項目名になります（日本語も使えます）。 実際に貼るコードは受信口の設定 →「接続方法」に、あなたのトークン入りで表示されます。

<form id="tsubame-form">
  <input name="お名前" required>
  <input name="メールアドレス" type="email" required>
  <textarea name="本文" required></textarea>

  <!-- おとりの欄。人には見えないので、埋まっていれば自動送信とみなす -->
  <input name="_tsubame_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <!-- スパム対策（必須） -->
  <div class="cf-turnstile" data-sitekey="<サイトキー>"></div>

  <button type="submit">送信する</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
document.getElementById("tsubame-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target);
  const res = await fetch("https://tsubamemail.com/forms/<トークン>", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(Object.fromEntries(fd)),
  });
  const data = await res.json();
  alert(data.message);
});
</script>

制御用のフィールド

次の2つは問い合わせ内容としては扱いません（通知メールにも受信ログにも残りません）。

• cf-turnstile-response … Turnstile が自動で付けるトークン
• _tsubame_hp … おとりの欄。埋まっていれば自動送信とみなし、成功したように見せて破棄します

応答

message はそのまま訪問者に見せられる文言です。 設定の不備などの詳細は含めていません。

200 OK
{ "ok": true, "message": "送信しました。" }

CORS

content-type: application/json で送るためプリフライトが飛びます。OPTIONS には応答します。CORS ヘッダは許可済みのオリジンにだけ返します。

使わないほうがよい場合

サーバーを持っているならAPIのほうが確実です。 この経路は「サーバーが無い」ことを前提にした作りで、公開された受信URLを 許可ドメインと Turnstile で守る構成になっています。