【初心者でも迷わない】Contact Form 7の新スパム対策!Cloudflare Turnstile の設置方法

【初心者でも迷わない】Contact Form 7の新スパム対策!Cloudflare Turnstile の設置方法
スポンサーリンク

なぜ今、reCAPTCHAではなく「Turnstile」なのか?

これまでスパム対策といえば、Googleの「reCAPTCHA(リキャプチャ)」が定番でした。しかし現在、Googleはすべてのユーザーを企業向けの有料プラン(reCAPTCHA Enterprise)へ移行させる計画を進めており、将来的に無料枠を超えると課金されるリスクが生まれています。

そのため、Contact Form 7の公式でも、Googleの代わりにCloudflare(クラウドフレア)が提供する完全無料のセキュリティ機能「Turnstile(ターンスタイル)」の利用を強く推奨しています。

Turnstileの最大のメリットは、サイト訪問者が「私はロボットではありません」というチェックボックスをクリックしたり、「信号機の画像」を何度も選ばされたりする煩わしさが一切ないことです。裏側で自動的に安全性を確認してくれるため、サイトの使いやすさを保ったまま、スマートなスパム対策が完了します。

今回は、プラグイン「Simple CAPTCHA with Cloudflare Turnstile」を使って、あなたのお問い合わせフォームにこの最新のセキュリティを組み込む手順を解説します。

ステップ1:Cloudflareで「サイトキー」を取得する手順

Turnstileをサイトに導入するためには、まず提供元であるCloudflare(クラウドフレア)の公式サイトで、あなた専用の「合言葉(2つのキー)」を発行してもらう必要があります。

「英語のサイトで難しそう……」と思うかもしれませんが、手順通りに進めていけば大丈夫です!

1. Cloudflareのアカウントを作成する

まずは、 Cloudflareの公式サイト へアクセスします。

画面中央にある「Start building for free」をクリックしてください。
Cloudflare公式サイトの「Start building for free」ボタン

メールアドレスとパスワードを入力する画面になりますので、普段お使いの情報を入力してアカウントを作成します。(すでにアカウントをお持ちの方は「ログイン」で進んでくださいね。)
Cloudflare のサインアップ画面

2. Turnstileの設定画面を開く

ログインが完了すると、管理画面(ダッシュボード)が表示されます。

まずは、画面の左上(アカウント名の下)にある 「Account home」(家のアイコン)が選択されていることを確認してくださいね。

次に、左側のメニューを少し下にスクロールしていくと、「Protect & connect」というグループの中にある 「Application security」 をクリックしてください。
Cloudflare の「Application security」内の「Turnstile」

すると、さらにその中に 「Turnstile」 というメニューが現れますので、そこをクリックしましょう!

3. ウィジェットを手動で追加する

Turnstileのメニューを開くと、画面に大きく「Set up with Spin」という青いボタンが表示されます。しかし、この青いボタンは絶対にクリックしないでくださいね!

これはAIを使ってプログラムを自動で書き換えるエンジニア向けの機能なので、今回は必要ありません。私たちはWordPressのプラグインを使いますので、左隣にある白いボタン「Add widget manually(手動でウィジェットを追加)」をクリックして進みましょう!

Cloudflare の「Add widget manually」ボタン

4. あなたのブログ情報を登録する(英語画面の入力方法)

手動追加のボタンをクリックすると、英語の登録画面(Add Widget)に切り替わります。英語ばかりで難しく見えるかもしれませんが、実際に入力・確認する場所は以下の4箇所だけですので、上から順番に一緒に進めていきましょう!

  • 1Widget name(ウィジェット名):あなたが後から管理しやすい名前を自由に入力します(例:まるっと。Creative)。自分にしか見えない名前なので、日本語で入力して大丈夫ですよ。
  • 2Hostnames(ホスト名・ドメイン):お問い合わせフォームを設置したいブログのURL(独自ドメイン)を、入力します(例:martto.net)。
    ドメインの文字を打ち込むと、入力欄のすぐ下に「Add “あなたのドメイン” as a custom hostname」という文字が現れますので、必ずそこをマウスでクリックして選択するかキーボードのEnterキーを押して確定してください。枠内にドメインがタグのような形で登録されればバッチリです!
    Cloudflare の「Add Widget」画面
  • ✅Widget Mode(ウィジェットモード):標準で一番上の「Managed(マネージド)」にチェックが入っています。これが「基本は自動でチェックを済ませ、怪しい時だけクリックを求める」という一番堅実なおすすめのモードですので、このまま変更しないでOKです。
  • ✅Skip future security rule challenges…:これは、一度安全だと確認できた訪問客に対して、次回からのチェックを30分間スキップしてあげるかどうかの設定です。初期状態の「オフ(グレーの状態)」のままで問題ありません
    Cloudflare の「Widget Mode」画面

すべての入力と確認が終わりましたら、画面の右下にある青い「Create(作成)」ボタンをクリックしてくださいね。

