超簡単!WordPressでの問い合わせページの作り方

このページでは問い合わせページの作り方を紹介します。問い合わせページがあると少し本格的なホームページに見えてきますよね!

問い合わせページ作成はプラグインを利用しよう

WordPressならぜひプラグインを利用しましょう。ものすごく簡単にお問い合わせページを作成することが可能です。多くの方が利用しているプラグインであれば動作も安定していますので安心してしようすることができます。

contact form 7プラグイン

オススメは「contact form 7」です。contact form 7はお問い合わせフォームを作成してくれるプラグインであり、下の図の囲った部分を丸々作成してくれます。

スポンサーリンク

contact form 7のインストール

まずプラグインのインストールと有効化を行いましょう。ダッシュボードのプラグイン新規追加画面に検索フォームがありますので「contact form 7」と入力して実行すればこのプラグインを見つけることができます。

「今すぐインストール」「有効化」のボタンを押すことによりインストールと有効化が完了します。

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

次にお問い合わせフォームの設定を行います。「contact form 7」を有効化してやればダッシュボードのメニューに「お問い合わせ」が追加されていますので、そのサブメニューである「コンタクトフォーム」を選択します。

すでにサンプルの「コンタクトフォーム1」が用意されていますのでこれを選択しましょう。

コンタクトフォームの編集画面が表示されます。

この編集画面では主に下記の3つの設定を行うことができます。

  • 問い合わせフォームの項目
  • 問い合わせフォームからの受信メール
  • 問い合わせフォームの実行結果によるメッセージ

一つ一つ見ていきましょう。

フォームの項目設定

フォームパネルから設定可能です。

ここではお問い合わせフォームの入力欄の追加や削除が可能です。

各々のフォームは下図のように「項目名」と「タグ」から成り立っています。

項目名はフォームに表示される名前です。タグはその入力欄に入力されるデータの「種類」およびデータの「名前」から成り立っています。上の例だと、「email」は入力されるデータがメールアドレスであることを示しています。さらに「*」がついている場合はその入力欄への入力が必須であることを示しています。「your-email」が名前であり、入力されたデータを参照するのに必要な情報になります。これはメール設定の方で出てきます。

実際に電話番号入力欄を作成してみましょう。まずフォームに追加する項目名を決めます。続いてフォームを追加したい場所に<label></label>をまず記載し、その<label>と</label>の間に追加したい項目名を記入します。項目名を「電話番号」にする場合は下図のようになります。

続いて項目名の横をクリックしてカーソルを合わせたのち、上側のボタン群から「電話番号」ボタンを押しましょう。そうすると下のような設定画面が現れます。

ここでは主に「タグ」に関する設定を行います。必須項目にするかやデフォルト入力等を設定することができます。設定後、「タグを挿入」ボタンを押すとカーソル部分にタグが自動的に挿入されます。お客様が入力された文字列を参照するのに「名前」が「メール設定」で必要になりますので覚えておきましょう。

この状態で保存してやることで、電話番号入力欄が追加されます。

MEMO
入力欄が多いと問い合わせする労力や問い合わせの敷居が上がってしまいます。必要最小限に項目は絞っておく方がベターだと思います

メール設定

メールパネルから設定可能です。

問い合わせフォームから問い合わせを受けた場合は、その内容がメールとしてあなたに届けられます。ここではそのメールの送信先やメールの題名や内容を設定できます。

お客様からの問い合わせに確実にレスポンス取れるように設定を行いましょう。

送信先

ここにはメールを受け取るメールアドレスを入力します。私は他のメールと混ざらないようにこれ専用のメールアドレス取得しました。

送信元

フォームで送信された際には、ここに入力されたメールアドレスから送信先メールアドレスにメールが送信されることになります(実際に送信してくれたお客様のメールアドレスからメールが送られてくるわけではありません)。

送信先メールアドレス側はこの送信元アドレスからのメールを確実に受信できるようにしておきましょう。例えば拒否設定していないかは確認しておきましょう。

