ブログ初心者

「Contact Form 7」の使い方&「reCAPTCHA」を導入したスパムメール対策の方法

「Contact Form 7」の使い方&スパムメール対策「reCAPTCHA」の導入方法

・お問い合わせページを作りたいので、「Contact Form 7」の設定方法を教えて欲しい
・問い合わせページを作ったらそこからスパムメールが来るの?スパム対策も教えて!

このような悩みにお応えします。

お問い合わせページを作るプラグインは「Contact Form 7」が1番有名なので導入の仕方、設定方法を説明しますね。

また、問い合わせやコメントなどの入力フォームを作るとスパムメール、スパムコメントが入ってきます。1日に何通も来ることがあり、迷惑メールフォルダにいっぱい溜まっていきます。

迷惑メールが来ないようにするにはGoogleの「reCAPTCHA」で対策するのがおすすめなのでその設定方法も案内しますね。

この記事の内容

  • 「Contact Form 7」の設定手順
  • お問合せページをサイトに表示させる
  • 迷惑メール対策に「reCAPTCHA」を設定してセキュリティ強化
  • reCAPTCHAのロゴを非表示にする方法

お問い合わせページを作る1番の目的は、あなたのブログを知った企業やASP会社から、「広告を掲載させてくだい」という問い合わせや、「あなたのブログで商品を紹介して欲しい」といった問い合わせを受け付けるためです。

広告を掲載すれば広告費をもらえますし、商品紹介を受ければ仕事料がもらえます。

また、あなたの記事を読んだ読者さんが悩みや疑問、感想などを送ってくることがあるでしょう。読者さんとコミュニケーションを取ってファンを増やす窓口にもなりますよ。

ではさっそく使い方を説明していきます!

「Contact Form 7」の設定手順

お問い合わせフォームを作る手順は以下です。

  1. Contact Form 7のインストール&有効化
  2. お問い合わせフォームを作成
  3. 問い合わせメールを受信する設定
  4. 問い合わせしてきた読者に自動返信メールを送る設定

1つずつ説明していきますね。

手順①:「Contact Form 7」のインストール&有効化

「プラグイン」→「新規追加」をクリックして、検索窓に「Contact Form 7」と入力しましょう。

インストールしたら有効化させてください。

1_contact-form-7をインストールして有効化

手順②:お問い合わせフォームを作成

まず問い合わせフォームの中身を作ります。

「お問い合わせ」→「新規追加」をクリックしてください。

2_お問い合わせの新規追加をクリック

作成するお問い合わせフォームに名前を付けましょう。

問い合わせフォームには初めから「名前」「メールアドレス」などがすでに設けられています。基本的な問い合わせフォームならデフォルトのままで大丈夫です。

3_フォーム名記入。フォームはデフォルトのままでOK

電話番号などその他の入力項目を増やしたい時は、各項目をクリックすれば簡単に追加できますよ。

手順③:問い合わせメールを受信する設定

問い合わせメールをあなたがどのように受信するか決める設定です。

「メール」タブを初めにクリックしてください。

4_自動返信メールの設定
  • 送信先:読者からの問い合わせメールを受信するあなたのメールアドレス。デフォルトではあなたのWordPressログインアドレスが指定されているので変更しましょう。問い合わせ専用のフリーメールを用意するといいですよ。
  • 送信元:あなたのサイトタイトルが表示されるようになっています。デフォルトのままでOKですがもちろん変更しても大丈夫です。
  • 題名:任意の件名を入力。メールを受信した時の題名です。
  • 追加ヘッダー:変更しなくても良い(空欄にしてもOKです)
  • メッセージ本文:任意の文章とショートコードを入力(わたしは特にいじってません)

手順④:問い合わせしてきた読者に自動返信メールを送る設定

問い合わせしてきた相手に瞬時に自動で返信してくれる設定をします。

「メール」タブをスクロールして下に移動すると表示される「メール(2)を使用」にチェックを入れてください。

5_問い合わせした読者が受け取るメール内容を設定
  • 送信先:[your-email] ※変更しない
  • 送信元:自分のサイト名や自分の名前など入力可能(デフォルトのままでOK)
  • 題名:任意の件名を入力(お問い合わせありがとうございます。の一文に変更しました)
  • 追加ヘッダー:読者からのメールを受信する自分のメアド(送信専用にしたい場合は空欄にしてもOK)
  • メッセージ本文:自由に文章を変更してOK(この度はお問い合わせありがとうございます。の一文を追加しました)

