お問い合わせ、予約フォームの作成手順を説明します。

お問い合わせメールや予約メールの送信機能は、Contact Form 7(コンタクトフォーム)というプラグインを利用します。
使い方が少々難しいプラグインですが、頑張って覚えましょう!

通常のプラグイン同様、管理画面のメニューバーから「プラグイン」→「インストール済みプラグイン」のプラグイン一覧から”Contact Form 7”を有効化します。
プラグインを有効化すると同じ画面のContact Fomr 7のところに「設定」リンクが表示されます。それをクリックしてください。

Contact Formの設定画面が表示されたら新規作成をクリックしてください。
次の画面で、使用言語を設定するポップアップ画面が表示されます。その画面で、”新規作成”ボタンをクリックします。

再び、Contact Formの設定画面が表示されたら、予約フォームの名称を設定します。
日本語でもOKですが、正し、この名称が、予約フォームのURLに利用されるので、検索エンジンとの相性を見て、英小文字が望ましいです。(例:reserve、mail )

Contact Form設定画面の構成は、フォーム部(上段)、メール部(中段)、エラーメッセージなどを設定するメッセージ部に分かれます。

ここでは、予約フォームを作成するのに必要最低限の機能であるフォーム部とメール部について説明します。

フォームとは、予約フォームの名前入力欄やメニュー選択項目部分のことです。フォーム作成とは、その各入力項目を定義することになります。

まず、フォーム部右側の”タグ作成”ボタンをクリックすると、フォームで利用可能な入力方式を選択する

一般的な項目として”テキスト項目”を作成する手順を説明します。
“テキスト項目”とは、名前や住所入力欄のように文章が入力できる項目のことです。

電話番号やメールアドレスなど入力を必須にする場合は、”必須入力の項目ですか?”にチェックします。
テキスト項目の名前は、このフォーム部品の名称を英数字小文字で設定します。氏名入力欄なら”name”など分かりやすい名称を付けましょう。その他の設定項目は、任意で指定してください。

背景が茶色の部分に記載されているコードを、左側のフォーム部の適当な位置にコピペしてください。
その位置に、設定したフォーム項目が表示されます。
タイトルラベルの記載は、他の項目同様、<P>タイトル</P>タグで括ります。

背景が緑の部分に記載されてるコードを、すぐ下にあるメール部のメッセージ本文の適当な位置にコピペします。
メッセージ本文部は、ユーザに送信されるメッセージ本文の内容を定義する部分です。

この処理を他のフォーム項目(テキスト、チェックボタンなど)を定義する場合も同様です。

最後に、”保存”ボタンをクリックして、設定を保存します。保存が完了すると、画面上部に、背景が茶色のバーの文字列を、”予約フォーム”や”お問い合わせフォーム”など適当な名称を付けた固定ページを作成し、そのページにコピペします。
そのページを保存して、全ての作業は終了です。

説明が簡単過ぎて、よくわからないという方のために、サンプルサイトの予約フォームのスクリプトを下記の提示します。

**** この下の部分をフォーム部にコピペする(サンプルコード) ****

<p>お名前 (必須)<p>

[text* your-name]

<p>メールアドレス (必須)<p>

[email* your-email]

<p>TEL (必須)<p>

[text* tel] [checkbox checktel label_first “折り返し電話連絡を希望します”]

<p>住所 (必須)<p>

[text* address]

<p>↓希望コースにチェックしてください。<p>

[checkbox menu1 label_first “メニュー1”] [checkbox menu2 label_first “メニュー2”]

<p>第一希望日<p>
[select year1 include_blank “2011” “2012” “2013” “2015”] 年 [select month1 include_blank “1” “2” “3” “4” “5” “6” “7” “8” “9” “10” “11” “12”] 月 [select day1 include_blank “1” “2” “3” “4” “5” “6” “7” “8” “9” “10” “11” “12” “13” “14” “15” “16” “17” “18” “19” “20” “21” “22” “23” “24” “25” “26” “27” “28” “29” “30” “31”] 日

<p>第二希望日<p>
[select year2 include_blank “2011” “2012” “2013” “2015”] 年 [select month2 include_blank “1” “2” “3” “4” “5” “6” “7” “8” “9” “10” “11” “12”] 月 [select day2 include_blank “1” “2” “3” “4” “5” “6” “7” “8” “9” “10” “11” “12” “13” “14” “15” “16” “17” “18” “19” “20” “21” “22” “23” “24” “25” “26” “27” “28” “29” “30” “31”] 日

<p>メッセージ本文<p>

[textarea your-message] [submit “送信”]

**** このまでをフォーム部にコピペする(サンプルコード) ****

**** この下の部分からメッセージ本文にコピペする ****
差出人: [your-name] <[your-email]>
TEL:[tel] 電話連絡希望:[checktel] 住所:[address] 【希望コース】
メニュー1:[menu1] メニュー2:[menu2]

第一希望日:[year1]年 [month1]月 [day1]日
第二希望日:[year2]年 [month2]月 [day2]日

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

**** このまでの部分からメッセージ本文にコピペする ****

フォーム部のスクリプトの記述とメッセージ本文のスクリプトの記述の関係性が理解できれば、このサンプルソースを加工するだけで予約フォームが作成できると思います。