静的サイトからContact Form 7に送信する：Turnstile対応込み

静的サイトへ問い合わせフォームを追加する際、送信後の管理まで新しく作るのは避けたいところです。そこで既存のWordPressとContact Form 7を送信先にしましたが、フロントと送信先のオリジンが分かれるため、CORSとスパム対策も一緒に考える必要がありました。

FormDataで送る

Contact Form 7で設定したフィールド名と送信キーを一致させます。

const endpoint = 'https://wp.example.com/wp-json/contact-form-7/v1/contact-forms/123/feedback';
const body = new FormData(form);
const response = await fetch(endpoint, { method: 'POST', body });
const result = await response.json();
if (!response.ok || result.status !== 'mail_sent') {
  throw new Error(result.message || '送信できませんでした');
}

Content-Typeはブラウザへ任せます。手動指定するとboundaryが不足します。

Turnstileをサーバー側で検証する

ウィジェットが発行したトークンを、WordPress側の連携が期待するフィールド名で同じFormDataへ含めます。トークンは送信直前に取得し、再送時はリセットします。シークレットキーを静的サイトへ埋め込まず、WordPress側で検証します。

オリジンが違えばCORS対応も必要です。*ではなく本番と検証環境を列挙し、Networkタブでプリフライトも確認します。Turnstileだけに頼らず、レート制限、ログ、メール失敗時の運用も決めておきます。

今回は以上です。