WordPressに「お問い合わせフォーム」を設置するのはとても簡単です。コンタクトホームを作成するプラグインをインストールして、初期設定をするだけです。


この記事では、WordPressテンプレートに「お問い合わせフォーム」を設置するためのプラグインと作成する方法を説明します。


コンタクトフォームを設置する

シンプルで使いやすいお問い合わせフォームのプラグインは「Contact Form 7」です。






Contact Form 7をインストールして有効化する

ではさっそく、「Contact Form 7」をブログに設置していきましょう。まずはワードプレスの管理画面の左側にある「プラグイン」から「新規追加」をクリックします。

プラグイン新規追加-min

キーワードに「Contact Form7」と入力して検索します。インストールをクリックしたあと、有効化をクリックします。これでコンタクトフォームのインストールは完了です。

contact form 7 有効化-min

正常にインストールされると「お問い合わせ」が表示されますので、「コンタクトフォーム」をクリックします。

プラグインからコンタクトフォーム-min

コンタクトフォームのショートコードが表示されています。このコードをコピ―とペーストで「固定ページ」や「投稿」の「テキストウィジェット」に張り付ければ、コンタクトフォームが表示されます。

コンタクトフォームのショートコード-min

コピペするには、Windowsの場合「Ctrl+C」でコピー「Ctrl+V」でペースト、Macの場合は「command+C」でコピー「command+V」でペーストです。 


固定ページにお問い合わせを作成する

次に、固定ページに[お問い合わせ]を作成します。投稿ではなく、固定ページを使って下さい。これを作成しておくとグローバルメニューに追加することが出来ます。

お問い合わせ

管理画面の「固定ページ」から「新規追加」をクリックします。

固定ページから新規追加-min

タイトルを入力して、先ほどのショートコードをテキストエディタに貼り付けます。


お問い合わせ-min