ワンポイントアドバイス
ドメインを登録すると、下に「1 out of 10(10個中1個設定済み)」という文字が表示されます。これは、1つの設定(合言葉)を最大10個の異なるドメインで使い回せる便利な仕組みです。 もし、あなたが「martto.net/en/」のように、サブディレクトリで複数のブログを分けている場合は、最初のドメイン1個だけで配下のブログも丸ごと自動で守られるので、新しく追加する必要はありません!そのまま同じキーを各ブログのプラグインに貼り付ければOKです。 逆に、「en.martto.net」のように、URLの先頭に文字がつくサブドメイン形式のサイトを新しく守りたいときは、ここにそのサブドメインを追加で登録して、キーを使い回してくださいね。

5. 発行された「2つのキー」をコピーして控える

私たちが使う大切な「合言葉」は、画面の右側にある「Integrate the widget yourself」という枠の中に表示されています。以下の2つの文字列を、それぞれクリックしてコピーしましょう。

  • ▶▶Site key(サイトキー):入力欄(0x4AAAAAA…)のあたりをマウスでカチッとクリックすると、自動的にクリップボードにコピーされます。
  • ▶▶Secret key(シークレットキー):こちらも同様に、入力欄(0x4AAAAAA…)のあたりをクリックすると自動でクリップボードにコピーされます。

Cloudflare の「Site key」と「Secret key」のコピー画面

メモ※下に青い文字で「Note: you will be able to view your keys again later.(これらのキーは後からでも確認できます)」と書かれている通り、万が一画面を閉じてしまっても後からいつでも見られますので、安心してください。

この2つのキーをコピーできたら、Cloudflare側での作業はすべて完了です!画面はこのまま開いておくか、メモ帳などに2つのキーを貼り付けて保管し、次のWordPress側の設定に進みましょう!

ステップ2:Simple CAPTCHA with Cloudflare Turnstile の準備

Cloudflare側で無事に2つのキー(合言葉)がゲットできたら、次はWordPress側でそれを受け取るための専用プラグインを準備していきましょう!

使用するのは「Simple CAPTCHA with Cloudflare Turnstile」という、設定がとてもシンプルで使いやすい軽量なプラグインです。

1. プラグインのインストールと有効化

まずは、WordPressの管理画面(ダッシュボード)の左メニューから、「プラグイン」➔「新規追加」をクリックします。画面の右上にある検索窓に、「Simple CAPTCHA with Cloudflare Turnstile」と入力してください。目的のプラグインが表示されたら、右上にある「今すぐインストール」ボタンをクリックします。インストールが完了したら「有効化」します。

Simple CAPTCHA with Cloudflare Turnstile プラグインのインストール画面

ステップ3:プラグインへのキー設定とContact Form 7との連動

プラグインの有効化ができたら、いよいよ最後の仕上げです!ステップ1で取得したCloudflareの「2つのキー」をWordPressに登録して、お問い合わせフォームとしっかり連動させていきましょう。

1. プラグインの設定画面を開く

プラグインを新規インストール ➔ 有効化した直後であればすでに設定画面が開いています

WordPressの管理画面の左メニューにある「設定」➔「Cloudflare Turnstile」をクリックして、設定画面を開きます。

2. 2つのキーを貼り付ける

画面が開くと、キーを入力する欄が用意されています。ここに、ステップ1でCloudflareからコピーしておいた「合言葉」をそれぞれ正確に貼り付けます。

  • ▶▶サイトキー の欄 ➔ Cloudflareの「Site key」を貼り付けます。
  • ▶▶シークレットキー の欄 ➔ Cloudflareの「Secret key」を貼り付けます。
    Simple CAPTCHA with Cloudflare Turnstile プラグインのAPIキーの設定画面

3. Contact Form 7との連動にチェックを入れる

キーが貼り付けられたら、少し下にスクロールして「フォームで Turnstile を有効化する」の項目を確認しましょう。

様々なプラグインの名前が並んでいますが、下段にある「Contact Form 7」のチェックボックスに必ずチェックを入れてください。
Simple CAPTCHA with Cloudflare Turnstile プラグインの「Contact Form 7」との連携画面

このチェックを1ついれるだけで、Contact Form 7で作ったすべてのお問い合わせフォームに、Turnstileの最新セキュリティが自動的に組み込まれるようになります!

最後に、画面最下部にある「変更を保存」ボタンを忘れずにクリックしてくださいね。

4. 実際の画面で表示確認(動作確認)をする

設定がすべて保存できたら、あなたのサイトの「お問い合わせ」ページを実際に開いて確認してみましょう!

送信ボタンのすぐ上に、 Cloudflareのロゴマークと一緒にチェックが入った「成功しました!」のメッセージが表示されていれば、無事に連動が成功している証拠です!
お問い合わせ画面にCloudflareの設置が成功している例

まとめ:セキュリティを味方につけて安心してサイトを運営しよう

お疲れ様でした!これでContact Form 7への最新スパム対策「Cloudflare Turnstile」の導入はすべて完了です。

Googleの有料化リスク(reCAPTCHA Enterpriseへの移行)に怯えることなく、完全無料で最高峰のセキュリティを手に入れられたのは、これからのサイト運営においてとても大きな安心材料ですね。

せっかく作った大切なお問い合わせ窓口です。スパムメールに悩まされることなく、未来のお客様や読者様との素敵なコミュニケーションの場として、ぜひ安心して活用していってくださいね!

送信中です

×

※コメントは最大500文字、1回まで送信できます

送信中です送信しました!

コメント Leave a Comment

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