必ず「保存」をクリックしてくださいね!

ここで設定した項目が問い合わせしてきた相手に自動で返信される内容になります。

お問合せページをサイトに表示させる

作成した問い合わせフォームをサイトに表示させましょう。

上部にあるショートコードをコピーしてください。

6_ショートコードをコピー

「固定ページ」→「新規追加」をクリックします。

7_固定ページを新規作成

サイトに表示されるページタイトルを自由に入力しましょう。

本文の部分に先程コピーしたショートコードを貼り付ければ完成です!

8_タイトルとショートコード入力

「パーマリンク」を変更してくださいね!

パーマリンク変更

ちなみに「お問い合わせフォーム」や「プライバシーポリシー」などは、SEOを考慮してnoindexしておくといいですよ。noindexの設定は導入しているWordPressテーマによって異なりますが、各記事の作成ページで簡単にできますよ。

最後に、作成した問い合わせページを「トップメニュー」や「フッターメニュー」に設定すれば完成です!WordPressの「外観」→「メニュー」から作れますよ。

9_お問い合わせのプレビュー画面

迷惑メール対策に「reCAPTCHA」を設定してセキュリティ強化

「Contact Form 7」をこのまま使用するとスパムメールが届くことがよくあります。

迷惑メールを減らすために、Googleが提供するサービス「reCAPTCHA」の設定をおすすめします。

まずはreCAPTCHAの公式ページにアクセスしましょう。

→reCAPTCHA公式ページ

step
1
「Admin console」をクリック

サイト上部の「Admin console」をクリックします。

10_Admin-Consoleをクリック

step
2
サイト情報の登録

12_reCAPTCHAにサイトを登録
  • ラベル:自分のブログ名など分かりやすい名前
  • reCAPTCHA タイプ:reCAPTCHA v3を選択
  • ドメイン:自分のブログドメインを入力
  • オーナー:Googleのメールアドレスが表示される
  • reCAPTCHA 利用条件にチェックをする
  • アラートをオーナーに送信するにチェックをする

「送信」をクリックするとサイトの登録が完了し、2つのキーが発行されます。

12_サイトキー&シークレットーが表示される

reCAPTCHAでの作業はこれで終了です。この2つのキーを次はContact Form 7に貼り付けていきます。

step
3
WordPressのContact Form 7にキーをペースト

発行されたサイトキーとシークレットキーをContact Form 7に設定しましょう。

「お問い合わせ」→「インテグレーション」をクリック。

14_お問い合わせのインテグレーションをクリック

「インテグレーションのセットアップ」をクリックします。

15_インテグレーションのセットアップをクリック

サイトキーとシークレットキーを貼り付けて「変更を保存」をクリックしたら完成です。

16_サイトキー&シークレットキーを貼り付けて完了

サイトの右下にreCAPTCHAのロゴが表示されていると思います!

reCAPTCHAのロゴを非表示にする方法

reCAPTCHAのロゴがサイトの右下に表示され、「TOPに戻る」ボタンとかぶり邪魔になってしまうケースがあります。

サイトを開くと右下に出てくる画像、これを非表示にします。

17_reCAPTCHAの画像を非表示にする設定

ロゴを消す方法にはプラグインを使う方法と、使わない方法の2つあります。

プラグインを使う方がおすすめですが、プラグインをあまり入れたくない人もいると思うので両方のやり方を解説します!

①:「Invisible reCaptcha for WordPress」を使ってロゴの表示場所を変える

プラグイン「Invisible reCaptcha for WordPress」を使うと、ロゴを右下ではなく入力フォームの近くに配置できるようになります。

また、このプラグインでreCAPTCHAを設定すればスパムコメントや不正ログインの対策もできるんです。

ロゴの設定をプラグイン側で行うために、先ほどWordPress側に貼り付けた「reCAPTCHA v3」のサイトキー&シークレットキーを外す必要があります。

そしてこのキーをプラグイン「Invisible reCaptcha for WordPress」で管理するようにします。

step
1
「お問い合わせ」に入力したキーの削除

