メニュー

問い合わせフォームの作り方

アンプレートは問い合わせフォームのデザイン(CSS)も作ってあります。(レスポンシブ対応)メールの項目を設定するだけで、デザインされたメールフォームが作れます。

アンプレートのフォームデザイン↓

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

フォームを使うには「Contact Form 7」のプラグインをインストールします。左メニューの「プラグイン」「新規追加」をクリックします。右上のキーワードにContact Form 7と入力し、「今すぐインストール」をクリックします。その後、有効化をクリックします。

 

左メニュー内にお問い合わせメニューが表示されます。「お問い合わせ」「新規追加」をクリックします。

 

フォームの名前を入力します。(自分がわかる名前でOK)その後、下にある「保存」をクリックします。

 

フォームのショートコードが発行されます。ショートコードをコピーしておきます。

 

次に、フォーム用の固定ページを作成します。「固定ページ」「新規追加」をクリック。ページ名(お問い合わせフォームなど)を入力し、本文部分に先ほどコピーしたショートコードを貼り付けます。(ビジュアルエディタのままでOK)

※必ず「固定ページ」で作成してください。投稿ページで作るとフォームがエラーになります

 

お問い合わせフォームが設定できました。

 

以上がお問い合わせフォームの設置の流れになります。ここからフォームをカスタマイズしていきます。

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

まず、以下のHTMLソース(左側のみ)を全てコピーしてください。

 

コピーしたら、左メニューの「お問い合わせ」「コンタクトフォーム」をクリックし、作成したフォームをクリックします。

 

フォームタブの画面にデフォルトで書かれている文字を全て消します。その後、先ほどコピーしたHTMLソースを貼り付けます。貼り付けたら「保存」をクリックします。

 

カスタマイズされたフォームに変更されます↓

CSS(デザイン)はすでに設計されていますので、CSSを作る必要はありません。

 

アンプレートのフォームではURLやチェックボックスなどのメニューも入れてありますが、最低限のメニューのみで良いという場合。例えばデフォルトの「お客様名」「メールアドレス」「題名」「本文」のみで良いという場合は、以下の部分を全て削除します。

 

以下のように修正し、保存をクリック。

 

これで、「お客様名」「メールアドレス」「題名」「本文」のみのフォームになります。

 

また、必須項目任意項目についてですが、これはメニューのinputタグの後ろに*(アスタリスク)を入れれば必須*を入れなければ任意というふうに区別することができます。

 

このように、使うメニューに応じて変更してください。

アンプレートのフォームは最低限使うメニューのみCSSを設定してあります。そのため、ドロップダウンメニューなどについてはCSSを設定していません。もし、上記以外のメニューを使いたいという場合は自己作成していただきますようお願いいたします。

メールの設定

次に、メールの受信設定を行います。

「お問い合わせ」「コンタクトフォーム」から作成したフォームをクリックし、メールタブをクリックします。すると、以下の画面が表示されます。

  1. 送信先:あなたが受信したいメールアドレスを入力します(デフォルトではワードプレスを作るときに設定したメールアドレスになっていると思います)
  2. 送信元:相手の名前(メールを送ってきてくれた方の名前)が自動で入力されて送られてきます。通常はこのままでOKです
  3. 題名:メールの題名(件名)が入力されて送られてきます
  4. 追加ヘッダー:メールを受信した際、送信先という項目を追加してくれます。通常はこのままでOKです
  5. メッセージ本文:メールの内容が記載されて送られてきます

アンプレートのフォームをそのままお使いいただくという場合は、以下のHTMLに書かれた文字を全てコピーしてメッセージ本文の中(5の部分)に貼り付けます。(逆に、デフォルトのままで良いという場合、特に変更はいりません。)

 

 

上記の文面をメッセージ本文にコピーしてお問い合わせフォームから送信すると、以下のようなメールが送られてくるようになります。

送信先にワードプレス登録時と違うメールアドレスを設定すると、送信ボタンを押した際、クルクルとアイコンが回り続けたまま送信されないというエラーが起きることがあるようです。その際は、ワードプレス登録時と同じメールアドレスを設定すると問題が解決できることがあるようです。(他にもプラグインとの兼ね合いやサーバ側の設定などで起きる場合もあるようですので一概には言えません。その場合は、自己責任でお願いいたします)

自動返信メールの設定

最後に、自動返信メールについて解説します。

自動返信メールとは相手がメールをくれた際、自動で折り返しのメールを送ってくれる機能のことです。自動返信を設定するにはメールタブを開きます。下にスクロールすると「メール (2) を使用」という箇所があります。ここにチェックを入れると、以下のような自動返信メールの設定項目が表示されます。

 

1つずつ見ていきます。

 

  1. 相手のメールアドレスです。プラグインが自動で相手のメールアドレスを挿入してくれます。このままでOKです
  2. 相手に表示されるこちらのメールアドレスです。先ほど、「送信先」で設定したメールアドレスを入力すればOKです
  3. 相手に送られるメールの件名です。デフォルトでは「your-subject」になっていると思います。ここは、「お問い合わせありがとうございます」「お問い合わせを受け付けました」など入力したほうが、相手もわかりやすいです
  4. 送信先とは別のメールアドレスを指定することができます。例えば、相手の方が自動返信メールに返信したい場合、こちらで送って欲しいメールアドレスがある場合などは、ここに追加のメールアドレスを記入します。送信先のメールアドレスと同じで良いという場合はこのままでOKです
  5. 相手に送られるメールの内容になります。アンプレートのフォームを使う場合、以下の例文をコピーしてメッセージ本文に貼り付けてください。(本文内容を変えてお使いください)

[your-name]様。この度は、お問い合わせいただきありがとうございます。

通常24時間~48時間以内に折り返しご連絡させていただきます。(土日・祝日は除く)
混み合っている場合、数日お時間をいただく場合がございます。

どうぞ、よろしくお願いいたします。

●●●サイト

━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━

■お名前: [your-name]
■メールアドレス:[your-email]
■URL:[your-url]
■電話番号:[your-tel]
■チェックボックス1:[checkbox]
■題名: [your-subject]
■メッセージ本文:[your-message]

お問い合わせフォームの項目で「お客様名」「メールアドレス」「題名」「本文」のみ(つまり、デフォルトのフォームです)使う場合は、上記の「URL」「電話番号」「チェックボックス」の3つは削除してください。

後は、「保存」をクリックすれば完了です。これで、相手の方がメールを送ってきてくれた際、自動で上記のメールが返信されるようになります。「外観」→「メニュー」からナビゲーションメニューなどにお問い合わせページ(固定ページ)を設定してお使いください。

また、Contact Form 7については、多くの方がサイトで解説ページを作ってくださっています。独自のフォームを作りたいという場合は、「Contact Form 7」と検索していただくと、たくさんの解説ページが見つかりますので参考にされてみてください。