WordPressお問い合わせフォーム無料プラグイン『Contact Form 7』

自分のブログに連絡用のメールアドレスを載せたら大量に迷惑メールが届くようになった・・・。
かと言ってメールアドレスを載せないのは不親切だし・・・。


あなたのブログにコンテンツが充実してくると、必ずと言っていいほど困るのが迷惑メール。


毎日何通も届くので非常に鬱陶しいですよね。


もしブログ訪問者からの問い合わせメールが迷惑メールに埋もれて見落としてしまっていたら、目も当てられません。


そんな悩みを解決するのがお問い合わせフォーム


そもそも迷惑メールが届く原因は「世界中の誰もが見れるブログにメールアドレスを載せてしまっていること」なので、ブログにメールアドレスを載せなければ迷惑メールは届きません。


しかしそれではブログ訪問者があなたに質問や感想のメールを送信できなくなってしまうので、アドレスを載せない代わりにお問い合わせフォームを設置しましょうということです。


WordPressでは『Contact Form 7』という無料プラグインを使うことで、簡単にお問い合わせフォームを設置することができます。


以下目次の手順で『Contact Form 7』のインストール・設定をしていきましょう。

  1. インストール手順
  2. フォーム項目設定手順
  3. 内容転送設定手順
  4. 自動返信メール設定手順
  5. お問い合わせフォームの設置
  6. サンクスページ設定手順



ちなみに私もContact Form 7を使用してお問い合わせフォームを設置していますが、設置してからは迷惑メールが激減しました。

設置するのが遅くて迷惑メール0にはならなかったですけどね・・・(涙)


> お問い合わせ (※別ウィンドウまたは別タブで開きます)
Contact Form 7




インストール手順

まず初めにContact Form 7をインストールします。


WordPress管理メニューを開き「プラグイン」メニューを選択します。
Contact Form 7


もし既にContact Form 7がインストールされており、『有効化』リンクが押せる状態になっていたら有効化をクリックして次の手順に進んでください。
Contact Form 7


Contact Form 7がインストールされていない場合、まず下図のプラグイン[新規追加]ボタンをクリックします。
Contact Form 7


「Contact Form 7」で検索し、[今すぐインストール]します。
Contact Form 7


インストールが完了したら[プラグインを有効化]してください。
Contact Form 7


以上でContact Form 7のインストールは完了です。


続いて初期設定を行いましょう。



フォーム項目設定手順

インストール完了後、管理メニューに追加された「お問い合わせ → コンタクトフォーム」を選択し、その後[新規追加]してください。
Contact Form 7

Contact Form 7


まず最初に設定のタイトルを付けます。
タイトルはあなたが管理するためだけのもので、ブログ訪問者には見えないものなので、何でも構いません。
Contact Form 7


タイトルを入力したら、とりあえず保存しましょう。
Contact Form 7


次からはお問い合わせフォームの項目を設定していきます。
項目はあなたが自由に作成することができますが、絶対に必要なのは以下5つの項目です。



これらの項目は私のブログのお問い合わせフォームに全て含まれているので、私のお問い合わせフォームを例に各項目を作成してみましょう。
Contact Form 7



名前(必須入力)

ブログ訪問者の名前(ニックネーム)を入力する1行テキストの項目です。

問い合わせの返信に必要となるので必須項目とします。
加えて、ブログ訪問者に
「ここが名前入力欄だな」
ということをひと目で分かってもらえるように入力例を表示させます。

まず下図の[テキスト]ボタンをクリックします。
Contact Form 7

クリックすると詳細設定画面が表示されるので、下図①~④を設定します。
Contact Form 7

① 項目タイプ
[必須項目]にチェックします。
チェックしなければ必須項目になりません。

② 名前
この項目の名前(コントロール名)を入力します。
名前は他の項目と重複させることはできません。
名前は後の手順で使用するので、ブログ訪問者の名前入力欄と分かるような名前にしてください。
よく分からない場合は『your-name』とすればでOKです。

③ デフォルト値
④ このテキストを~~使用する
デフォルト値には例として表示したい文字(例では「山田 太郎」)と入力します。
また[このテキストを項目のプレースホルダーとして使用する]にチェックします。


設定ができたら[タグを挿入]ボタンをクリックしてください。
Contact Form 7


[タグを挿入]ボタンをクリックすると下図の位置に
[text* your-name placeholder “山田 太郎”]
という文字が挿入されます。
Contact Form 7


[text* your-name placeholder “山田 太郎”]
という文字を、もともと設定されている
[text* your-name]
に上書きして、下図のようにしてください。
Contact Form 7


