お問い合わせフォームのスパム対策|Turnstileの設定手順【初心者向け】

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

設置したお問合せフォームから大量のスパムメールが送られてくるんだけど、どうしたらいいの!?

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

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

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

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

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

わい

導入方法もそこまで難しくないから、この記事を読みながら頑張って導入してみてね!

目次

Cloudflareの登録方法

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

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

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

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

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

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

Turnstileでキーを作成する

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

STEP
左側のメニューから「Turnstile」を選択

左のメニューに「Turnstile」がありますので、そちらを選択します。

STEP
「ウィジェットを追加」を選択

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

STEP
「ウィジェット名」を追加する

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

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

STEP
「ホスト名の追加」からドメインを追加

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

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

STEP
右下の「作成」を選択

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

サイトキーやシークレットキーが表示されたら、お問い合わせフォームに設定することで

認証システムを導入できます。

Contact Form 7での実装方法

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

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

管理画面ダッシュボードにある「お問い合わせ」から、「インテグレーション」というサブメニューを選択します。

STEP
「Turnstile」項目の「インテグレーションのセットアップ」を選択

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

STEP
取得済みの2つのキーを入力し変更を保存

切り替わった画面で、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内に設定していきます。

STEP
管理画面の「Snow Monkey Forms」から「Cloudflare Turnstile」を選択

管理画面ダッシュボード内の「Snow Monkey Forms」のサブメニューの中に「Cloudflare Turnstile」があるので、そちらをクリックします。

STEP
サイトキーとシークレットキーを入力し、変更を保存

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

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

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

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

最後に

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

コメント

コメントする

CAPTCHA


目次