WordPressブログに問い合わせフォームを設置する方法

WordPressでブログを作ったので問い合わせフォームを設置したい。

フォーム用のプラグインはContact Form 7でいいの?

こんな疑問にお答えします。

問い合わせフォームからメールが届くようになるのはサイトがある程度ボリュームが出てきてアクセスが増えだしてからです。

アクセスの少ないうちは設置してもメールが届くということはほとんどありません(経験上)。

とはいえ、問い合わせを受ける体制を整えておかないと、思わぬところで損をしたりすることもありますので、必ず設置しておきましょう。

このページではメールフォームの設置方法をいくつか紹介します。

このページの内容(目次)

お問い合わせフォームは設置するべき

お問い合わせフォームは設置するべき

アクセスが少ないうちはお問い合わせフォームを設置しても一切メールが来ることはありません。

そのため、メールフォームを設置する必要性をあまり感じない方もいらっしゃることでしょう。

下記のような理由から、アクセスの有無にかかわらずメールフォームは設置しておくべきです。

  1. 【最重要】設置していないと、運営者との連絡の取りようが無いので最悪連絡がサーバー会社に行き、大きなトラブルに発展する可能性が出てくる
  2. Googleアドセンスや広告の審査に通りやすくなる
  3. 企業から良いアプローチをもらえるきっかけにもなる
  4. まともに運営されているサイトであることがわかる

特に重要なのが1番目のケースです。どんなに気を付けて運営していても、自分でも気づかないうちに何らかの問題のある発信をしてしまっていた場合に、運営者との連絡ができないと、サーバー会社を突き止めて連絡がいったり、最悪警察沙汰になるなどするかもしれません。

例えばスマホで撮影した写真を掲載していた時に、写り込んでしまってはいけないもの・人が映ったままになっており、権利者から削除または加工の要請が来るような場合です。

肖像権や著作権、あるいは使用権のような権利関係で問題が出た際に、運営者と連絡が取れて迅速な対応を行えば問題にならずに済む場合も多いのです。

しかしそもそも連絡手段を用意していないとなると、法的手段に出られてしまったりペナルティを課されることがあるので、連絡手段は何かしら用意しておくのがベターです。

他にも、広告の審査に通りやすくなるなど、設置するのにかかる手間暇のデメリットよりも、設置することによるメリットがはるかに大きいです。

事前準備:問い合わせ用のメールアドレスを作成する

メールアドレスを作成する

問い合わせフォームを設置するにあたっては、受信可能なメールアドレスを用意する必要があります。

最も良いものはGmailやフリーメールアドレスではなく、サイトのアドレスと同じドメインのメールアドレスや、運営会社のドメインのメールアドレスを用意することです。

レンタルサーバーを契約している方なら管理画面から簡単に作成可能です。

また、通常のやり取りのメールと分けておくと、スパムメールなどに埋もれる可能性が減り、最悪別のメールアドレスにも切替やすくなるのでおすすめです。

アドレスの例としては、

  • info@ドメイン名
  • mail@ドメイン名
  • no-reply@ドメイン名
  • inquiry@ドメイン名
  • 運営者名@ドメイン名

のようなものを作成するのが一般的です。

メールが届きさえすればいいので@の前の部分は極論何でも構いません。

メールフォームの項目は何が必要?

メールフォームの項目

メールフォームを設置する際にどの項目を設置するべきか、という点ですが、絶対必須なのは送信者のメールアドレスとメッセージです。

メールフォームからの問い合わせを行う際に、相手に返事を返すアドレスがなくては返事ができなくなるため、送信者のメールアドレスだけは絶対必須です。

特に強いこだわりがないのであれば以下の4つを設定しておくと良いでしょう。

  • 送信者名
  • 件名
  • メールアドレス
  • 本文

送信者の年齢・性別・本名・電話番号など、あまり多くの個人情報を収集してしまうと、プライバシーポリシーへの記載なども必要になり、送信された情報を管理する責任が生じたりもしますので、シンプルな項目だけにしておけばいいでしょう。

お問い合わせフォームを作る方法4パターン