これでブログ訪問者の名前を入力する項目は完了です。



メールアドレス(必須入力)

ブログ訪問者のメールアドレスを入力するアドレス専用の項目です。

問い合わせの返信に必要となるので必須項目とし、ブログ訪問者の名前と同様に入力例を表示させます。

まず下図の[メールアドレス]ボタンをクリックします。
Contact Form 7

詳細設定画面が表示されるので、ブログ訪問者の名前項目と同様に下図赤枠を設定して[タグを挿入]ボタンをクリックしてください。
Contact Form 7

[タグを挿入ボタン]をクリックすると
[email* your-email placeholder “contact@sample.co.jp”]
という文字が挿入されるので、もともと設定されている
[email* your-email]
に上書きして、下図のようにしてください。
Contact Form 7


これでメールアドレスを入力する項目は完了です。



題名(任意入力)

問い合わせ内容の題名を入力する1行テキストの項目です。

ブログ訪問者の名前やメールアドレスと違い、入力しなくても良い項目とします。

題名の項目はもともと
[text your-subject]
という設定があるので、そのまま使えばOKです。
何も設定することはありません。
Contact Form 7



本文(必須入力)

問い合わせ本文を入力する複数行テキストの項目です。

本文が空白ということはありえないので必須入力とします。

もともと設定されている
[textarea your-message]
という文字を
[textarea* your-message]
に変更するだけでOKです。
(コントロールタイプの後ろに*を付け足すだけで必須入力になります)
Contact Form 7



送信ボタン

ブログ訪問者が問い合わせ内容を送信するためのボタンです。

これが無いとメッセージ送信ができないので、必ず設置してください。

もともと設定されている
[submit “送信”]
をそのまま使えばOKです。

ボタン名称を変更したい場合のみ”送信”の文字を変更してください。
Contact Form 7


以上で項目の設定は完了です。
ここまでの設定を保存しましょう。
Contact Form 7


続いて問い合わせ内容の転送設定をしましょう。



内容転送設定手順

お問い合わせフォームの項目が完成したら、次は問い合わせ内容をあなたのメールアドレスに転送するよう設定します。


この転送設定にはフォーム項目設定手順の手順で設定した
各項目の名前(your-nameとか)
が必要になりますので、フォーム項目設定が完了してから転送設定をしてくださいね。


まずコンタクトフォーム編集画面の[メール]タブに移動します。
Contact Form 7


[メール]タブに移動したら下図①~④を設定してください。
Contact Form 7


① 送信先
転送先とするあなたのメールアドレスを入力します。
転送先を複数指定したい場合は、カンマ(,)区切りして複数メールアドレスを入力してください。


② 送信元
転送メールの送信元として表示される内容を入力します。

よく分からなければ下図のように
[your-name] <あなたメールアドレス>
と入力すれば問題ありません。
Contact Form 7


③ 題名
転送メールの題名を入力します。

私の場合は分かりやすいように
『「問い合わせがありました」+ 問い合わせの題名』
という題名にしたかったので下図のように設定しています。
Contact Form 7


④ メッセージ本文
転送メールの本文を入力します。

本文には以下3つの項目を必ず含めるようにしてください。

  • ブログ訪問者の名前
  • ブログ訪問者のメールアドレス
  • 問い合わせ本文

参考までに、私は以下のように設定しています。
よく分からなければ以下の設定をそのままコピー&ペーストして使ってください。

ただし、各項目の名前(your-nameやyour-messageなど)はあなたの設定に応じて変更してくださいね。

差出人: [your-name] <[your-email]>

題名: [your-subject]

メッセージ本文:
[your-message]



以上で転送設定は完了です。
ここまでの設定を保存しましょう。
Contact Form 7


続いて問い合わせに対する自動返信メールを設定しましょう。



自動返信メール設定手順

Contact Form 7の設定上、自動返信メールは必須ではありません。

ですが以下の理由から、私は必須設定だと考えています。

  • ブログ訪問者のメールアドレス入力確認
  • お問い合わせフォームに入力してもらったブログ訪問者のメールアドレスが正しいか確認できます。
    もし入力に間違いがあれば自動返信メールが届かないので、ブログ訪問者自身が入力間違いに気付くことができます。

  • ブログ訪問者側に問い合わせ内容を残す
  • 通常のメールと違い、ブログ訪問者側には問い合わせ内容が残りません。
    メールのような「送信済みボックス」みたいなものが無いからです。
    代わりに内容を含めて自動返信することで、内容をブログ訪問者側に残してあげることができます。

