Cloudflare Turnstileを利用してお問い合わせフォームをスパムメールから守る方法

今回は、お問合せフォームから送られてくるスパムメールを防いでくれる「Cloudflare Turnstile」の導入方法を解説していきます！

今回紹介するような認証システムを導入することは、スパムメールや迷惑メールが送られにくくし

セキュリティを高める点においても重要です。

ちなみに、今回はContact Form 7での実装を想定していますが

有料テーマであるSnow Monkey用の問合せフォーム作成プラグイン「Snow Monkey Forms」でも利用できますので、その方法も一緒に解説しちゃいます！

Cloudflareの登録方法

Cloudflareを利用した認証システムを利用するには、Cloudflareのサイトでアカウントを作成する必要があります。

まずは、Cloudflareのサイトにアクセスをして右上の「ログイン」という部分からログインをしましょう。

アカウントをまだ作成していない人は、新規作成をします。

Coludflareのサイトはこちらから。

メールアドレスとパスワードを設定する従来のアカウント作成、ログイン方法以外にも

GoogleアカウントやGitHubアカウントによるAPIでも新規作成、ログインすることができます。

Turnstileでキーを作成する

Cloudflareに登録ができたら、認証システムを導入するためのキーを作成していきましょう。

左のメニューから、「Turnstile」を選択。

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

まずはウィジェット名を決めましょう。

思い浮かばない場合は、分かりやすくドメイン名を入れておいてもいいでしょう。

ウィジェット名が決まったら、「ホスト名の追加」をクリックしドメインを追加します（既に登録しているドメイン名から選択することもできます）。

自分のサイトのトップページが「http(s)://ドメイン名」だったら、ドメイン名の部分をそのまま入れましょう。

そして、右下の「作成」をクリックすると

サイトキーとシークレットキーが発行されます。

Contact Form 7での実装

Cloudflareのサイトで発行した2つのキーを利用して、Contact Form 7で実装したお問合せフォームに認証システムを追加していきます。

管理画面の「お問い合わせ」から「インテグレーション」を選択。

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

切り替わった画面で、2つのキーを入力し変更を保存します（下の画像は、既にキーを設定した後の画面です）。

これで認証システムを導入できたと思います。

認証の位置を変更する方法

ここまでで、Cloudflare Turnstileの認証は導入できたと思いますが、多くのお問い合わせフォームの場合

認証部分は、送信ボタンのすぐ上に来ていると思います。

ということで、ここからはCloudflareの認証位置を変更する方法についてご紹介。

Cloudflareの認証位置を変更するには

[turnstile]

のショートタグを、お問合せフォームの中に導入します。

送信ボタンのすぐ上に認証を出したい場合は、送信ボタンフォームの上にショートタグを貼り付けるだけ。

Contact Form 7の場合は、こんな感じですね。

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

Snow Monkey Formsでの実装

Snow Monkey FormsでCloudflare Turnstileを導入するのも、Contact Form 7での実装とそこまで変わりません。

Cloudflareでのキーの生成方法は、上に記した方法と同じです。

これをSnow Monkey Forms内に設定していきます。

Snow Monkey Formsのサブメニューの中に「Cloudflare Turnstile」があるので、そちらをクリック。

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

認証システムを送信ボタンのすぐ上に置きたかったら、ウィジェットの位置を「フォームの後」に設定してください。

「変更を保存」をクリックすれば、実装完了です。

お問合せ画面に、下のようなCloudflareのマークが出ていたら成功です。

最後に

ということで、今回はCloudflare Turnstileを利用してお問い合わせフォームをスパムメールから守る方法についてご紹介しました。

この記事で紹介したTurnstileを設定していないと、スパムメールが大量に送られてくる可能性もあるので

忘れずに設定しておくことをお勧めします。

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。