問い合わせフォームを用意するには以下の4パターンがあります。

  1. WordPressのプラグインを使う
  2. Googleフォームなど外部のフォームサービスを利用する
  3. 一般的なメールフォームプログラムを別に設置する
  4. メールアドレスを公開する

WordPressのプラグインとして定番なのはContact Form 7を利用する方法です。

ただ、このページではContact Form 7よりもMW WP Formの利用を推奨しています(後述)。

プラグインを使わずに外部のメールフォーム作成サービスを利用することも可能です。無料で使えるため、Googleフォームが人気です。

一般的なメールフォームプログラムを利用する場合はメールフォームプロというCGIがおすすめです。高機能な商用利用可のフリーソフトです。ただし、設置にあたってはパーミッションの設定など、CGIの知識が必要になります。

メールフォームの形式を取らずに、単に連絡用のメールアドレスを公開する方法もありますが、スパムメールや信頼性の観点からあまりお勧めではありません。

Contact Form 7よりMW WP Formの方がおすすめな理由

WordPressでメールフォームを作る場合、真っ先に候補に上がるのがContact Form 7です。

非常に有名なプラグインで、利用しているサイトも非常に多いです。

ただし、下記の点からあまりお勧めではありません。

全ページで使用されないCSSを出力してしまう

Contact Form 7は導入すると、全ページに専用のCSSファイルを読み込ませてしまいます。

<link rel='stylesheet'   href='https://ドメイン名/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.4&#038;theme=4.7.4'  media='all'>

上記のようなタグをメールフォームを設置していないページでも読み込ませてしまうため、むやみに通信量が増えてしまいます。

ページの表示速度はSEO対策の上でも重要になりますのでできるだけ余計なコードを出力しない方が望ましいです。

確認画面を出すには別のプラグインが必要

Contact Form 7は標準の状態では送信内容の確認画面を表示することができません。

別途、Contact Form 7 add confirmというプラグインを導入しないといけなくなるため、プラグイン数がむやみに増えてしまいます。

プラグインは導入数が増えるとサイトスピードが低下するため、出来るだけ少ないほうが良いです。

細かい制御がほぼできない

メールフォームのバリデーションを行う機能がContact Form 7はそれほど高くはなく、必須にすることはできますが、チェックのルールを細かく指定することができません。

送信内容を制御できないと、誤った内容で送信されてしまい、内容が正しく伝わらずに結果的にトラブルに発展してしまった、といったことになりかねません。

MW WP Formの設置方法

Contact Form 7はインストール直後にフォームが一つ自動でセットされ、固定ページにも1ページ追加されて、ほとんど何もしなくても問い合わせのページを作成することができます。

MW WP Formはインストールした直後には入力フォームは何も作成していない状態ですので、各種設定が必要です。完全に初心者の方にとっては少し難易度が高いかもしれません。

そこで、下記に、設定例を記載します。

コピペすれば、お名前・件名・メールアドレス・内容のシンプルなフォームが出来上がります。

STEP
MW WP Formをインストール

プラグインの新規追加画面に移動し、検索窓に「MW WP Form」と入力して検索します。

出てきたら<今すぐインストール>を選択し、<有効化>ボタンを押してください。

MW WP Formのインストール
STEP
フォームの新規作成

インストール直後はフォームは一つも作られていないので、新規作成します。

MW WP Formのフォームの新規作成
STEP
フォームの編集
フォーム本体の設定例

フォームの内容を入力していきます。

タイトルは識別名なので何でも構いません。「問い合わせフォーム」とでも入力しておけばOKです。

本文部分が固定ページに埋め込まれるフォームの部分です。

下記をコピペで貼り付けてください。

