コンタクトフォーム７で
ネット予約ボタンを設置する手順

１，完了ページを作る【固定ページ】
タイトル：【公式】店舗名　ネット予約完了
パーマリンク：thanks

２，フォーム設定

ご予約店舗
　【公式】店舗名

ご予約日
[date* reservation-date]
(〇曜日定休日)

<label> ご予約時間
[select* time-menu "11:00" "11:15" "11:30" "11:45" "12:00" "12:15" "12:30" "12:45" "13:00" "13:15" "13:30" "" "18:00" "18:15" "18:30" "18:45" "19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30"] </label>
営業時間
ランチ11:00~14:30(L.O14:00)
ディナー18:00~22:00(L.O21:00)

<label> 人数
[select numbar-menu "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"] </label>

<label> コース
[select course-menu "席のみ予約" "イタリアンコース" "飛騨牛コース" "贅沢コース" "ランチコース"] </label>

<label> 氏名
[text* your-name autocomplete:name] </label>

<label> 電話番号
[tel* your-tel] </label>

<label> メールアドレス
[email* your-email autocomplete:email] </label>

<label> レストランへのご要望はありますか？
[textarea your-message] </label>

[submit "送信"]

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'ネット予約完了ページURL';
}, false );
</script>

３，メール設定
題名【店舗名】ネット予約が入りました

メッセージ本文

ホームページよりネット予約が入りました。予約情報を確認しご対応をお願いします。
---ご予約内容は以下の通りです---

【ご予約店舗】店舗名

【ご予約日】[reservation-date]
【ご予約時間】[time-menu]～
【申込者名】[your-name]様
【利用人数】[numbar-menu]名様
【ご連絡先】
　電話番号：[your-tel]
　メールアドレス：[your-email]
【ご希望コース】[course-menu]


[_site_title] 
ネット予約システム

☑メール(２)を使用
題名【店舗名】ご予約ありがとうございます

メッセージ本文

この度は、店舗名にご予約頂きありがとうございます。
スタッフ一同、当日のご来店を心よりお待ちしております。
---ご予約内容は以下の通りです---

【ご予約店舗】店舗名

【ご予約日】[reservation-date]
【ご予約時間】[time-menu]～
【申込者名】[your-name]様
【利用人数】[numbar-menu]名様
【ご連絡先】
　電話番号：[your-tel]
　メールアドレス：[your-email]
【ご希望コース】[course-menu]

予約の変更またはキャンセルはお電話にてお願いたします。
０００－０００－００００

ーーーーーーーーーーーーーーー
店舗名　予約受付担当
住所：000-0000 住所
電話：０００－０００－００００

４，プラグインAdvanced Google reCAPTCHA

reCAPTCHA v3のサイトキーとシークレットキーの取得
https://www.google.com/recaptcha/admin/create

５，ネット予約ページ【固定ページ】
タイトル：【公式】店舗名　ネット予約
パーマリンク：reserve
コンタクトフォーム７のショートコードを張り付け

２，ページの下にボタンを設置する

●footer.phpの編集

<div class="footer_fixed">
	<div class="footer_tel"><a href="tel:0000000"><i class="fas fa-phone"></i> 今すぐ電話</a></div>
	<div class="footer_contact"><a href="ネット予約URL"><i class="fas fa-envelope"></i> ネット予約</a></div>	
</div>

３，画面下に常時表示させる

●追加CSSの編集

.footer_fixed{
	position:fixed;
	display:flex;
	width:100%;
	bottom:0;
	left:0;
	z-index:999;
}
.footer_fixed a{
	color: #fff;
	text-decoration: none;
}
.footer_tel{
	width:50%;
	background:#008000;
	text-align:center;
	padding:10px 0;
}
.footer_contact{
	width:50%;
	background:#ffa500;
	text-align:center;
	padding:10px 0;
}
@media(min-width:700px){
.footer_fixed{
	display: none;
}
}