WordPressでの問い合わせフォームの設置方法

今回は、WordPressでの問い合わせフォームの設置方法についてです。

個人ブログであっても、万一の時の連絡を受ける手段があった方が安心ですし、信頼性も上がります。
サイトの信頼性が上がることはSEO対策にも繋がります。

WordPressでは、プラグインを利用することでphpなどの難しいプログラムを使わなくても
お問い合わせフォームが作成できます。今回は、プラグインの「Contact Form 7」を利用します。

また、Googleが提供するツール「reCAPTCHA」を使い、
お問い合わせフォーム設置後のスパム対策も同時に行っておきます。

問い合わせフォーム設置方法
「reCAPTCHA」を導入してスパム対策
1. Google提供ツール「reCAPTCHA」とは
  1. 「reCAPTCHA」導入方法
2. 問い合わせページと紐づけ

問い合わせフォーム設置方法

プラグイン「Contact Form 7」をインストール

プラグイン画面でContact Form 7を検索、インストールし有効化します。

Contact Form 7設定方法

左メニューお問い合わせ→新規追加

フォームタブはデフォルトでOKです。
追加したい項目があればボタンを押してタグを挿入し、他の項目と同じようlabelタグで囲い保存します。
フォームで追記した場合はメールタブでの設定時も追記が必要です。

タブをメールに切り替え
自動返信メールの設定

一つ目のメール設定は問い合わせがあった際にサイト管理者に届くメールです
メール設定下に「メール (2)」があり、そちらはユーザーへの自動返信メールです

まずは「メール」の設定です(自分に届くメール)

送信先：デフォルトでOK

デフォルトだと最小限の情報しか表示されないので
題名を分かりやすいよう「お問い合わせがありました」等追加
本文も同様に「下記のお問い合わせがありました」等なんのメールか分かりやすいように追加します

送信元はサイトタイトルとメールアドレスが表示されます
デフォルトでは「wordpress@ドメイン名」になっているので、問い合わせ用のアドレスがあればそちらに変更しましょう。
例.「info@ドメイン名」など。送信元の＠～に続く部分はサイトドメインのアドレスを指定します。
フリーメールなどはエラーになる可能性があります。

変更ができたら、保存ボタンを押しフォームの作成が完了です。

自動返信メールの設定

自動返信メールを設定したい場合は、メール(2)のチェックを入れて設定します。
問い合わせしたユーザーへの自動返信メールです。

ひとつ目に作成したメール下にメール (2)のチェックボックスがあります。
デフォルトではメール (2)は無しになっています。

こちらも１のメール同様、必要に応じ題名や送信元、本文を変更します。

題名：「お問い合わせありがとうございました。」等追加します

追加ヘッダー部分のReply-To: [_site_admin_email]は
WordPressの管理者メールアドレスが表示されます
プライベートなアドレスを管理者アドレスに設定しているとメールの返信先情報に表示されるので注意が必要です

本文も変更可能です。
変更例：

------------------------
※このメールはシステムからの自動返信です

[your-name]様
 
このたびはお問い合わせありがとうございます。
ご入力された内容は下記のとおりです。
==========
お名前: [your-name]
 
メールアドレス:  [your-email]
 
題名:   [your-subject]
 
メッセージ本文:   [your-message]
 
==========
追ってご連絡いたします。少々お待ちください。

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
==========

フォームの修正ができたら保存を押し、設定完了

このとき「安全でないメール設定が十分な防御策なく使われている。」
というエラーが出る場合がありますが、後述するスパム対策のGoogle提供ツール「reCAPTCHA」を導入することで解消できます。

固定ページにフォームを設置

「Contact Form 7」で作成した問い合わせフォームを固定ページに設置します。

先程作成した問い合わせフォームのショートコードをコピー

お問い合わせフォーム用の新規ページを作成します
固定ページ→新規作成
コピーしたショートコードを本文に貼り付け

タイトルを「お問い合わせ」
パーマリンクは「contact-form」等わかりやすいものに設定しましょう

プレビューで問い合わせフォームが表示されればOKです
「公開」で問い合わせページの作成が完了です。

テスト送信してみると設定しているアドレスにメールが届くはずです。

「reCAPTCHA」を導入してスパム対策

Contact Form 7お問い合わせフォーム設置時にスパム対策は必須です。ウイルス感染やbotからの攻撃をふさぐためスパム対策もしておきましょう

今回はGoogleが提供するツール「reCAPTCHA」を使った方法を解説します

Google提供ツール「reCAPTCHA」とは

botを判定する認証システムです
登録やログインの際に表示されたテキストを入力したり、
画像を操作したりしてロボットじゃないよと証明するああいうやつです。

reCAPTCHA v1,v2ではテキストや画像での認証でしたが、v3ではアクティビティの不審さでスコア判定されます。
そのため画像認証等の煩わしい作業でユーザーの操作の邪魔をすることなく、スパム対策が出来ます

デメリットとしては
・導入するとサイトにreCAPTCHAのマークが表示されるようになり見た目的に若干邪魔
・サイトパフォーマンススコアが下がる可能性がある
reCAPTCHAだけが原因か分かりませんが、私は導入後PageSpeed Insightsのモバイルパフォーマンスが10以上下がりました。

上記解決方法としては、問い合わせページのみに適用させる、という方法があります。
PHPファイルを編集し、問い合わせページにのみに表示されるよう設定します。
ただし、PHPファイルは重要なファイルなので、書き換えを間違えるとサイト全体に影響を与えてしまいます。
パフォーマンスの低下を許容しサイト全体に適用するか、検討したうえで導入してください。