reCAPTCHA設置「Contact Form7」のお問い合わせフォームを作る

リキャプチャ導入のお問い合わせフォームを作るワードプレス

迷惑メールを来ないようにする方法はないの?

1日に何件もの同じ内容のお問い合わせがきていて困っていませんか?

そんな状況なら「reCAPTCHA」の設定が効果的かもしれません。reCAPTCHAはGoogleが提供しているBotからの攻撃を防ぐサービスです。Googleアカウントを持っていればだれでも利用できます。

ただしJetpackのお問い合わせフォームは、まだ対応されていません。前回Jetpackで作るお問い合わせフォームについて解説しましたが、今回はreCAPTCAHと「Contact Form7」の使い方を解説します。

最後までお付き合いくださいね。

迷惑なお問い合わせを放置すると危険!

危険マーク
迷惑なお問い合わせを放置すると危険!

毎日送られてくる外国語のお問い合わせや内容が全く同じの営業メール。危害がないから「まあ、いいか」と放置していませんか?

放置しているうちにメールサーバーがスパムメールで溢れ、重要なメールを見つけるのに時間がかかったり、大切なお客様からのお問い合わせが届かないなどブログ運営に支障を来すかもしれませんよ。

スパムメールには危険が潜んでいる
  • ウィルスに感染するかも・・・
  • ランサムウェアに乗っ取られるかも・・・
  • フィッシング詐欺に遭うかも・・・
  • サーバーがダウンしちゃうかも・・・
  • 重要なお問い合わせが見つからないかも・・・

reCAPTCHA導入でBotからの問い合わせをなくそう

reCAPTCHA公式サイト
reCAPTCHA導入でBotからの問い合わせをなくそう

reCAPTCHAはGoogleが提供する無料のBotかどうかを判断するツールです。現在は2種類のバージョンがあり、手動または自動でBotかどうか判別します。

Googleアカウントを持っている人はこちらから取得することができます。

バージョン2は手動で自分がBotでないことを証明します。

reCAPTCHAバージョン2の画像
reCAPTCHAバージョン2

チェック入れてそれでも不審な場合はお題にあう写真を選びます。これがなかなか難しい場合があり、何度もやらされることがあります。

バージョン3はホームページやブログの右下にreCAPTCHAのロゴが表示され、自動でBotかどうか判断してくれる優れものです。ただ欠点が自動で判断するため、自分がBotであると判断される場合もあります。

reCAPTCHAバージョン3の画像
reCAPTCHAバージョン3
バージョン2バージョン3
良いところ誤認がないBotかどうか自動判別なのでラク
良くないところ画像認証が面倒くさい自分がBotと誤認される
reCAPTCHAのバージョンの違い

「Contact Form7」でreCAPTCHAを導入しよう

本と黄色い花
「Contact Form7」でreCAPTCHAを導入しよう

reCAPTCHAをお問い合わせフォームに導入したい場合、「Contact Form7」でお問い合わせフォームを作ります。

前回Jetpackでお問い合わせフォームをつくる方法を解説しましたが、Jetpackには残念ながらreCAPTCHAを導入することができません。

またGoogleフォームはフォーム独特の雰囲気がありブログの統一感が失うかなと思うので、今回はContact Form7でお問い合わせフォームをつくります。

正直なところContact Form7は悩ましいところです。

「Contact Form7」のちょっと残念なところ
  • reCAPTCHAはバージョン3のみ対応
  • reCAPTCHAのマークが全ページに表示される
  • メール送信前の確認画面がない
  • 見た目をCSSでアレンジしなくてはならない
  • 送信先のメールは設定に登録しているメルアドだけ

これらの悩ましい点を克服するには別のプラグインを追加インストールする必要があります。私はプラグインを増やしたくないので、Jetpackは早くreCAPTCHAに対応して欲しいと願っています。

reCAPTCHAを導入しよう

さてここからはお問い合わせフォームを作ってきましょう。まずはreCAPTCHAの設定です。

Google reCAPTCHA公式サイト
Google reCAPTCHA公式サイトより