「お問い合わせ」 → 「インテグレーション」にすすみます。「インテグレーションのセットアップ」をクリックします。

お問い合わせのインテグレーションのキーを削除

キーを削除します。

お問い合わせのインテグレーションのキーを削除

step
2
「Invisible reCaptcha for WordPress」のインストール

プラグイン「Invisible reCaptcha for WordPress」をインストールし有効化しましょう。

Invisible reCaptcha for WordPressをインストール

step
2
「Invisible reCaptcha for WordPress」の設定

「設定」→「Invisible reCaptcha」にすすみます。

Invisible-reCaptchaの設定

サイトキーとシークレットキーを入力する設定画面が表示されますので、ここにキーを貼り付けます。

step
3
reCaptchaのキーをコピペする

reCAPTCHA公式ページでサイトキーを再度コピーしましょう。

右上のほうにある歯車マークの「設定」をクリッックし、画面が変わったら「reCAPTCHAのキー」を開きます。

reCaptchaのキーをコピー

コピーした2つのキーをプラグイン「Invisible reCaptcha」にペーストしましょう。

バッジ位置を「Inline」に設定することで、ロゴの表示が「右下」ではなく「入力フォームの近く」に変更されます。

Invisible-reCaptchaにキーをペースト

step
4
Contact FormにreCAPTCHAを表示させる

「問い合わせフォーム」の項目をクリックして、「Contact Form 7」にチェックを入れましょう。

contact form 7にチェックを入れる

これで画面右下だったreCAPTCHAが、問い合わせページに表示されるようになりました!

お問い合わせフォームにreCaptchaが付いた

step
5
コメントフォームやログインにreCAPTCHAを表示させる

reCAPTCHAは問い合わせフォーム以外の部分にも設置可能です。

「WordPress」という項目をクリックしてください。

コメントフォームにreCAPTCHAを設置すれば、スパムコメント対策のプラグイン「Akismet」が不要になります!

わたしは以下の2つだけチェックを入れています。

reCaptchaでセキュリティ強化

ログイン時のセキュリティ対策をしたい場合は、ログインフォームにも設置するといいですよ!

わたしは「Siteguard WP Plugin」でログイン画面に文字認証をさせているので不要としましたが、特にログイン対策などしていない人は全てにチェックを入れるといいですよ!

②:プラグインを使わずreCAPTCHAのロゴを非表示にする

Google公認の非表示方法があるので解説していきます

サイトが重くなったりプラグイン同士が干渉し合うことを避けたい場合はこちらのやり方で!

step
1
公式サイトにアクセスしてHTMLコードをコピー

reCAPTCHAのQ&Aサイトにアクセスします。

↓の部分には「この記述をサイトに入れればロゴを消してもいいよー」と書いてあります。

18_reCAPTCHAの公式サイト

GoogleサイトでコピーしたHTMLコードをフォームの一番下に貼り付けます。↑の写真の上段のコードだけをまず貼ります。

翻訳すると以下の文章になるので、日本語表記させたい場合は以下の文章をコピペするといいですよ。


このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。

19_コンタクトフォームにコードを貼り付ける

これで、お問い合わせフォームにGoogleが指示している文言が表示されるようになりました。

20_問い合わせページにGoogleが指示する文言が表示される

あとは、reCAPTCHAのロゴを非表示にする手順です。

step
2
reCAPTCHAのロゴを非表示にする設定

ワードプレスの「外観」→「カスタマイズ」にすすみ、「追加CSS」にアクセスします。

21_外観、カスタマイズへいく

「追加CSS」にコードをコピペすれば完了です!


.grecaptcha-badge { visibility: hidden; }

22_追加CSSにコードをコピペする

サイトを開き右下に表示されるreCAPTCHAのロゴが表示されていないければ成功です!

えどがわ

◆2020年、40歳の時にブログを始めました ◆「返り咲きたい人たちを救う」をミッションに掲げ、悩みを持つ人たちの現状打破の参考になればと当ブログを運営 ◆ブログ収益:全く稼げない8ヶ月を経験→ゼロから徹底的に勉強→ブログノウハウの構築 ◆情報をまとめるのが好き ◆何歳であっても、武器の無い弱き人でも人生は変えれます!

-ブログ初心者

Copyright © 返り咲きブログ, All Rights Reserved.