せっかく問い合わせしてくれたブログ訪問者のことを考えて、なるべく自動返信メールを設定してあげたいですね。


それでももしあなたが自動返信メールは不要と判断されるようでしたら次の手順に進んでください。


まずコンタクトフォーム編集画面[メール]タブの
[メール (2) を使用]
にチェックします。
Contact Form 7


[メール (2) を使用]にチェックすると詳細設定画面が表示されるようになりますので、下図①~④を設定してください。
Contact Form 7


① 送信先
自動返信メールの送信先、つまりお問い合わせフォームに設置したメールアドレス項目の名前を入力します。

私の場合は送信先にブログ訪問者の名前を合わせて表示させたかったので、
[your-name] さん <[your-email]>
と設定しています。


② 送信元
自動返信メールの送信元、つまりあなたの名前とメールアドレスを入力します。


③ 題名
自動返信メールの題名を入力します。

自動返信メールであることが分かるよう、タイトルに
『自動返信』
のような文字を含めておくと良いでしょう。


④ メッセージ本文
自動返信メールの本文を入力します。

本文には以下の内容を含めると親切で、ブログ訪問者からの印象も良くなります。

  • 問い合わせてくれたことへのお礼
  • 返信の期限
  • イタズラでメールアドレスを使わてしまった場合の対処方法
  • 問い合わせの題名や本文

以上を踏まえて、私は以下のとおりに設定しました。
もし良ければ参考にしてください。

※※ このメールは自動返信です ※※

[your-name] さん

この度はお問い合わせ頂きありがとうございます。
2日以内に返信差し上げますので、今しばらくお待ち下さい。

もし本メールに心当たりが無いようでしたら、お手数ですが
~~~@~~~~~.net
までその旨ご連絡いただけると幸いです。

***** お問い合わせ内容 *****

題名:[your-subject]

[your-message]

****************************



以上で転送設定は完了です。
ここまでの設定を保存しましょう。
Contact Form 7


次はいよいよ作成したお問い合わせフォームを設置します。



お問い合わせフォームの設置

お問い合わせフォームが完成したら、あなたのWordPressのお問い合わせ用固定ページにお問い合わせフォームを設置します。


設定画面に下図のようなコードが表示されますので、これをコピーして固定ページに貼り付けて保存してください。
Contact Form 7

Contact Form 7


以上でお問い合わせフォームの設置は完了です。

自分で問い合わせフォームを使ってみて、自動返信や転送が正常に動作するか、内容に問題はないか確認してくださいね。


さて、次の手順は必ずしも設定しなくてよい内容になりますが、ブログ訪問者からの印象が良くなるような設定もありますので、興味があったらぜひ設定してみてください。



サンクスページ設定手順

お問い合わせフォームで送信すると、下図のようなメッセージが表示されます。
Contact Form 7


表示されるメッセージの内容はある程度変更可能であり、このままでも問題はありません。


ですがもう少し送信後の注意事項などを表示してあげたほうが親切で、ブログ訪問者にとっても見やすいブログになるでしょう。


例えば・・・

  • 自動返信したのでメールを確認してほしい
  • 返信が届いていなかったら迷惑メールフォルダを見てほしい
  • 迷惑メールフォルダにも返信が届いていなかったらメールアドレスが間違っているかも・・・

といった注意事項なんかが表示されると親切ですね。


ここまで多くのことを表示しようと思うと、Contact Form 7の設定だけでは無理です。


ではどうするかと言うと
お問い合わせフォーム送信後に注意事項などを書いた別のページ
(サンクスページ)へ自動的に移動する

という仕掛けをしておけば解決ですね。


まずはあなたのWordPressに固定ページでサンクスページを作成しましょう。


私のサンクスページは以下になります。
> お問い合わせ完了 (別ウィンドウまたは別タブで開きます)


サンクスページが作成できたら、Contact Form 7設定画面の[その他の設定]タブに移動してください。
Contact Form 7


[その他の設定]タブに移動したら以下のコードをそのままコピー&ペーストし、
[サンクスページのURL]
という箇所をあなたのページのURLに変更して設定を保存してください。

on_sent_ok: “window.location.href =’サンクスページのURL’;”



例えば私は下図のように設定しています。
Contact Form 7


これでお問い合わせフォーム送信後にサンクスページへ自動で移動するようになりました。

念のため、正しく動作するかテストしておいてくださいね。






Contact Form 7以外のWordPressプラグインの紹介はこちら。
> ブログコンテンツ一覧

メールマガジンもやってます。よろしければ登録ください。
> 登録はこちら

このページの先頭へ