ブログ集客専門家・ブログマーケッター 時々 おもろいおっさん

ブログ集客用のWordPress新テーマ『ELEPHANT3』は最高の出来です

世界中のスパムメールを撲滅!Contact Form7にreCAPTCHAを追加する方法

 
スパムメールよさらば! (2)
この記事を書いている人 - WRITER -
ジュンイチ
ブログ集客の専門家。ブログが一番ですが、WEB周りの事はたいていできます。SNS活用・SEO・マーケティングも大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

どうも!ジュンイチです。

WordPressでブログやHPを運営していると、お問合せフォームから来るスパムメール

迷惑な売り込み、怪しいURLを送りつけてくる場合もあります。

 

そして大抵の場合が英語。英語が苦手な人なら「なにこれ!?どうしたらいいの?!」とびっくりして不安になると思います。

ああいうメールって、たいていツールを使って自動的に送っているので、それを取り締まれば迷惑メールはほぼ来なくなります。

 

そこで今回は、WordPressのプラグイン「Contact Form 7」を使って作った問い合わせフォームに、「私はロボットではありません」という以下のようなスパム対策機能を追加する方法を解説します。

 

↓ 完成するとこんな感じのものが付けられます!

reCAPTCHA

初心者の方でも3分あれば簡単にできるので、迷惑メールにお困りの際はぜひ実践してみてください。

今回の記事はあなたのために!
  • WordPressを使っている
  • Contact Form 7を使ってお問い合わせフォームを作っている
  • スパム(迷惑)メールが頻繁に来て困っている

 

ステップ1.プラグイン「Contact Form7」が追加されているか、確認しよう!

今回はWordPressプラグイン「Contact Form 7」を使ってお問合せフォームを作っている場合の解説なので、Contact Form7がインストールされているか?まずは確認しましょう。

もう使ってるよ!っていうあなたはステップ2に飛びましょう。

 

↓WordPressのダッシュボード(管理画面)で「プラグイン」⇒「インストール済みプラグイン」をクリック

ContactForm7にreCAPTCHA追加

 

↓この中に、「Contact Form 7」が入っていて有効化されていればステップ2に進みましょう。

ContactForm7にreCAPTCHA追加

 

Contact Form7が入っていない場合

以下の手順でプラグインをインストールしてみてください。

 

↓「プラグイン」⇒「新規追加」をクリック

ContactForm7にreCAPTCHA追加

 

↓ 右上の検索窓に「Contact Form 7」と入力すると、富士山のイラストが付いたものが出てきます。これがContact Form 7なので「今すぐインストール」をクリックして、さらに有効化までしておいてください。

ContactForm7にreCAPTCHA追加

 

ここまでが、まずはContact Form 7を使っていない方向けのステップです。

ステップ2.reCAPTCHAのアカウントを発行しよう

ではでは、Contact Form 7が入った状態で次に、「reCAPTCHA」というサービスを使えるようにアカウントを発行しましょう。

reCAPTCHAはGoogleが提供してくれている無料のサービスなので使うにはGoogleのアカウント(Gmailアドレス)が必要です。

まだGoogleアカウントがない場合は、【最新2018年版】Googleアカウントの新規作成方法!複数アカウントの取得もできる!を参考にGoogleアカウントを発行してみてください。

 

では、Googleアカウントを持っているあなたは以下から手順を進めていきましょう。

 

↓WordPressのダッシュボードの「お問合せ」⇒「インテグレーション」をクリック

ContactForm7にreCAPTCHA追加

 

↓ この画面で右上のgoogle.com/recaptchaをクリック。

ContactForm7にreCAPTCHA追加

 

↓そうすると、GoogleのreCAPTCHAのサイトに飛びます。右上の「My reCAPTCHA」をクリック

ContactForm7にreCAPTCHA追加

 

↓ ログインに使うGoogleアカウントを選択

ContactForm7にreCAPTCHA追加

 

↓ Googleアカウントのパスワードを入力して「次へ」をクリック

ContactForm7にreCAPTCHA追加

 

↓ 次の画面で以下のように設定をします。

ContactForm7にreCAPTCHA追加
  • Label:適当に名前をつけてください。(例:お問合せフォームなど)
  • Choose the type of reCAPTCHA:reCAPTCH v2を選択でOK
  • Domain:あなたのサイトのドメイン部分を入力(junichi-manga.comなど)
  • Accept the reCAPTCHA Terms of Service:チェック(サービス利用規約に同意をする)
  • Send alerts to owners:こちらもチェック

 

↓ すると、Site keyとSecret keyなどが発行されます。使うのは1)Site keyと2)Secret keyです。

ContactForm7にreCAPTCHA追加

 

ここまでできたら、この画面を残したままでWordPress のダッシュボードも開きましょう。

 