画像ではチェックマークが入っていませんが、画面右上にある[インデックス/フォロー」の[noindexにする」にはチェックをいれます。お問い合わせフォームには、コンテンツがほとんど入っていませんので、検索エンジンに認識させないための対策です。


では、固定ページを表示させて、コンタクトフォームが出来ているか確認していきましょう。

お問い合わせフォームのひな形-min

このように表示されれば成功です。次にコンタクトフォームの初期設定をしていきます。


コンタクトフォームの初期設定

管理画面の「お問い合わせ」から「新規追加」をクリックします。

お問い合わせフォーム新規追加-min

するとこういったように表示されます。

コンタクトフォームを追加-min

まずはタイトルを入力します。お問い合わせフォームは目的に合わせていくつでも作成できます。たとえば、「サイトに関するお問い合わせ」「メルマガに関するお問い合わせ」など、管理しやすいように作成すると効率的だと思います。


ここではタイトルを「お問い合わせ」にしてみます。「コンタクトホーム」「質問箱」などお好みのタイトルを付けていきましょう。


次に、入力して欲しい項目を設定します。編集できる項目は4つのパネルに分かれています。


  • 「フォーム」:お問い合わせページに表示される項目の設定
  • 「メール」:ユーザーからお問い合わせを受けたときの送受信に関する設定
  • 「メッセージ」:ユーザーがお問い合わせメッセージを送信したときに表示されるメッセージの設定
  • 「その他の設定」:コードを追加して自由にカスタマイズするときの設定

まずは「フォーム」から設定します。

お問い合わせページに表示される項目の設定

始めに表示されるのは「フォーム」パネルですが、もし表示されていないときには、「フォーム」をクリックします。

コンタクトフォームのフォーム初期設定-min

初期設定では、「お名前」「メールアドレス」「題名」「メッセージ本文」と「送信」が設定されています。


まずは「メールアドレス」の設定をカスタマイズします。「email*your-email」を削除して「メールアドレス」をクリックします。

メールアドレス設定

この画面がでてきます。

メールアドレス生成ーフォームタグ

「項目タイプ」の□必須項目にチェックをいれます。「名前」はこのままです。


「デフォルト値」はユーザーが何を入力したらいいのかわかりやすくするために、例えば「メールアドレスを入力して下さい」「xxxxxxxxx@gmail.com」など入力すると良いと思います。


「このテキストを項目のプレースホルダ―として使用する」にチェックマークをいれます。ここにチェックマークを入れておくと、デフォルト値で設定した説明がフィ―ルドの内側に表示されます。


Akismetは、迷惑コメントなどを自動的に判定してくれるプラグインです。これもチェックします。


「ID属性」「クラス属性」はCSSの知識が必要になるので、空白にします。最後に「タグを挿入」のボタンをクリックします。すると、このようにコードが表示されます。

メールアドレス挿入

保存をクリックします。

メールアドレスをフォームに設定

すると「1件のエラーを検出しました。」と表示されますので「メール」のパネルをクリックします。

1件の設定エラー

「メール」パネルの中にある[your-email]を削除して、新しいメールアドレスのコードに置き換えます。

メールアドレスを置き換える

[your-email]は、この場合なら[email-899]に変更されています。ですので「メール」パネルで[your-email]になっているところは[email-899]に変更して下さい。最後に「保存」をクリックします。

保存-min

ではさっそく、お問い合わせページの画面を確認していきましょう。

お問い合わせフォームのカスタマイズ-min

こういった表示になれば、OKです。


次に「承諾確認」を設定します。お問い合わせを送信する際に、内容を確認してもらうことで、やり取りがよりスムーズになると思います。


まずは、[submit “送信”]の上に</br>(半角英数)といれます。</br>で余白を作成することができるので、バランスが悪いときには、後で調整して下さい。次に「承認承諾」のボタンをクリックします。

承諾確認をカスタマイズ

するとこの画面がポップアップ・ウィンドウで表示されるので、「同意条件」を入力していきましょう。

承認確認フォームの生成

「同意条件の項目」に、「こちらの内容でよろしいでしょうか?</br>Okの場合チェックマークをいれて送信ボタンを押して下さい」など、ユーザーに承諾を促すメッセージを入力します。


「オプション」「ID属性」「クラス属性」はすべてこのままです。最後に「タグの挿入」をクリックします。


するとこういった表示になります。

承諾確認の挿入後

「保存」をクリックします。

保存-min

チェックが入っていない場合は、お問い合わせが送信されない設定になっています。お問い合わせのページでテストメールをして設定が正常にされているか確認していきましょう。

承諾確認のボタンの設定-min

これで「承認確認」の項目は完了です。

ほかにも、「フォーム」をカスタマイズする方法はいくつもあります。基本の設定方法は「メールアドレス」や「承認確認」と同じです。

ユーザーからお問い合わせを受けたときの送受信に関する設定

ここでは、こちらの2つは設定しましょう。


  • プログ専用のメールアドレスを設定する
  • 自動返信を設定する

ブログ専用のメールアドレスを設定する

まずはコンタクトフォームの管理画面で、「メール」のタブをクリックします。

コンタクトフォームのメールの設定

ここで設定することは、「送信先」「送信元」「題名」「追加ヘッダー」などです。


初期設定では、Wordpressに登録しているメールアドレスが表示されているはずです。このままでも良いですが、サイト専用のメールアドレスを作成して、お問い合わせを一括で管理することをおすすめします。


「送信先」は、メールを受信するアドレス(送られてくるメールが届く所)になります。「送信元」は、お問い合わせに返信するためのアドレスです。


「送信先」と「送信元」は、同じメールアドレスで良いと思います。


「題名」には、サイトの名前が表示されています。ここは、そのままにしておきます。テストメールを送信して、変更が必要なときには変更して下さい。


「追加ヘッダー」は任意なので、空白でも問題ありません。続けて「メッセージ本文」をカスタマイズします。既定では「(サイトの名前)のお問い合わせフォームが送信されました。」とメッセージが入っているので、このままでも利用できます。


メールの設定2-min

「空のメールタグを含む行を出力から除外する」と「HTML 形式のメールを使用する」はこのままで、添付したいファイルがある場合はそれを添付します。特になければ空白です。


これでお問い合わせに返信するときのメール設定は完了です。

メールの自動返信を設定する

次は、お問い合わせを受けたことを相手に伝える自動返信メールを設定します。メールを送信しても、相手に届いているのかどうか、わからないこともあります。


「お問い合わせを受け付けました。」と自動でメッセージが送信できれば便利です。なので是非、活用してみましょう。


では、さっそく設定していきます。


先ほどと同じようにコンタクトフォーム管理画面の「メール」をクリックして、ずっと下まで画面をスクロールします。「メール(2)」があるので、このボックスにチェックマークを入れます。

メールの設定3-min

パッと、メール(2)の設定が現れます。

メール(2)-min

「送信先」はそのままにします。


「送信元」は自分のアドレスになります。


「題名」は「問い合わせを受け付けました。」に変更します。


「追加ヘッダー」には、空白か自分のメールを受信するときのアドレスを入れます。

メール(2)-1-min

「メッセージ本文」には返信するまでのおおまかな日数など、記載すると良いと思います。最後に「保存」をクリックしたら完了です。

保存-min

これでお問い合わせの受理を自動メールで送信できます。お問い合わせのフォームが上手く機能しているかテストメールを送信して確認してみましょう。

メールは送信されました。-min

これが表示されればO.K.です。


それぞれのメールボックスの確認をする

お疲れ様でした。これでコンタクトフォームの設定は完了です。後は送信ボックスと受信ボックスが機能しているか確認するだけです。


どこかで誤っていると、せっかく設定しても機能しないことになるので、ここは怠らずにしていきましょう。


設定が正しく行われている場合、それぞれのメールボックスに設定したとおりのメールが届きます。ここで作成したメッセージがお問い合わせをしたときに記入したメールアドレスに届いた場合、このようになります。

お問い合わせを受け付けました-min

お問い合わせを受けると、受信ボックスにはこちらのメールが届きます。

メールが送られてきたときのメッセージ-min

「メッセージ」と「その他の設定」のパネルは、とくに変更を加えなくても利用できます。複雑な設定もできますが、シンプルなお問い合わせフォームでも十分に活用できると思います。是非活用してみて下さい。