まずはGoogleのreCAPTCAH(リキャプチャ)にアクセスし、赤枠の[v3 Admin Console]をクリックします。

reCAPTCHA登録画面
reCAPTCHA登録画面

reCAPTCHAを導入したいブログについて登録します。

ラベル自分が分かれば良いので適当でOK
reCAPTCHAタイプバージョン3を選びます
ドメインブログのドメインを入力します
オーナーGoogleアカウント
reCAPTCHA利用条件に同意するチェックを入れます

登録ができると、サイトキーとシークレットキーを与えられます。

reCAPTCHA設定画面
reCAPTCHA設定画面

青文字のreCAPTCHAのキーの横の三角をクリックするとサイトキーとシークレットキーが表示されます。2つのキーがあとでContact Form7でreCAPTCHA設置に必要になります。

Contact Form7でお問い合わせフォームを作ろう

Contact Form7の画像

「Contact Form7」をインストールすると、すでにコンタクトフォーム1が自動で作成されています。

フォーム一覧
すでにコンタクトフォーム1ができている

いたって何も特徴のないシンプルなデザインです。

コンタクトフォーム7のお問い合わせフォーム画像
コンタクトフォーム7のお問い合わせフォームはシンプル

タグ(フォーム)は以下の画像の様になっています。「text*」となっていますよね?「*」が付いていると必須項目になります。

お問い合わせフォームのサンプルテンプレート
お問い合わせフォームの内容

これでよければ、固定ページにお問い合わせフォームを設置すれば出来上がりです。早いね!

reCAPTCHAをContact Form7に導入する

WordPressの左のメニュー一覧から「お問い合わせ」を選び、その中の「インテグレーション」をクリックします。4つ項目が並んでおりその中のreCAPTCHA項目を選び「インテグレーションのセットアップ」をクリックします。

Contact Form7のreCAPTCHA設定画面
Contact Form7のreCAPTCHA設定

サイトキーとシークレットキーをGoogle reCAPTHAのサイトキーとシークレットキーをコピーして、Contact Form7に登録したらOKです。すぐにreCAPTCHAが導入されます。

Contact Form7のreCAPTCHAのサイトキーとシークレットキーを登録
サイトキーとシークレットキーを登録したらreCAPTCAHは完了

一つ注意点ですが、Contact Form7に直接reCAPTCHAを登録するとブログの全ページに表示されます。もし全ページに表示したくないという場合は「Invisible reCaptcha for WordPress」など別プラグインに登録して間接的にお問い合わせフォームにreCAPTCHAを導入します。

自動返信メールは相手によってはスパムメール

自動返信メール設定画面
自動返信メール設定

「メール(2)を使用」にチェックをいれれば、画像の様な編集画面が表示されます。送信元、題名、メッセージ本文を入力して保存します。

私はサンクスメールをもらっても「あ、届いたんだな」と思うだけなので、サンクスメールもスパムメールの一歩手前のどうでもいいメールなんじゃないかな、と思っています。

だから自動返信メールの設定は、状況をみて設定したら良いと思いますよ。

設置後の変化

正直言って、完全にゼロにすることはできていません。6割方減ったように感じます。

reCAPTCHAを設置するのが面倒くさい人は、現状の面倒くささと比較して設置したらいいnじゃないかと思います。

まとめ

カーネーションと手紙

以上が、reCAPTCHAとContact Form7の使い方について解説しました。

reCAPTCHAはGoogleが提供するサービスの一つで、スパムメールやスパムコメント防止に役立ちます。reCAPTCHAをお問い合わせフォームに設置出来るプラグインは現在限られているため、Contact Form7でお問い合わせフォームをつくりました。

「お問い合わせフォームならContact Form7」と言われるくらいよく使われるプラグインですが、ちょっと残念なところもあるので、私は早くJetpackが対応してくれたらなぁと思っています。

お問い合わせフォームをゼロから作れって言われたら無理なので、WordPressは便利でその意味では簡単です。でも、WordPressってやっぱりに難しいです。

一人でWordPressを設定するのに絶望したら、プロから学ぶのもいいんじゃないかなと思います。まずは無料体験をしてみてはいかがでしょうか?