コンタクトフォーム7は、ワードプレスに問い合わせフォームを付けることができる無料のプラグイン（拡張機能）です。
デフォルトのシンプルなままで「メッセージ本文にご希望のコースと日時をご記入下さい」とメッセージを添えておくだけでも使えますが、この記事では初心者向けにわかりやすく予約フォームの作り方を解説します。
↓のような表示の予約フォームです。すべてコピーペーストで終わるのでかんたんにできます。希望日時の時間や、コースの「60分 90分」の変更方法も合わせて解説します。
PCでの表示
～PC表示例ここまで～
※ ↑のフォームはテスト用として表示させていますので、実際に送信しないで下さい。（フリではありません。）
スマホでの表示
手順としては、
になります。1つずつわかりやすく解説します。
プラグインContact Form 7を追加する
ワードプレスのダッシュボードから、プラグイン→新規追加をクリック。
プラグインを追加の画面のキーワードの欄に Contact Form 7 と貼り付けます。
富士山のキャプチャが出てきますので、「今すぐインストール」→「有効化」をクリックします。
CSSを追記する
CSS（スタイルシート）というデザインを整えるための設定をします。
ワードプレスのダッシュボードから、「外観」→「カスタマイズ」をクリック。
↓にスクロールすると「追加CSS」の項目が出てきますので、そこをクリックします。
左下の欄に次をすべてコピーペーストします。
.wpcf7-form .mousikomi select {
display: inline;
width: 60px;
height: 30px;
margin: 0px 5px 15px 8px;
padding: 4px;
}
.wpcf7-form .mousikomi select[name="menu-time"], .wpcf7-form .mousikomi select[name="menu-time2"], .wpcf7-form .mousikomi select[name="menu-time3"] {
width: 88px;
}
.wpcf7-list-item-label {
margin-left:5px;
}
.wpcf7-radio span.wpcf7-list-item {
display: block;
}
#mail_submit2 {
background: #4ac420;
color: #ffffff;
font-size: 16px;
font-weight: normal;
margin: 20px 0 25px;
padding: 9px 18px;
text-decoration: none;
}
.sankou {
font-size:70%;
background-color:#F57C00;
color:#fff;
padding:3px 4px;
margin:0 5px;
white-space: nowrap;
}
.sankou.blue { background-color:#2196F3; }
.mousikomi { margin-top:20px; }
/* テーブル */
.yoyaku {
background:#4165c0;
color: #fff;
font-size: 15px;
width: 30%;
vertical-align: middle;
}
.mousikomi td {
padding-left: 10px;
vertical-align: middle;
}
table .mousikomi { width: 100%;}
@media only screen and (max-width:420px){
.mousikomi tbody tr{
display: block;
border: none;
margin-bottom: 0.8em;
}
.mousikomi tbody td{
display: block;
border: none;
padding: 10px;
}
.wpcf7-textarea {width: 100%; }
.mousikomi table tr td,
.mousikomi {border: none; }
.mousikomi td { width: auto;}
}
コピーの始めは、.wpcf7-form select～ で必ず . （ドット）を入れる必要がありますのでご注意下さい。
貼り付けたら、左上の「公開」をクリックして設定を保存させます。
Contact Form 7の設定をする
続いて予約フォームの設定をします。
ダッシュボードから、「お問い合わせ」→「新規追加」をクリック。
タイトルは公開されるものではないので何でもOKですが、「予約フォーム」だとわかりやすいです。
同じ画面のフォームの欄に入っている既存のものを一旦すべて消して、次をすべて貼り付けます。
<table class="mousikomi"> <tr> <td class="yoyaku"><span class="b">お名前</span> <span class="sankou">必須</span></td> <td> [text* your-name placeholder "例：鈴木 花子"] </td> </tr> <tr> <td class="yoyaku"><span class="b">メールアドレス</span> <span class="sankou">必須</span></td> <td> [email* your-email placeholder "例：sample@gmail.com"]</td> </tr> <tr> <td class="yoyaku"><span class="b">TEL</span> <span class="sankou">必須</span></td> <td> [text* your-tel placeholder]</td> </tr> <tr> <td class="yoyaku"><span class="b">ご希望の日時</span> <span class="sankou">必須</span></td> <td>第1希望：[select* menu-month first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day first_as_label "---" "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"]日[select* menu-time first_as_label "---" "09：30" "10：00" "13：30" "18：30" "19：00"]～ 第2希望：[select* menu-month2 first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day2 first_as_label "---" "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"]日[select* menu-time2 first_as_label "---" "09：30" "10：00" "13：30" "18：30" "19：00"]～</td> </tr> <tr> <td class="yoyaku"><span class="b">ご希望コース</span> <span class="sankou">必須</span></td> <td> [radio radio-contact"60分""90分"]</td> </tr> <tr> <td class="yoyaku"><span class="b">ご相談内容</span> <span class="sankou blue">任意</span></td> <td>ご相談・お問い合わせの内容をお書きください。[textarea textarea-788 x7 placeholder "こちらにご自由にご記入下さい。ごく簡単でも結構です。"]</td> </tr> </table> [checkbox* checkbox-555 class:contact-check "記入内容をご確認の上、よろしければチェックして下のボタンをクリックして下さい。"] <p><span class="b">[submit id:mail_submit2 "カウンセリングを予約する"]</span></p> <p>※ボタンを押した後は、画面が切り替わるまでしばらくお待ちください。</p>
貼り付けたら、左下の「保存」をクリックして一旦保存させます。
希望コースを変更する場合、上記の「60分 90分」の文言を変更します。
メールタブの設定
続いて「メール」タブをクリックします。
それぞれの項目に以下を入力します。
送信先：自分のメールアドレス
送信元："[your-name]"<自分のメールアドレス>
題名：予約が入りました。（自分のアドレスに届くタイトルですので何でもOKです。）
追加ヘッダー：Reply-To: [your-email]
メッセージ本文
既存の文言を削除した後、以下をコピーペーストします。
お疲れさまでございます。予約お申込みがありました。 お名前 [your-name] メールアドレス [your-email] TEL [your-tel] ご希望のカウンセリング日時 第1希望：[menu-month]月[menu-day]日[menu-time] 第2希望：[menu-month2]月[menu-day2]日[menu-time2] ご希望コース [radio-contact] ご相談内容 [textarea-788]
ファイル添付：空白のままにします
メール (2)の設定
メール (2)は、予約時に顧客側に届く自動返信メールです。設定しなくてもこちら側には予約メールは届きますが、自動返信メールがあった方が顧客としては安心感がありますので、設定するのをお勧めします。
まず、メール (2) を使用にチェックを入れます。
次のように各項目を入力します。
送信先：[your-email]
送信元："自分の氏名またはカウンセリングルーム名" <自分のメールアドレス>
題名：ご予約ありがとうございます。
追加ヘッダー：空白のまま
メッセージ本文
既存の文言を削除した後、以下をコピーペーストします。
※●●カウンセリングルームの●と申します。と、署名の欄などはご自身の文言に変更して下さい。
[your-name] 様 初めまして、●●カウンセリングルームの●と申します。 カウンセリングのご予約ありがとうございます。 このメールは、自動返信メールです。通常2営業日以内にご連絡差し上げますので、今しばらくお待ち下さい。 以下の内容を受付致しました。 ======================================================================= お名前 [your-name] メールアドレス [your-email] TEL [your-tel] ご希望のカウンセリング日時 第1希望：[menu-month]月[menu-day]日[menu-time] 第2希望：[menu-month2]月[menu-day2]日[menu-time2] ご希望コース [radio-contact] [textarea-788] ======================================================================= 署名 =======================================================================
ファイル添付：空白のまま
貼り付け終えたら「保存」ボタンを押して設定を保存させます。ここまで出来たら、あともうワンステップで完成します。
予約フォームページを固定ページで作成する
ワードプレスのダッシュボードから、「固定ページ」→「新規追加」をクリックします。
ページタイトルは「予約フォーム」など、わかりやすいものにします。
続いて右にある「+」ボタンをクリックし、コンタクトフォーム7を選択します。
先ほど作成したフォームを選択します。
あとは右上の「公開」ボタンを押せばOkです。
実際にページを表示させて確認してみた後、テストでフォームが機能しているかどうか確認してみて下さい。（自分のアドレスで送信してみてもOKです）
予約日時を第3希望まで増やしたい場合
Contact Form 7の、フォームとメールの設定に少し加えます。
フォーム欄の希望日時の箇所に、以下のように第3希望まで増やします。
第1希望：[select* menu-month ifirst_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day first_as_label "---" "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"]日[select* menu-time first_as_label "---" "09：30" "10：00" "13：30" "18：30" "19：00"]～ 第2希望：[select* menu-month2 first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day2 first_as_label "---" "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"]日[select* menu-time2 first_as_label "---" "09：30" "10：00" "13：30" "18：30" "19：00"]～ 第3希望：[select* menu-month3 first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day3 first_as_label "---" "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"]日[select* menu-time3 first_as_label "---" "09：30" "10：00" "13：30" "18：30" "19：00"]～
続いて「メール」設定の「メッセージ本文」、希望日時項目を次のようにします。
ご希望のカウンセリング日時 第1希望：[menu-month]月[menu-day]日[menu-time] 第2希望：[menu-month2]月[menu-day2]日[menu-time2] 第3希望：[menu-month3]月[menu-day3]日[menu-time3]
メール (2)の「メッセージ本文」も上記同様にします。
保存ボタンを押して完了です。
補足：住所入力について
フォームの入力項目はできるだけ少ない方がページからの離脱が減るため、予約フォームで住所を入力して頂くのはお勧めできません。
住所や生年月日なども知りたい場合、実際に来店された際にそれらを記入して頂いた方が来店のハードルが下がります。