↓「お問合せ」⇒「インテグレーション」を開きます

ContactForm7にreCAPTCHA追加

 

↓ 「キーを設定する」をクリック

ContactForm7にreCAPTCHA追加

 

↓ このサイトキーとシークレットキーの部分に、先程取得したreCAPTCHAのサイトの長いキーをコピペしてあげてください。その後「保存」をクリック。

ContactForm7にreCAPTCHA追加

 

これでreCAPTCHAを使う準備ができました。

 

ステップ3.Contact Form7で作るお問い合わせフォームに「reCAPTCHA」を設置しよう

では、最後のステップです。お問い合わせフォームに「私はロボットではありません」のreCAPTCHAを追加していきます。

 

↓ 「お問合せ」⇒「新規追加」をクリック

ContactForm7にreCAPTCHA追加

↓ お問合せフォームの作成画面になります。ここで[submit “送信”]の上に少しスペースを作りreCAPTCHAボタンをクリックしましょう。

ContactForm7にreCAPTCHA追加

 

↓ するとこんな画面が開くので「タグを挿入」ボタンをクリック

ContactForm7にreCAPTCHA追加

 

↓ すると、[recaptcha]というタグが入りました。あとは「保存」をクリックするのをお忘れなく!

ContactForm7にreCAPTCHA追加

 

↓ フォーム作成画面の上の方にショートコードが発行されます。この部分をコピーしましょう。

ContactForm7にreCAPTCHA追加

 

↓ 次に、「固定ページ」⇒「新規追加」をクリック

ContactForm7にreCAPTCHA追加

 

↓ 本文中に先程コピーしたショートコードを全て貼り付けます。

ContactForm7にreCAPTCHA追加

 

↓ これで無事「reCAPTCHA」の「私はロボットではありません」が付きました。

ContactForm7にreCAPTCHA追加

 

これで完成です。

 

必ずテストをしておきましょう

あとは、うまく送信できるかチェックしておきましょう!

reCAPTCHAにチェックを入れた場合に送信ができて、チェックを入れなかった時に失敗すればOKです。

 

「reCAPTCHA」のデザインを変えたい場合は?

reCAPTCHAのデザインは大きさ2種類、色2種類の合計4パターンが使えます。

 

↓フォームにreCAPTCHAを追加する画面で「サイズ」と「デザイン」が選べると思います。ここは好きなものにチェックしてみてください。

ContactForm7にreCAPTCHA追加40

 

↓デザイン1)サイズ:ノーマル、テーマ:明るい

ContactForm7にreCAPTCHA追加

 

↓デザイン2)サイズ:コンパクト、テーマ:明るい

ContactForm7にreCAPTCHA追加

 

↓デザイン3)サイズ:ノーマル、テーマ:暗い

ContactForm7にreCAPTCHA追加

 

↓デザイン4)サイズ:コンパクト、テーマ:暗い

ContactForm7にreCAPTCHA追加

 

 

上級者向け:スタイルをいじるには?

なんかreCAPTCHAの場所が変だなぁ、左により過ぎてるなぁ…みたいな時は、CSSで調整ができます。

これは、お使いのWordPress テーマにもよりますが、以下のようにidやclassを指定してあげることで、ある程度いじれると思います。

 

↓ フォームタグ生成画面でID属性やクラス属性を入れてからタグを挿入してあげると、[recaptcha id:~~~]みたいになります。
ContactForm7にreCAPTCHA追加

 

これを使ってCSSを調整してみてください。

WordPress テーマELEPHANT3、Seal、Giraffeをお使いの方は、ID属性にrecaと入れて頂くと、ええ感じの場所に収まると思います。

  • ELEPHANT3:バージョン1.0.4
  • Seal:バージョン1.1.7
  • Giraffe:バージョン3.0.2

へアップデートしてみてください。

外観⇒テーマから更新通知が来ていると思うので、更新をしてみてください。

 

まとめ

今回は、WordPress でContact Form 7を使ってお問合せフォームを作っている場合のスパム(迷惑)メール対策を解説しました。

GoogleのreCAPTCHAというサービスを使うことで、自動的に配信されてくるスパムメールは対策できるはずです。

作業自体は簡単なので、ぜひ3分くらい時間があれば挑戦してみてください。

 


「スパム撲滅!!」

 

この記事を読んだあなたにはコチラもオススメです
>>「返信できないィ!を防ぐためにWordPressプラグイン『Contact Form7』で確認用メールアドレスを設置する方法

 

 

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

e-book

この記事を書いている人 - WRITER -
ジュンイチ
ブログ集客の専門家。ブログが一番ですが、WEB周りの事はたいていできます。SNS活用・SEO・マーケティングも大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

Copyright© ジュンイチのブログ , 2018 All Rights Reserved.