コンタクトフォーム７で予約フォームを作る方法｜コピペでOK

コンタクトフォーム7は、ワードプレスに問い合わせフォームを付けることができる無料のプラグイン（拡張機能）です。

デフォルトのシンプルなままで「メッセージ本文にご希望のコースと日時をご記入下さい」とメッセージを添えておくだけでも使えますが、この記事では初心者向けにわかりやすく予約フォームの作り方を解説します。

↓のような表示の予約フォームです。すべてコピーペーストで終わるのでかんたんにできます。希望日時の時間や、コースの「60分　90分」の変更方法も合わせて解説します。

この記事ではカウンセリングルームの予約を前提としていますが、フォームの文言を少し変更すれば整体など、どの業種にも応用が効きます。

PCでの表示

～PC表示例ここまで～
※ ↑のフォームはテスト用として表示させていますので、実際に送信しないで下さい。

スマホでの表示

スマホでのコンタクトフォームの表示

手順としては、

プラグインContact Form 7の追加
CSSを追記する
Contact Form 7の設定をする
予約フォームページを固定ページで作成

になります。1つずつわかりやすく解説します。

プラグインContact Form 7を追加する

ワードプレスのダッシュボードから、プラグイン→新規追加をクリック。

プラグインを追加の画面のキーワードの欄に Contact Form 7 と貼り付けます。

富士山のキャプチャが出てきますので、「今すぐインストール」→「有効化」をクリックします。

プラグイン追加の画面のキャプチャ

CSSを追記する

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～　で必ず　.　（ドット）を入れる必要がありますのでご注意下さい。

貼り付けたら、左上の「公開」をクリックして設定を保存させます。

CSSの追加画面２

Contact Form 7の設定をする

続いて予約フォームの設定をします。

ダッシュボードから、「お問い合わせ」→「新規追加」をクリック。

コンタクトフォーム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 include_blank  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day 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"]日[select* menu-time include_blank  "09：30" "10：00" "13：30" "18：30" "19：00"]～
第2希望：[select* menu-month2 include_blank  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-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"]日[select* menu-time2 include_blank  "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>

貼り付けたら、左下の「保存」をクリックして一旦保存させます。

予約希望時刻を変更する場合は、上記の第1希望、第2希望の項目の時間を変更します。

希望コースを変更する場合、上記の「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) を使用にチェックを入れます。

メール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] 


======================================================================= 
署名
=======================================================================

ファイル添付：空白のまま

貼り付け終えたら「保存」ボタンを押して設定を保存させます。ここまで出来たら、あともうワンステップで完成します。

予約フォームページを固定ページで作成する

ワードプレスのダッシュボードから、「固定ページ」→「新規追加」をクリックします。

ページタイトルは「予約フォーム」など、わかりやすいものにします。

予約ページ作成画面1

続いて右にある「+」ボタンをクリックし、コンタクトフォーム7を選択します。

固定ページにフォームを組み込む画面

先ほど作成したフォームを選択します。

先ほど作成したフォームを選択する

あとは右上の「公開」ボタンを押せばOkです。

公開ボタンを押して完了

実際にページを表示させて確認してみた後、テストでフォームが機能しているかどうか確認してみて下さい。（自分のアドレスで送信してみてもOKです）

予約日時を第3希望まで増やしたい場合

Contact Form 7の、フォームとメールの設定に少し加えます。

フォーム欄の希望日時の箇所に、以下のように第3希望まで増やします。

第1希望：[select* menu-month include_blank  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day 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"]日[select* menu-time include_blank  "09：30" "10：00" "13：30" "18：30" "19：00"]～
第2希望：[select* menu-month2 include_blank  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-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"]日[select* menu-time2 include_blank  "09：30" "10：00" "13：30" "18：30" "19：00"]～
第3希望：[select* menu-month3 include_blank  "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* menu-day3 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"]日[select* menu-time3 include_blank  "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)の「メッセージ本文」も上記同様にします。

保存ボタンを押して完了です。

補足：住所入力について

フォームの入力項目はできるだけ少ない方がページからの離脱が減るため、予約フォームで住所を入力して頂くのはお勧めできません。

お名前必須
メールアドレス必須
TEL 必須
ご希望の日時必須	第1希望：月日～第2希望：月日～
ご希望コース必須	60分90分
ご相談内容任意	ご相談・お問い合わせの内容をお書きください。