実際のメールアドレスは<〜>部分のみになります。その前の部分は送信者の名前を誰にするかの設定ですので、デフォルトのままでも良いですし、問い合わせを受けたことが分かりやすい名前にしても良いと思います。

名前部分はデフォルトで[your-name]が入力されていますが、これはフォームから送信した方の名前が表示されるという意味のコマンドになっています。

私はここはアドレスも名前もデフォルトのままで設定しています。

題名

ここは送られてくるメールの題名を設定します。問い合わせを受けたことが分かるような題名が良いと思います。

デフォルトで後半部分に記載されている[your-subject]はフォームから送信された問い合わせの題名が表示されるという意味のコマンドです。

追加ヘッダー

ここでは送信されてくるメールのヘッダーに追加を行う項目を設定します。特にこだわりがなければデフォルトのままで良いです。

デフォルトで記載されている下記は、メールの返信時にそのメールのメールアドレスに返信するのではなく、フォームから送信してくれたお客様に返信するように自動的に返信メールを設定してくれるヘッダーになります。

Reply-To: [your-email]

メールを返信したいのは「送信元」で設定したメールアドレスではなく「お客様のメールアドレス」なので、このヘッダーはそのまま残しておくことをオススメします。

メッセージ本文

送信されてくるメールのメッセージ本文の設定が可能です。

[ ]で囲まれば部分は、「フォーム設定」で出てきた「名前」です。実際に送られてくるメールでは、[ ]部分が、その「名前」に対応した入力欄に入力された文字列やメールアドレス等に置き換えられています。もし「フォーム設定」で入力欄を追加している場合は、メッセージ本文に[名前]を追加しておきましょう。

例えば上のように電話番号を追加した場合は、名前がtel-119だったので、下図の囲った部分を追加して本文設定を行います。

[tel-119]部分は実際に送られてくるメールではお客様が入力した「電話番号」に置き換わる事になります。

メッセージ設定

メッセージパネルではコンタクトフォームの送信結果に応じて表示するメッセージの設定を行います。

例えば下記のような場合にどのようなメッセージを表示するかを設定できます。

  • メッセージが正常に送信された場合
  • ユーザー入力が最大許容文字数を超える項目がある
  • 入力必須の項目が入力されていない

必要に応じてメッセージの設定を行いましょう。

フォームの貼り付け

設定が全て完了したら「保存」ボタンで設定の保存を行います。

次は固定ページへのフォームの貼り付けを行いましょう。

まず下図で囲った部分のショートコードをコピーします。

続いて固定ページの追加を行います。ダッシュボードの「固定ページ」→「新規追加」から追加が可能です。

そして本文に先ほどコピーしたショートコードを貼り付けします。

題名などはお問い合わせページにふさわしい名前を付けておきましょう。パーマリンク等の設定も行なってください。

一通り設定が完了したら公開ボタンを押して公開し、プレビューしてみましょう!下のような問い合わせフォームが作成されているはずです。

フォームの動作確認

今まで設定した内容がちゃんと反映されているか確認しておきましょう。

問い合わせフォームにてきとうに入力して送信ボタンを押してみましょう。送信に成功した場合は、メッセージ設定で「メッセージが正常に送信された」場合に設定したメッセージが表示されているはずです。

さらにこの送信ボタンを押したことで、メール設定で設定した送信先のメールアドレスにメールが届くはずです。

届いたメールを見て、メール設定で設定した「題名」や「送信元」が反映されていることを確認しておきましょう。

気に入らない場合は、ダッシュボードのお問い合わせ→コンタクトフォームからまた設定可能です。

メニューへの追加

ホームページに来てくれたお客様が問い合わせできるように「お問い合わせ」の固定ページをメニューバーに追加しておきましょう。

「ダッシュボード」→「外観」→「メニュー」から固定ページのメニューバーへの追加が可能です。

まとめ

・問い合わせページはプラグインを利用すれば簡単に作成可能です
・設定により様々なカスタマイズが可能です
・問い合わせメールは必ず受信できるようにしておきましょう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です