Contact Form 7のCloudflare Turnstile設定で手こずった話と解決方法

ブログ
2026/6/30

はじめに

突然ですが、WordPressでブログを運営しているとき「お問い合わせフォームを作りたい！」と思ったことはありませんか？

しかし、いざ設置して諸々の設定をした後にテストしてみると…

「メッセージの送受信ができない！」

実は、これは僕が約1年前に大苦戦した現象です。当時は「メッセージが届かない！」と焦り、かなり遠回りをしました。

今回は同じようなトラブルに見舞われた方向けに、当時の僕が行った解決方法をご紹介します！
あれから約1年、僕のブログでは特に問題なく使えているのでよろしければ参考にしていただけると幸いです！

発生した問題

フォームの送信ボタンを押すと、送信が失敗したときのメッセージが表示される。

僕の環境

  • サーバー：ConoHa WING
  • ブログソフト：WordPress
  • フォーム作成Plugin：Contact Form 7
    • 外部 API とのインテグレーション：Cloudflare Turnstile
  • 送信元アドレス (From)： 管理者用メールアドレス（ConoHaメール）
  • 宛先アドレス (To)： 受信者のメールアドレス（テスト用）

想定される原因：キーの不一致

セキュリティ対策の為にContact Form 7の外部 API とのインテグレーションから設定したTurnstileのAPIキー設定が原因でした。

プラグイン側に設定したTurnstileのサイトキーとシークレットキーが、Cloudflare側で発行されたものと不一致を起こしているのが原因だと考えています。

実際、外部 API とのインテグレーションからTurnstileの設定を、一度削除すると無事に送信できるようになりました。

解決方法

一言で言えば「Contact Form 7の外部 API とのインテグレーション機能を使わない」。これに尽きます。

僕の環境ではなぜか何度Cloudflareと行き来して設定し直してみても解決しなかったので、内蔵の機能は使わないことにしました。

ただ、これだとセキュリティ面（Bot対策）に不安が残ります。Turnstileをはじめとした機能を使わないということは、外部からのスパム攻撃に対策ができずフォームが脆弱になってしまうからです。

そこで、セキュリティ対策をしつつ問題を解決するために、『Simple CAPTCHA with Cloudflare Turnstile』というプラグインを導入しました！

そもそも、今回なぜCloudflare Turnstileを利用するのかというと「無料で使えるから！」これに尽きます。

実は当初、GoogleのreCAPTCHAを使用する予定でした。しかし、月間最大 10,000 件までという上限が出来てしまったので無料で使えて信頼性も高いTurnstileを利用することにしました！

また、以前から個人的に「Cloudflareを使ってみたい！」と思っていたことも、今回導入を決めた大きな理由の一つです。

本記事で紹介しているプラグイン（Simple CAPTCHA with Cloudflare Turnstile）は、Cloudflare Turnstile専用のものです。

ここで解説している設定方法や画面の仕様は、2026年6月28日時点のものです。画面構成や手順は今後のアップデートにより、変更される可能性があります。

Simple CAPTCHA with Cloudflare Turnstileの導入と設定

ステップ1：Simple CAPTCHA with Cloudflare Turnstileの導入

ステップ2：Cloudflare Turnstileウィジェットの設定

  • PluginリストからSimple CAPTCHA with Cloudflare Turnstileの項目にある『設定』をクリック
  • 設定ページ中央にある『サイトキーとシークレットキーはここから入手できます』横のリンクからCloudflareにログイン
  • Turnstile ウィジェットのページから『ウィジェットを手動で追加』をクリック
  • ウィジェットを編集のページから以下の項目を設定
    • ウィジェット名：任意のわかりやすい名前
    • ホスト名管理：検索窓にブログのURLを入力して『ホスト名の追加』をクリック
    • ウィジェットモード：『管理』を選択
  • ページ下部の『作成』をクリック
  • 生成されたウィジェットキーの項目にある『サイトキー』と『シークレットキー』をコピー

ステップ3：Simple CAPTCHA with Cloudflare Turnstileの設定

  1. Simple CAPTCHA Alternative with Cloudflare Turnstileの設定ページに戻って『APIキーの設定：』の項目にある『サイトキー』『シークレットキー』にステップ2の⑥でコピーしたものをペースト
  2. 『一般設定：』の項目にある『送信ボタンを無効化』を有効化
  3. 『フォームで Turnstile を有効化する：』の項目から『デフォルトのWordPressフォーム』にある『ログイン、登録、パスワードリセット、コメント』の4つを有効化
  4. ③と同じ項目から『Contact Form 7』にある『すべてのCF7のフォームで有効化』を有効化
  5. 最後にページ下部の『変更を保存』をクリック
  6. 最後にContact Form 7で作成したページを確認してCloudflare Turnstileが表示されていたら成功！！
各項目の画像はここをクリック！
（リストに画像が入れられないので各項目の画像を見たい場合はこちらを押してご覧ください）
画像出典：Cloudflare Turnstile ウィジェットを追加の設定画面
画像出典：Simple CAPTCHA Alternative with Cloudflare Turnstileの設定画面

さいごに

僕の環境ではこれでなんとかなりましたが、皆さんの環境ではいかがでしょうか？

最初は僕自身のフォームの作り方が原因だと思っていたら、まさかの良かれと思って導入したものが原因だったのは驚きでした！想定外の場所が原因なのはあるあるですよね（笑）

途中、原因が分からず、WordPressを使ったお問い合わせフォームの作成は諦めてGoogleフォームを埋め込もうかと思いましたが、諦めずに粘ってよかったです。当時は、すぐ終わると思っていた作業がまさかの数日がかりになってしまったのが痛かったですが、「結果良ければヨシ！」です！

本記事が、同じようなエラーに悩む皆さんのお役に少しでも立てば幸いです。

最後までお読み頂き、ありがとうございました！
次は何をいじくり回しましょうか？お楽しみに！

コメント

タイトルとURLをコピーしました