何も対策をしていないと、ホームページのお問い合わせフォームから英語だらけの営業メールや意味の分からないメッセージが毎日のように届きますよね…
実はその多くはプログラム(ボット)による自動送信です…
WordPressのContact Form 7でお問い合わせフォームを作っている場合、迷惑メールの対策の1つとしてCloudflareが無料で提供している「Turnstile」という仕組みを使う設定が用意されています。
この記事では、Contact Form 7にTurnstileを設定する手順を、アカウントの作成から順番に説明します。
お問い合わせフォームに毎日のように迷惑メールが届く…
お問い合わせフォームを作ったけど、迷惑メールが多く、本当のお問い合せを見落としてしまう…
あるある話です…
フォームを公開している以上、ある程度は避けられないものですが、ボットによる自動送信は仕組みで防げます！
対策サービスへの登録などは必要になりますが、頑張って設定しておきましょう！
Turnstileでできること
Turnstileは、フォームの送信者が人間かボットかを自動で見分けてくれる仕組みです。
設定するとフォームに小さなチェック欄が表示されるようになり、ボットからの送信をブロックしてくれます。
似た仕組みに、GoogleのreCAPTCHAがあります。「信号機の画像をすべて選んでください」というパズルを見たことがある方も多いと思います。
ただ、reCAPTCHAは2024年8月に無料で使える回数が月1万回までに引き下げられ、利用にはGoogle Cloudの契約も必要になりました…設定も以前に比べてとても難しくなりましたね…
こうした事情もあって、Contact Form 7の公式も現在はTurnstileの利用をすすめています。
Turnstileは無料で使えるのも嬉しいポイントですね！
設定の全体の流れ
先に、作業の全体像を見ておきます。
- Cloudflareのアカウントを作る
- CloudflareでTurnstileのウィジェットを作り、2つのキーを取得する
- Contact Form 7の設定画面にキーを貼り付ける
- フォームに表示するTurnstileのウィジェットの位置を調整する
- フォームの表示を確認して、テスト送信する
ちなみに、Contact Form 7でTurnstileが使えるのはContact Form 7 バージョン6.1以降になります。
Cloudflareのアカウント作成を含めても、30分ほど見ておけば足りるはずです。順番に進めていきましょう！
Cloudflareのアカウントを作る
Turnstileを使うにはCloudflareのアカウントが必要です。まずはCloudflareのアカウントを作成しましょう。
メールアドレスやGoogleアカウントなどを使って登録できます。お好きな方法で登録しましょう。
私は今回メールアドレスとパスワードを入力して登録しました。
認証のメールが届くので忘れずに認証しましょう。「Verify your email」ボタンをクリックすればOK。
次のような画面が表示されれば、一旦登録までは完了です！
画面が英語で分かりづらい！という場合は、右上の人物アイコンからLanguage → 日本語を選ぶと、画面を日本語にできます！
メニューや説明が日本語になりました。
Turnstileのウィジェットを作ってキーを取得する
Turnstile ウィジェットの追加
まずはTurnstileの設定画面を開きます。
左サイドバーの「保護と接続」 → 「アプリケーション セキュリティ」 → 「Turnstile」の位置にメニューがあります。
メニューが開けたら「ウィジェットを手動で追加」ボタンをクリックします。
設定する項目は次のとおりです。
- ウィジェット名: 自分が後から見てもわかりやすい名前をつけましょう。
- ホスト名: フォームを設置しているサイトのドメイン(例: example.com)を追加します。
- ウィジェットモード: 「管理」のままで問題ありません。
ウィジェット名の入力
まずはウィジェット名を入力します。
続いて「ホスト名の追加」をクリックしましょう。
ホスト名の追加
続いては「ホスト名管理」の項目からホスト名を追加します。
「ホスト名の追加」ボタンをクリックします。
ホスト名の追加画面が表示されるので、ドメインを入力します。
「https://」などは除いた、ドメイン名のみを入力します。
例えば、当サイトであれば、URLが「https://yosiakatsuki.net/」なのでドメインは「yosiakatsuki.net」になります。
少し下にスクロールして、選択されたホスト名にドメインが追加されたことを確認したら「保存」ボタンをクリックします。
ウィジェットの設定画面でホスト名管理に入力したドメインが追加されていればOKです！
ウィジェットモードは「管理」のまま
ウィジェットモードは「管理」が選択されていると思うのでそのままで。
検証済み訪問者の今後のセキュリティルールチャレンジをスキップする
「検証済み訪問者の今後のセキュリティルールチャレンジをスキップする」の設定も初期値のままでよいでしょう。
「サイトキー」と「シークレットキー」の作成
ここまでの入力ができたら「作成」ボタンをクリックします。
作成すると、「サイトキー」と「シークレットキー」という2つの文字列が表示されます。Contact Form 7の設定で使うので、両方ともコピーしておきます。
シークレットキーは、パスワードと同じように扱う情報です。人に見せたり、どこかに公開したりしないように注意してください。
一旦ここまででCloudflareでの操作は完了です！
Contact Form 7の設定画面でキーを設定する
WordPressの管理画面に戻り、左メニューの「お問い合わせ」から「インテグレーション」を開きます。
Turnstileの欄にある「インテグレーションのセットアップ」をクリックして設定画面を開きます。
先ほどコピーしたサイトキーとシークレットキーをそれぞれ貼り付けて保存します。
設定はこれで完了です。Contact Form 7で作ったすべてのフォームに、Turnstileのチェック欄が自動で入ります。
ただ、自動表示ではフォームの上部にウィジェットが表示されるので、位置を調整しましょう。
フォームに表示するTurnstileのウィジェットの位置を調整する
Turnstileウィジェットを任意の場所に表示したい場合、表示したい位置に[turnstile]タグを配置します。
設定ができたら表示を確認しましょう。フォーム上部のウィジェットが消え、タグを設置した部分に表示ができていればOKです。
お問い合わせフォームの多くは送信ボタンのすぐ手前に表示されていると思うので、送信ボタンのすぐ手前にタグを設置しておくとよいでしょう。
タグのカスタマイズ方法などは公式サイトに説明があります。
テスト送信も忘れずに
ウィジェットが表示できたら、必ず自分でテスト送信もしておきましょう。
ちゃんと「私はロボットではありません」の入力が認証されるか、メールがいつもどおり届くかも確認してください。
迷惑メール対策の設定が原因で、本物のお問い合わせまで届かなくなってしまうと本末転倒です…
メールが届くことを忘れずに確認しましょう！
迷惑メールは減らせるけどゼロになるとは限らない
「迷惑メール」の定義にもよるのですが…
Turnstileを設定しても、迷惑メールが完全にゼロになるとは限りません。
ボットによる自動送信の多くは防げますが、人が手作業で送ってくる営業メールまでは止められません…
それでも、もともと大量の迷惑メールが届いていたなら体感できるくらい減るはずです！
ちなみに、暁ではこの記事で紹介した機能の設定の支援やフォームのカスタマイズなども承っております。お困り事があればお問い合わせフォームからお気軽にご相談ください。