【コピペOK】予約フォームの作り方【無料予約管理システム】

<div class="moji"><span class="must">必須</span><span class="book">ご利用日</span></div>
<div class="para"><!--横並び用-->
	<div class="komoji4">
　　<div class="moji"><span class="must">必須</span><span class="book">チェックイン日</span></div>
		  [date* date-checkin min:today+2days]
	</div>
	<div class="komoji4">
　　<div class="moji"><span class="must">必須</span><span class="book">泊数</span></div>
[select* hakusuu "1" "2" "3" "4" "5"]
　</div>
</div>

<div class="moji"><span class="must">必須</span><span class="book">到着予定時刻</div>
<div class="komoji3">夕食付の場合は18:00までにお願いいたします。</div>
 [select* arrivaltime include_Blank  "15:00" "16:00" "17:00" "18:00" "19:00" "20:00" "21:00"]</label>

<div class="moji"><span class="must">必須</span><span class="book">お食事</span></div>
  [select* meal "夕・朝食付き"  "朝食のみ" "夕食のみ" "食事なし"]


<div class="moji"><span class="must">必須</span><span class="book">ご宿泊人数</span></div>
<div class="para">
<div class="komoji4"><span class="book2">大人:男性</span>
  [select* men "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"] 
</div>
<div class="komoji4"><span class="book2">大人:女性</span>
 [select* women "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]
</div>
</div>

<!--子供欄の記述始め-->
<div class="komoji1"><span class="book2">お子様(12歳未満)</span></div>
<div class="komoji3">12歳以上は大人にカウントしてください</div>
<div class="para">
		<div class="komoji4">
			[select* numchild placeholder "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]
</div>
<div class="komoji4"></div>
</div>
 [text text-child placeholder "お子様の年齢"]

	 
<!--子供欄の記述おわり-->

<div class="moji"><span class="free">任意</span><span class="book">ご年代</span></div>
[select nendai include_blank "10~20代" "30~40代" "50~60代" "60~70代" "80代以上"]
<div class="moji"><span class="must">必須</span><span class="book">お名前</span></div>
  [text* your-name] 
<div class="moji"><span class="must">必須</span><span class="book">メールアドレス</span></div>
  [email* your-email] 
<div class="moji"><span class="must">必須</span><span class="book">メールアドレス(確認用)</span></div>
  [email* your-email] 
<div class="moji"><span class="must">必須</span><span class="book">電話番号</span></div>
  [tel* telno]


<div class="moji"><span class="must">必須</span><span class="book">ご住所：都道府県</span></div>
[select* prefe include_Blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県" "海外"]
<div class="moji"><span class="must">必須</span><span class="book">ご住所：市町村以下</span></div>
  [text text-address]
<div class="moji"><span class="free">任意</span><span class="book">ご要望・ご質問など</span></div>
  [textarea your-message] 
  <div class="submit">[submit "送信"]</div>

<div style="text-align:right; font-size:0.8rem;"><a style="color:#c0c0c0;" href="https://shimadablog.com/system/" target="_blank" rel="noreferrer noopener">©shimadablog.com</a></div>

/*=============================
コンタクトフォームの装飾
==============================*/
/*フォーム全体*/
.wpcf7{
	background-color:#EEEEEE;
	padding:10px!important;
}

/*小さいテキスト入力欄,メールアドレス入力欄*/
.wpcf7-text{
	width:90%!important;
		background-color:#fff;
	margin-bottom:5px;
	border-radius:3px!important;
}

/*大きいテキスト入力欄装飾*/
.wpcf7 textarea{
		width:100%!important;
	height:9rem!important;
		background-color:#fff;
}

/*電話番号入力欄*/
.wpcf7-tel  {
	width:50%;
	height:45px;
	margin-bottom:5px;
	border-radius:3px;
	background-color:#fff;
}


/*ドロップダウンリスト*/
.wpcf7-list-item-label{
	font-size:90%;
	font-weight:1;
	background-color:#fff;
}


/*セレクト部*/
.wpcf7-form .wpcf7-select {
	background-color:#fff;
  height: 40px;
  width: 75% !important;
	margin-right: 10px;
	margin-top: 10px;
	font-size:85%;
}

.wpcf7-validates-as-number{
	background-color:#fff;
}

/*日付*/
.wpcf7-date{
    width: 95%!important;
	 height:2rem;
	 margin-top:5px;
	margin-bottom:15px!important;
	margin-right:5px!important;
	background-color:white;
	font-size:1.1rem
}


/* ＝＝文字の装飾＝＝ */

.moji{
/* 	margin-top:10px; */
	margin-bottom:5px;/*見出しと入力欄の間調整*/
}
.komoji1{
	margin:0;
	margin-top:10px!important;
}

}
.komoji2{
	margin-bottom:0px;
	font-size:80%;
	color:blue;
}
.komoji3{
	margin-top:px;
	margin-bottom:-10px;
	font-size:80%;
	font-weight:1;
	color:blue;
}


/* 大項目の文字 */
.book{
		font-weight:550;
}

/* 小項目の文字 */
.book2,.wpcf7-list-item-label{
		font-size:95%;
	font-weight:500;
	background-color:#EEEEEE;
}



/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
  margin-top: 10px;
	padding: 6px 10px;
	background: #FF0461;
	border-radius: 20px;
	font-size:80%
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
	font-size:80%
}

/* ＝＝文字の装飾おわり＝＝ */

/* ＝＝送信ボタンのカスタマイズ ＝＝ */
input.wpcf7-submit {
padding:1em !important;/* ボタン内の余白 */
margin:2em 0em !important;/* ボタンの上下の余白 */
background-color: #25c04a !important;/* 背景の色 */
border-radius: 5px !important;/* 角を丸く*/
color: #fff !important;/* 文字の色*/

width: 100%;/* ボタンの横幅*/
transition:0.5s;/* 背景色が変わるまでの時間*/
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10);/* 薄っすらとボタンにドロップシャドウをかける*/
}

input.wpcf7-submit:hover {
background-color:#55ffaa !important;/* マウスを乗せたときの背景色 */
color: #fff !important;/* マウスを乗せたときの文字の色 */
}

.btn-submit {
    width: 100%;
    text-align: center;
}

/*送信ボタンの下のスペース調整 */
.submit p{
	height:7em;
}
/* ＝＝送信ボタンのカスタマイズ 終わり＝＝ */



/*横並び表示　カレンダー,男女など*/
.para{
  display: flex;
	margin-bottom:10px;
	width:100%;
	justify-content: space-between;　/*両端に分ける*/
}
/*paraで分けた要素を均等に分割*/
.komoji4{
	margin-top:;
	width:100%!important;
}

/*横並び表示おわり*/



/*カレンダーの日付選択欄のどこを押しても反応するようにする*/
input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
	    /*省略*/
    opacity: 0;
}


/*=============================
コンタクトフォームの装飾おわり
==============================*/