持原孝介自社サイトのお問い合わせフォームをContact Form 7で作り直し、受信した内容を管理画面に残すFlamingoも入れました。
そのついでに、フォームを作ったときから気になっていた警告を片付けました。
コンタクトフォームの一覧に「設定エラー有り」と出ていて、中を開くとこう書いてあります。
安全でないメール設定が十分な防御策なく使われている。
最初はreCAPTCHAを入れるつもりでした。
ところがGoogleの案内ページを開くと、非推奨の表示が出ていました。
そこで、Cloudflareの「Turnstile」に切り替えました。
無料で、プラグインの追加もいりません。
同じ警告で手が止まっている方向けに、やった手順をそのまま残しておきます。
この警告が出る理由
原因は、送ってくれた人に自動返信メールを送る設定(Contact Form 7の「メール(2)」)です。
この設定は、フォームに入力されたメールアドレス宛にメールを送ります。
ロボット対策がないと、他人のメールアドレスを入れて送信するだけで、その人にサイトからメールが届いてしまいます。
機械で何百回も繰り返されると、自分のサイトが迷惑メールの送り元になります。
Contact Form 7は、この状態を警告しています。
直し方は2つあります。
1つは、自動返信をやめること。
もう1つは、ロボット対策(CAPTCHA)を入れることです。
問い合わせてくれた人に「受け付けました」のメールは届けたいので、今回はロボット対策を入れました。
reCAPTCHAではなくTurnstileにした理由
Contact Form 7のロボット対策といえばreCAPTCHA、と思っていました。
ただ、案内ページを開くと上に赤い帯が出ていて、ページ自体が非推奨になっています。
reCAPTCHAはGoogle Cloudの中のサービスへ移っていて、キーを発行するまでの手間が前より増えていました。
そこで、Contact Form 7のインテグレーション画面を見直すと、reCAPTCHAの隣にTurnstileが最初から並んでいました。
TurnstileはCloudflareのロボット対策です。
無料プランで回数の上限がなく、クレジットカードの登録もいりません。
ドメインやDNSをCloudflareへ移す必要もありません。
今のサーバーのまま、キーを2つ発行して貼るだけで使えます。
Turnstileの設定手順
Contact Form 7の側では、プラグインの追加は不要です。
Cloudflareでキーを発行し、WordPressに貼る。
基本はこの2つで、表示する場所を変えたいときだけ、フォームに1行足します。
1. CloudflareでTurnstileの画面を開く
Cloudflareに無料アカウントを作ってログインします。
Turnstileはトップ画面に出ていないので、最初は探しました。
左メニューの「Application security」を開いた中にあります。
左上の検索欄に「Turnstile」と打っても出てきます。
右上に2つボタンがあります。
押すのは白い「Add widget manually」です。
青い「Set up with Spin」は、AIにサイトのコードを書き換えさせて組み込む仕組みです。
WordPressではContact Form 7が組み込みを引き受けてくれるので、使いません。
2. ウィジェットを作る
入力するのは上の2か所だけです。
- Widget name: 自分で分かる名前(私は「JWW お問い合わせ」にしました)
- Hostnames: 自分のサイトのドメイン
- Widget Mode: 最初から選ばれている「Managed」のまま
- 一番下のスイッチ(Pre-clearance): オフのまま
ドメインは、打ったあとにEnterではなく、下に出てくる候補をクリックして追加します。
私はここで一度、入力したつもりで空欄のまま進みかけました。
欄の下が「1 out of 10」になっていれば追加できています。
確認できたら右下の「Create」を押します。
3. 2つのキーをコピーする
作成すると、右側に「Site key」と「Secret key」が表示されます。
欄をクリックするとコピーできます。
Secret keyは人に見せないキーです。
スクリーンショットを人に送るときは、写らないようにしてください。
キーはあとからCloudflareでまた確認できるので、この画面は閉じても大丈夫です。
4. Contact Form 7に貼って保存する
WordPressの管理画面で「お問い合わせ」から「インテグレーション」を開きます。
Turnstileの欄にある「インテグレーションのセットアップ」を押すと、キーの入力欄が出ます。
Site keyを「サイトキー」に、Secret keyを「シークレットキー」に貼って「変更を保存」を押します。
「Turnstile はこのサイト上で有効化されています」と出れば完了です。
5. フォームを1回保存し直す
ここで一つ、つまずきました。
キーを入れたあとも、フォーム一覧の「設定エラー有り」が消えなかったのです。
Contact Form 7は、フォームを保存したときに設定を点検し直します。
なので、フォームの編集画面を開いて、何も変えずに「保存」を押します。
これで警告が消えました。
6. 表示する場所を指定する
キーを貼っただけだと、Turnstileはフォームのいちばん上に入ります。
私のフォームでも「お問い合わせの種類」の上に出てしまい、入力する前にロボット確認が来る並びになっていました。
Contact Form 7は、フォームの中に [turnstile] と書くと、その場所にTurnstileを出してくれます。
書いていないときだけ、先頭に自動で入る仕組みです。
そこで「お問い合わせ」の「コンタクトフォーム」から対象のフォームを開き、プライバシーポリシーの同意欄のすぐ下に、次の1行を足しました。
<div style="display:flex;justify-content:center;">[turnstile]</div>
外側の div は、枠を真ん中に寄せるためのものです。
私のフォームは同意欄もボタンも中央寄せなので、Turnstileだけ左に寄ると浮いてしまいました。
左寄せのフォームなら、[turnstile] だけで大丈夫です。
私のフォームは、入力のあとに確認画面をはさむ作りです。
確認画面では入力欄が隠れるので、同意欄の下に置くと、Turnstileの枠だけが画面の上に浮いてしまいました。
そこで最終的には、確認内容の下、送信ボタンのすぐ上に置いています。
入力画面の見た目は同じで、確認画面でも「確認内容、ロボット確認、送信」の順に並びます。
書き足したら「保存」を押します。
この保存で、手順5の警告の点検も一緒に済みます。
フォームの見た目はこうなりました
お問い合わせページを開くと、プライバシーポリシーの同意欄と「入力内容を確認する」ボタンの間に、Cloudflareの「私はロボットではありません」の枠が出ています。
同意して、ロボット確認をして、送信に進む。
上から順に入力していくと、自然な流れで最後に確認が来る並びになりました。
まとめ
- 「安全でないメール設定」の警告は、自動返信がロボット対策なしで動いていることが原因
- reCAPTCHAは案内ページが非推奨になっていたので、無料のCloudflare Turnstileを使った
- Cloudflareでウィジェットを作り、2つのキーをContact Form 7のインテグレーション画面に貼る
- 警告が残っていたら、フォームを1回保存し直す
- 表示する場所は、フォームに [turnstile] と書いて指定する(書かないと先頭に入る)
管理画面の警告は、出ていても普段の動作には影響がないので、つい後回しにしがちです。
ただ、この警告は放っておくと自分のサイトから他人へメールが飛ぶ話なので、早めに片付けておくと安心です。
