【ワードプレス(WordPress)】「Contact Form 7」プラグインを使って簡単にお問い合わせフォームを設置しませんか?

注意
本記事のキャプチャ画像は2018年7月30日時点のものです。

Google Adsenseの審査に合格するために、少しずつ準備を進めてます。

サイト検索して調べてみると、Google Adsenseの審査に合格するためにはいくつかポイントがあるとのこと。

  • 独自ドメインを取得していること
  • ある程度の記事数と文字数
  • 個人的な日記じゃなく、有益な情報
  • プライバシーポリシーの設置
  • 問い合わせフォームの設置
  • 禁止コンテンツが含まれていないこと
  • 著作権のある画像を使用していないこと

前回はプライバシーポリシーのページを作成したので、今回はお問い合わせフォームを設置しようと思います。
プライバシーポリシーの設置したときの記事はコチラから↓

【ワードプレス(WordPress)】Google Adsenseに向けてプライバシーポリシーをパパッと設置しました

2018年7月30日

スポンサーリンク

Contact Form 7プラグインの導入

簡単に設置できないかなーと思い、Google先生に聞いてみたところ、やはり対応プラグインありました。

「Contact Form 7」というプラグインを今回インストールすることにしました。

プラグインインストール後は有効化します。

reCAPTCHA(v2)のキー情報を取得

今回、「Contact Form 7」プラグインを選択したのには理由があります。

お問い合わせフォーム設置したら、自動ツール等を使って嫌がらせのように問い合わせされるのが嫌だったため、ロボット対策はしっかりやりたい
と思っていました。

最新の「Contact Form 7」プラグインだとGoogle先生のreCAPTCHA(v2)と連動できるとの情報があったため、早速連動させてみます。

reCAPTCHA(v2)はAPIで利用することになるため、利用するのに必要な「Site Key」と「Secret Key」を取得していきます。

まず、reCAPTCHA管理画面から必要な情報を入力していきます。

  • ラベル名を入力します。 ※多分、何でもOK
  • reCAPTCHA(v2)の表示タイプを選択します。
  • ブログサイトのドメイン名を入力します。

必要な情報を入力後、「register」ボタンを押下します。



すると、「Site Key」と「Secret Key」が表示されるので、エディタ等へコピペして退避しておきます。
※これらはreCAPTCHA(v2)のAPI利用に必要な情報になるため、管理はしっかりと!

「reCAPTCHA」と「Contact Form 7」の連動

次に「reCAPTCHA」と「Contact Form 7」を連動させていきます。

「WordPress管理画面左メニュー」→「お問い合わせ」→「インテグレーション」を選択します。

キーを設定していきます。


そして、先程コピペした「Site Key」と「Secret Key」を入力して、「保存」ボタンを押下します。

スポンサーリンク

お問い合わせフォーム作成

「reCAPTCHA」と「Contact Form 7」の連動後は、お問い合わせフォームを作成していきます。

「WordPress管理画面左メニュー」→「お問い合わせ」→「コンタクトフォーム」を選択します。そして、サンプルで準備されているフォームを選択します。

後でお問い合わせフォーム用のページを作成しますが、ショートコード一行だけ追記すれば、お問い合わせフォームを埋め込めるようです。

後で使うためこのショートコードをコピーしておきます。

ぐーぐーぺこりんこ
ショートコードで埋め込めるのは便利ですねー

お問い合わせフォームのコードは以下の通りにして、reCAPTCHAを埋め込むようにしました。

お問い合わせフォーム用の固定ページを作成

次にお問い合わせフォーム用の固定ページを作成していきます。

「WordPress管理画面左メニュー」→「固定ページ」→「新規作成」を選択します。記載するコードは先程コピーしたお問い合わせフォームのショートコードのみでOKです。

ぐーぐーぺこりんこ
ショートコード1行なのは楽ですねー。

フッタナビのメニューへお問い合わせフォームを追加

作成したお問い合わせフォームの固定ページをフッタナビへ追加していきます。

「WordPress管理画面左メニュー」→「外観」→「メニュー」を選択します。

カスタムフッタメニューを選択して固定ページの「お問い合わせフォーム」をメニューへ追加します。

そしてメニュー構造に「お問い合わせフォーム」が追加されていることと、メニューを表示する位置を確認してから、「メニューを保存」ボタンを押下します。



ブログサイトで表示確認

最後にブログサイトで確認してみます。

ブログサイトのフッタメニューを確認すると、お問い合わせフォームのリンクが表示されてます。

お問い合わせフォームを表示させてみると、reCAPTCHAも表示できていることが確認できます。




ぐーぐーぺこりんこ
これでお問い合わせフォームの設置は完了です。

(2018/12/23追記)reCAPTCHA(v3)のキー情報を取得して再登録

reCAPTCHA(v3)が出てreCAPTCHA(v2)のチェックボックスが使えなくなっていたのでreCAPTCHA(v3)で「サイトキー」と「シークレットキー」を再度発行して、登録し直しました。やり方はContact Form7サイトにあります。

ちなみにreCAPTCHA(v3)ではreCAPTCHA(v2)で表示されていたようなチェックボックスは表示されません。
※Contact Form7サイトに記載ありました

reCAPTCHA(v3)では CAPTCHA ウィジェット (reCAPTCHA v2 にあった「私はロボットではありません」のチェックボックス) が不要になるので、[recaptcha] フォームタグももう用済みです。[recaptcha] フォームタグがフォームテンプレート中にある場合、Contact Form 7 5.1 以降ではそれらは無視され、空の文字列で置き換えられます。
引用元:Contact Form 7 reCAPTCHA (v3)

ぐーぐーぺこりんこ
reCAPTCHA(v3)で人間によるフォーム投稿なのか、ロボットによる投稿なのか判別してくれているんですね。

サイトを見ると、「reCAPTCHAで保護されています」と表示されるようになっていました。

(2020/6/14追記)Google Insightsのスコアが悪いため、reCAPTCHA削除しました

問い合わせフォームからのスパムを止めるためにreCAPTCHAを導入していたのですが、reCAPTCHA(v3)に変更して以降、問い合わせフォームだけではなく、サイト全体がreCAPTCHAの対象になりました。

そして、その都度reCAPTCHA用のJavaScriptが読み込まれる始末。。。その結果、JavaScriptの読み込みに時間がかかり、Google Insightsのスコアが悪くなるという悪影響が出るようになりました。

ぐーぐーぺこりんこ
こりゃ本末転倒な事態になってしまったってもんです。
そのため、reCAPTCHAを削除することへ。

「WordPress管理画面左メニュー」→「お問い合わせ」→「インテグレーション」→「reCAPTCHA」でサイトキーとシークレットキーを削除すればOKです。
サイトキーとシークレットキーを削除
上記のように未登録状態になっていれば、サイトキーとシークレットキーが削除されたということになります。このようにセキュリティと利便性はトレードオフということで判断が難しいところです。

それでも、どちらを優先するかはその都度判断していく必要があり、今回は利便性を優先したということになります。


スポンサーリンク

ためになったと思ったら「いいね」や「シェア」お願いします!