初心者きつね設置したお問合せフォームから大量のスパムメールが送られてくるんだけど、どうしたらいいの!?
今回は、お問合せフォームから送られてくるスパムメールを防いでくれる「Cloudflare Turnstile」の導入方法を解説していきます!
今回紹介するような認証システムを導入することは、スパムメールや迷惑メールが送られにくくし
セキュリティを高める点においても重要です。
ちなみに、今回はContact Form 7での実装を想定していますが
有料テーマであるSnow Monkey用の問合せフォーム作成プラグイン「Snow Monkey Forms」でも利用できますので、その方法も一緒に解説しちゃいます!



導入方法もそこまで難しくないから、この記事を読みながら頑張って導入してみてね!
Cloudflareの登録方法
Cloudflareを利用した認証システムを利用するには、Cloudflareのサイトでアカウントを作成する必要があります。
まずは、Cloudflareのサイトにアクセスをして右上の「ログイン」という部分からログインをしましょう。
アカウントをまだ作成していない人は、新規作成をします。
Coludflareのサイトはこちらから。
メールアドレスとパスワードを設定する従来のアカウント作成、ログイン方法以外にも
GoogleアカウントやGitHubアカウントによるAPIでも新規作成、ログインすることができます。
Turnstileでキーを作成する
Cloudflareに登録ができたら、認証システムを導入するためのキーを作成していきましょう。
左のメニューに「Turnstile」がありますので、そちらを選択します。


画面が切り替わったら「ウィジェットを追加」を選択します。


まずはウィジェット名を決めましょう。
思い浮かばない場合は、分かりやすくドメイン名を入れておいてもいいでしょう。


ウィジェット名が決まったら、「ホスト名の追加」をクリックしドメインを追加します(既に登録しているドメイン名から選択することもできます)。
自分のサイトのトップページが「http(s)://ドメイン名」だったら、ドメイン名の部分をそのまま入れましょう。


そして、右下の「作成」をクリックするとサイトキーとシークレットキーが発行されます(「ウィジェットモード」や「このサイトの事前クリアランスを選択しますか?」はデフォルトの状態でOK)。


サイトキーやシークレットキーが表示されたら、お問い合わせフォームに設定することで
認証システムを導入できます。
Contact Form 7での実装方法
Cloudflareのサイトで発行した2つのキーを利用して、Contact Form 7で実装したお問合せフォームに認証システムを追加していきます。
管理画面ダッシュボードにある「お問い合わせ」から、「インテグレーション」というサブメニューを選択します。


その中に「Turnstile」という項目がありますので「インテグレーションのセットアップ」をクリックします。


切り替わった画面で、2つのキーを入力し変更を保存します。
下の画像は、既にキーを設定した後の画面なので「キーを削除」と書かれていますが、サイトキーとシークレットキーを正しく入力して変更を保存すれば同じような画面になります。


これで認証システムの導入は完了です。
認証の位置を変更する方法
ここまでで、Cloudflare Turnstileの認証は導入できたと思いますが、多くのお問い合わせフォームの場合
認証部分は、送信ボタンのすぐ上に来ていると思います。
ということで、ここからはCloudflareの認証位置を変更する方法についてご紹介。
Cloudflareの認証位置を変更するには
[turnstile]
のショートタグを、お問合せフォームの中に導入します。
送信ボタンのすぐ上に認証を出したい場合は、送信ボタンフォームの上にショートタグを貼り付けるだけ。
Contact Form 7の場合は、こんな感じですね。


これで保存を押せば、送信ボタンのすぐ上に認証が来るようになります。


Snow Monkey Formsでの実装方法
Snow Monkey Formsとは、主にSnow Monkeyという有料テーマで使用されるお問い合わせフォームが形成できるプラグインのことです。
しかし、Snow Monkey以外のテーマでも相性さえ良ければ利用することができます。
Snow Monkey FormsでCloudflare Turnstileを導入するのも、Contact Form 7での実装とそこまで変わりません。
上に記した「Turnstileでキーを作成する」の見出しで記したのと同じ方法でCloudflareのキーを生成し、これをSnow Monkey Forms内に設定していきます。
管理画面ダッシュボード内の「Snow Monkey Forms」のサブメニューの中に「Cloudflare Turnstile」があるので、そちらをクリックします。


切り替わった画面で、サイトキーとシークレットキーを入力するだけです。


「変更を保存」をクリックすれば、実装完了です。
お問合せ画面に、下のようなCloudflareのマークが出ていたら成功です。


最後に
ということで、今回はCloudflare Turnstileを利用してお問い合わせフォームをスパムメールから守る方法についてご紹介しました。
この記事で紹介したTurnstileを設定していないと、スパムメールが大量に送られてくる可能性もあるので
忘れずに設定しておくことをお勧めします。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。







コメント