ContactForm7のスパム対策を簡単にやる方法

ContactForm7のスパム対策を簡単にやる方法

最近このサイトのお問い合わせに、スパムがたくさんくるようになったので、

放置するのはやめようと思って、ささっとスパム対策をしました。

同じような人がいると思うので、ContactForm7のスパム対策のやり方をまとめました。

ContactForm7のスパム対策を簡単にやるための条件

問い合わせフォームをContactForm7というプラグインを使っている

わたしはWordPressの問い合わせフォームのプラグインで最も有名な『ContactForm7』を使っているので、今回はContactForm7を使っている人向けに説明します。

contactform7

スパム対策はGoogleのreCAPTCHAを使う

それとスパム対策方法は、Googleのスパム対策ツールの『reCAPCHA』を使います。

google-recapcha

reCAPTCHAは、Googleが提供する無料のサービスです。

reCAPTCHAの登録方法や設定方法は、他の人もやり方を紹介しているようです。

でもContactFormササッと実装する方法に加え、reCAPTCHAの表示が、バランスが悪かったり、はみ出す現象のが嫌な人は多いと思います。

表示
藤本陽介
というか、わたしがこのスマホの表示がちょっと気に入らなかったので、中央表示にしただけです。

今回は、最低限レベルのCSSを調整するまでの方法を紹介します。

ContactForm7のスパム対策を簡単にやる方法

reCAPCHAにサイトを登録する

reCAPTCHAのこちらのページでサイトを登録します。

reCAPTCHA-new-site

『Label』には、自分のサイト名を入力してください。わたしは『fujimotoyousuke.com』と入力しました。

『Choose the type of reCAPTCHA』は、そのまま『reCAPTCHA V2』にしておきます。

『Domains』には、https://をとってドメインを入力します。わたしは『fujimotoyousuke.com』と入力しました。

上図の赤枠は、『利用規約に同意する』という意味なので、チェックを入れます。

そして、右下の『Register』をクリックすると、登録できます。

reCAPTCHAからAPI Keyを入手する

サイトの登録ができると、API Keyが入手できます。

reCAPTCHA-API-KEY

この図のように赤枠で囲っている『Site Key』と『Secret Key』をコピーペーストします。
※わたしのAPI情報はモザイク処理していますが、ここに表示されているのがAPIキーです。

ContactForm7に統合する

WordPressの管理画面の左メニューに『お問い合わせ』の『インテグレーション』をクリックします。

そのあと、以下のコメントが表示されているはずです。

reCAPTCHA はあなたのウェブサイトをスパムや不正利用から守る無料のサービスです。

reCAPTCHA を使うには API キーペアの設定が必要です。

recaptcha-setting

このような表示がされているので、『キーを設定する』をクリックします。

wordpress-contactform

そうすると、この図のように『サイトキー』と『シークレットキー』を入力できるようになります。

さきほど入手したAPIキーを入力してください。

コンタクトフォームを編集する

WordPressの管理画面の左メニューに『お問い合わせ』の『コンタクトフォーム』をクリックします。

そのあと、スパム対策するフォームを選択し、編集します。

コンタクトフォームの編集1

わたしは、お名前とメールアドレスとメッセージの3つをフォームに登録していますので、このような表記です。

上の図の赤枠部分がreCAPTCHAの部分です。

参考にしていただければと思うので、そのままコードを貼っておきます。

このコードの『123』という数字部分は、それぞれContactFormで割り当てられた数字が入ると思います。

CSSの調整

CSSを追加します。子テーマにしている人は子テーマのstyle.cssに以下を追記すれば、バランス良く中央に表示されます。

WordPressの管理画面からCSSを調整する場合は、ほとんどのテーマでできると思います。

管理画面の左メニュー『外観』から『カスタマイズ』を選択し『追加CSS』というものがあれば、それに書き加えればOKです。

表示を確認する

表示
藤本陽介
これで、スマホでフォームの表示をチェックすると、中央に表示されバランス良くなっているはずです。

こだわる人はもっとこだわると思いますが、わたしはこれでOKです。

さらには、しっかりフォームが機能しているかもチェックしてくださいね。

check

reCAPTCHAの『私はロボットではありません』にチェックを入れないと、メッセージの送信に失敗するはずです。

これで、スパム対策ができました。

まとめ

reCAPCHAの登録やAPI情報の入手、設定は他の人もやり方を紹介しているようですが、CSSの調整まではなかなか紹介されていなかったので、ブログにしました。

ContactForm7を使っている人なら、今回の記事を見ながらスパム対策すれば、10分で作業完了すると思います。

reCAPCHAはGoogleのサービスで無料で使えて、とても便利なのでおすすめです。

またContactForm7には、Akismetと連携したスパム対策もあるようなので、Akismetを有効化している人なら、それもあわせてやっておくと、なお良いと思います。

藤本陽介
今回の設定で、スパムはまったくこなくなりました。

とても有効なスパム対策でしたよ。

WordPressサイトを運営していて、フォームをContactForm7で実装しているなら、おすすめのスパム対策なので、ぜひやってみてください。

ContactForm7のスパム対策を簡単にやる方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です