<div style="text-align: center;">
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<th>お名前</th>
<td>[mwform_text name="お名前" size="60"]</td>
</tr>
<tr>
<th>件名</th>
<td>[mwform_text name="件名" size="60"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[mwform_email name="メールアドレス" size="60"]</td>
</tr>
<tr>
<th>内容</th>
<td>[mwform_textarea name="本文" cols="50" rows="5"]</td>
</tr>
</tbody>
</table>
[mwform_backButton value="戻る"][mwform_submitButton name="mwform_submitButton" confirm_value="確認画面へ" submit_value="送信する"]

</div>
STEP
送信完了ページの編集
送信完了ページの設定例

送信完了時に画面に表示される内容を編集します。

送信後に何を送ったのかを表示するのと、トップページに戻るリンクをつけたシンプルな完了画面で良ければ下記をコピペしてください。

貼り付ける際は、テキストモードで貼り付けてください

<div style="text-align: center;">
以下の内容で送信しました送信しました。

送信内容の控えを{メールアドレス}に送信しましたのでご確認ください。

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<th>お名前</th>
<td>{お名前}</td>
</tr>
<tr>
<th>件名</th>
<td>{件名}</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>{メールアドレス}</td>
</tr>
<tr>
<th>内容</th>
<td>{本文}</td>
</tr>
</tbody>
</table>
<a href="/">トップページに戻る</a>


</div>
STEP
管理者宛のメールの内容を編集
管理者宛メールの設定例

問い合わせフォームからの送信内容で管理者に届く内容を編集します。

設定箇所が多いので順に設定していきます。

{中括弧}で囲った内容がフォームの内容に置き換わります。

Reply-toはメールの受信後返信ボタンを押したときに宛先に設定されるアドレスです。送信者に返信したいので、入力された{メールアドレス}を指定します。

送信先受け取るメールアドレスを指定します
件名問い合わせ:{件名}
送信者{お名前}
Reply-to{メールアドレス}
送信元{メールアドレス}
本文問い合わせフォームからの問い合わせ

■送信者
{お名前}

■件名
{件名}

■メールアドレス
{メールアドレス}

■本文
{本文}

管理者(つまり自分)宛のメールの内容なので、端的にわかりやすい感じにしておくと良いでしょう。

STEP
自動返信メールの内容を編集
自動返信メールの設定例

続いて送信者に送信される自動返信メールの編集を行います。

送信者宛になるので、内容もそれにあわせて丁寧な内容にしておきましょう。

件名お問い合わせを送信しました(サイト名)
送信者ブログ運営者として公開している名前
Reply-to管理者のメールアドレス
本文この度はお問い合わせありがとうございました。

※このメールは正常に送信が完了した際に送信している自動返信メールです。

担当者が確認次第、折り返しご連絡させていただきますので今しばらくお待ちくださいませ。

【送信内容】
■お名前
{お名前}

■件名
{件名}

■メールアドレス
{メールアドレス}

■お問い合わせ内容
{本文}
自動返信メールメールアドレス
送信元管理者のメールアドレス
STEP
バリデーションルールの設定
バリデーションルールの設定

最後に、バリデーションルールを設定します。バリデーションとは、入力チェックの意味です。

ここでは、お名前・メール・本文を必須にし、メールについてはメールの形式が正しいかのチェック、本文については最低5文字以上入力されていないと送信できないようにします。

<バリデーションルールを追加>ボタンをクリックします。

お名前のバリデーションルール設定

上記のようなウィンドウが開くので、適用する項目に「お名前」と入力し、<必須項目>にチェックを入れます。

続いてさらに<バリデーションルールを追加>ボタンをクリックします。

メールアドレスのバリデーションルール設定

メールアドレスのチェックを行うので、同様に項目名には「メールアドレス」と入力し、<必須項目>と<メールアドレス>という欄にチェックを入れます。

最後に本文の内容を登録します。

本文のバリデーションルール設定

項目名を「本文」、<必須項目>にチェックを入れ、最小文字数欄に「5」と入れます(何文字以上の入力を必要とするかは適宜変更してください)。

以上で、メールフォームの設定はすべて完了です。

STEP
問い合わせページを作成(固定ページを新規作成)

問い合わせフォームの「定義」はこれで完了ですが、呼び出すページを決めていませんので、固定ページを新規作成してください(既に問い合わせページを用意しているページはそのページで構いません)。

先ほど作成したフォームの画面またはフォームの一覧画面に「フォーム識別子」という項目があるはずです。そこに表示されているショートコードをコピーします。

フォームを表示する固定ページにそのショートコードのみを貼り付けて公開すれば設定はすべて完了です。

STEP
フォームの確認とテスト送信

作った固定ページ(問い合わせページ)を開き、フォームが表示されているか確認してください。

ただしく表示されていたら仮の内容で構いませんので入力してテスト送信します。メールアドレスだけは実在の自分が受信できるアドレスで試してください。

フォームの確認画面・並びに送信完了画面まで進み、問題のある箇所がなかったか確認します。

もし内容や挙動に不備があればフォームの設定画面で再調整します。

STEP
テスト送信の受信

送信が完了したらメールを受信してみてください。送信者や送信内容な度を確認し、返信ボタンを押した時に送信者の宛先がアドレスにセットされているかなど確認していきましょう。

送信内容にも問題がなければ設置完了です。

ステップ数に直すと10ステップと少し多いように感じるかもしれませんが、サクサク準備を進めていけば10分以内で設定は完了できるはずです。

フォームの内容などは最小限の内容にしてありますので、お好みで自由にカスタマイズしてください。

フォームへのリンクはどこからするのがおすすめ?

フォームページへのリンクは、フッタかサイドバーに設置するのがおすすめです。

ブログのナビゲーションは、使用するWordPressテーマによって異なりますが、主に以下のようなものがあります。

グローバルナビ

サイトのメインメニューともいえるものです。ヘッダの中に設置されることが多いメニューです。PC版だとロゴマークの右側か下に設置されることが多いです。スマホ版になると、テーマによっては水平スクロールする場合と、メニュー内に格納される場合に分かれます。

ヘッダメニュー

テーマによっては設置できないものも多いですが、ロゴマークの上に帯を設け、そこにメニューを設置する場合です。

サイドバー

ほとんどのブログでは右側にサイドバーを設置し、カテゴリメニューや新着記事、人気記事などを配置します。ブログによってサイドバーの使い方は異なり、メインメニューの一つとして使う場合もあれば、表示している記事の補助メニューになる場合もあります。

フッターメニュー

フッタに設置するメニューで、主にサイト全体に関わる項目のうち、メインコンテンツに関係しない内容で設置されます。

多くの場合、サイトマップや問い合わせフォーム、プライバシーポリシーなどを配置することが多いです。

上記の各種メニューの中でメールフォームを設置するなら補助的なメニューにあたるフッターメニューか、メインメニューの役割をサイドバーに持たせている場合はサイドバーに設置すると良いでしょう。

Googleフォームを使ったメールフォームの設置方法

プラグインを使ったメールフォームの設置と比べ、サーバー側のリソースを使わないことが外部サービスを使ったメールフォームの設置方法です。

主に使われることが多いのはGoogleフォームです。

Googleフォームはあまり自由度が高くなく、やや使い勝手は劣りますが、ほとんどメールが来ないなどの理由があればあえてGoogleフォームを使うのも手です。

フォームを使わずメールアドレスを公開する

メールフォームそのものを使用せず、メールアドレスを公開する方法です。

メールアドレスをそのまま記載してしまうと、スパムメールが届く原因になってしまうため、多くの場合、@マークの部分を別の記号に置き換えて案内します。

メールフォーム自体を使わないため、やや信頼性には欠けるのと、記入してほしい内容を指定することができないので1件1件見るのが大変というデメリットはあります。

メールフォームを本格的に設置しようと思えるだけの情報量がサイトにまだない場合や、取り急ぎの連絡手段を提示する際によく用いられます。

ほとんどのサイトがメールフォームは設置しますので、設置していないとやや信頼性に欠けるのではないかなと思いますので、あまりお勧めではありません。

まとめ:メールフォームの設置は必ずしておきましょう

メールフォームを設置する方法をいくつか紹介しました。

基本的にはWordPressを使っているならプラグインを使ったメールフォームを使えばOKです。

Contact Form 7は色々不都合もありますが、情報源も多く、シンプルなプラグインですので、気に入るようであれば使用しても良いでしょう。

何かしら運営者と連絡を取る手段は必ず提供しておくことをお勧めします。

このページの内容(目次)
閉じる