php 20180402お问い合わせ

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 20180402お问い合わせ相关的知识,希望对你有一定的参考价值。

@charset "utf-8";
/* ===================================================================
CSS information

 file name  : copy.css
 author     : Ability Consultant
 style info : コピー
=================================================================== */
@import "settings";

/* -----------------------------------------------------------
    components.scss
----------------------------------------------------------- */
.btn {
	a,input {
		text-align: center;
		display: block;
		transition: .3s;
		border-width: 0;
		width: 100%;
		&:hover {
			opacity: .8;
		}
	}
}

.btn_next {
	a,input {
		padding: 12px 25px;
		background: #000;
		color: #fff;
		font-size: 1.1em;
		cursor: pointer;
	}
}

.btn_back {
	a {
		padding: 12px 25px;
		border: 1px solid #000;
		@include fsz(16);
		&:hover {
			opacity: .9;
			color: #fff !important;
			background: #000;
		}
	}
}

/* -----------------------------------------------------------
    con_txt
----------------------------------------------------------- */
.con_txt {
	@extend %bw;
	@extend %cf;
	margin-top: 5em;
	margin-bottom: 50px;
	padding: 1px;
	border: 1px solid #ccc;
	@include pie-clearfix;
	@include mq(tab) {
		margin-top: 4em;
	}
	@include mq(sp) {
		margin-top: 3em;
	}
	.box_txt {
		padding: 2% 3%;
		float: left;
		width: 50%;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			border-right: 1px solid #ccc;
			height: 80%;
			transform: translatey(-50%);
		}
		li{
			list-style-type: disc;
			line-height: 2.0em;
			@include mq(sp) {
				margin-left: 10px;
			}
		}
		@include mq(sp) {
			padding: 1em;
			width: 100%;
		}
		span {
			color: #cc0000;
			padding-right: 0.3em;
		}
	}
	.box_contact {
		float: left;
		width: 50%;
		padding: 2% 2% 0.5%;
		text-align: center;
		@include mq(sp) {
			width: 100%;
			padding-top: 2%;
		}
		.title_tel{
			padding-bottom: 10px;
			text-align: center;
			@include fsz(18);
			@include mq(tab) {
				@include fsz(15);
			}
			@include mq(tab_sp) {
				span{
					display: none;
				}
			}
		}
		dl{
			margin-bottom: 15px;
			@include mq(tab) {
				margin-bottom: 12px;
			}
			dt{
				color: #BD8C21;
			}
			dd{
				.txt_tel{
					margin-right: 15px;
					@include inline-block;
					line-height: 1.2;
					.num {
						font-size: 2rem;
					}
					a,.tel {
						font-size: 3rem;
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
    .con_flow
----------------------------------------------------------- */
.con_flow {
	@extend %bw;
	@extend %cf;
	margin-bottom: 40px;
	ul {
		@extend %cf;
		li {
			width: 28%;
			float: left;
			margin-left: 8%;
			text-align: center;
			background: #e3e3e3;
			@include fsz(16);
			font-weight: normal;
			padding: 10px;
			color: #000;
			position: relative;
			@include mq(tab) {
				@include fsz(15);
			}
			@include mq(sp) {
				@include fsz(13);
				padding: 10px 0;
				width: 30%;
				margin-left: 5%;
			}
			&:first-child {
				margin-left: 0;
			}
			&.active {
				background: #333333;
				color: #fff;
			}
			&:after {
				content: "\f054";
				font-family: "FontAwesome";
				@include fsz(16);
				color: #e3e3e3;
				position: absolute;
				top: 50%;
				right: -16%;
				margin-top: -0.5em;
				line-height: 1;
				@include mq(sp) {
					@include fsz(12);
					right: -12%;
				}
			}
			&.last {
				&:after {
					display: none;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
    con_request
----------------------------------------------------------- */
.con_request {
	@extend %bw;
	@extend %cf;
	margin-bottom: 3em;
	.tbl_primary {
		width: 100%;
		tr {
			border: 1px solid #ddd;
			width: 100%;
		}
		th, td {
			padding: 0.6em 1.5em;
			border-bottom: 1px solid #ddd;
			@include mq(sp) {
				padding: 0.6em 1em;
				width: 100%;
				display: block;
			}
			input, select {
				border:1px solid #acacac;
				padding: 0.3em 1em;
				@include mq(sp) {
					width: 100%;
					padding: 0.3em 0.8em;
				}
			}
		}
		th {
			width: 25%;
			overflow: hidden;
			text-align: left;
			background: #eee;
			font-weight: normal;
			@include mq(sp) {
				width: 100%;
			}
			span {
				float: right;
				color: #cc0000;
				padding-left: 0.5em;
				font-size: .8em;
				line-height: 2.5;
			}
		}
		.company, .mail {
			input {
				width: 50%;
			}
		}
		.name {
			input {
				width: 40%;
				margin-right: 1em;
				@include mq(tab) {
					width:80%;
				}
				@include mq(sp) {
					width: 100%;
					margin: 0.3em 0;
				}
			}
		}
		.tel, .email {
			input {
				width: 60%;
				border:1px solid #acacac;
				@include mq(tab) {
					width: 80%;
				}
				@include mq(sp) {
					width: 100%;
				}
			}
		}
		.tel {
			input {
				width: 30%;
			}
		}
		.day {
			input {
				width: 30%;
				border:0;
				background: url(../images/common/ic_calender.png) right center no-repeat;
				border:1px solid #acacac;
				@include mq(tab_sp) {
					width: 160px;
					@include fsz(12);
				}
				@include mq(sp) {
					width: 100%!important;
				}
				@include mq(custom_max,900px) {
					width: 140px;
				}
			}
		}
		.select{
			select {
				width: 45%;
				@include mq(tab) {
					width: 45%;
				}
				@include mq(sp) {
					width: 100%;
				}
			}
		}
		.text{
			textarea{
				width: 95%;
				height: 150px;
				border:1px solid #acacac;
				@include mq(sp) {
					width: 100%;
				}
			}
		}
	}//.tbl_basic
	.box_btn01 {
		margin: 2em 0;
		text-align: center;
		.btn {
			width: 320px;
			margin: 0 auto;
			@include mq(sp) {
				width: 100%;
			}
		}
	}
	.box_btn02 {
		margin: 2em 0;
		display: flex;
		justify-content: center;
		@include mq(sp) {
			display: block;
		}
		.btn {
			margin: 0;
			margin-left: 1%;
			display: inline-block;
			&:first-child {
				margin-left: 0;
			}
			a,input {
				width: 320px;
				display: inline-block;
				text-align: center;
				@include mq(sp) {
					width: 100%;
				}
			}
			@include mq(sp) {
				width: 100%;
				margin-left: 0;
				margin-bottom: 10px;
			}
			&.btn_next {
				input {
					border: 2px solid #000;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
    con_thanks
----------------------------------------------------------- */
.thanks_f {
	margin-top: 130px;
}
.con_thanks {
	@extend %bw;
	@extend %cf;
	text-align: center;
	h3 {
		margin-top: 2em;
		font-weight: normal;
		@include fsz(21);
		font-weight: normal;
		@include mq(sp) {
			@include fsz(19);
		}
	}
	p {
		margin: 1em 0 3em;
	}
	.btn_back {
		a {
			width: 320px;
			margin: 0 auto;
			@include mq(sp) {
				width: 100%;
			}
		}
	}
}


/* appearance設定
----------------------------------------------------------- */
button,input[type="text"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="submit"]{
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//チェックボックス、ラジオボタンにマージンライト。 appearance
input[type="checkbox"],
input[type="radio"]{
margin-right: 5px;
-webkit-appearance:normal;
-moz-appearance:normal;
appearance:normal;
}
//ボタン要素リセット
button{
border: none;
cursor: pointer;
background: none;
padding: 0;
margin: 0;
}
textarea,
input[type="text"]{
padding: 5px;
border: 1px solid #ccc;
}
select{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
border: 1px solid #ccc;
padding-right: 25px !important;
background: #fff url(../images/common/ic_arrow_down.png) right center no-repeat;
}
//IE セレクトボックス補正
select::-ms-expand {
display: none;
}
//Firefox セレクトボックス補正
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
textarea {
-webkit-appearance: none;
border: 1px solid #ccc;
background: #fff;
}
<?php $page = 'contact'; include "../../config/include.php"; ?>

<!-- *** stylesheet *** -->
<?php include "../../templates/common_css.php"; ?>
<link href="../css/<?php echo $page; ?>.css" rel="stylesheet" type="text/css" media="all">

<!-- *** javascript *** -->
<?php include "../../templates/common_js.php"; ?>

<body id="<?php echo $page; ?>">
<?php include "../../templates/header.php"; ?>
<?php include "../../templates/nav.php"; ?>

<div class="con_title">
	<div class="st_center">
		<h3><span class="jp">お問い合わせ</span><br><span class="en">CONTACT</span></h3>
	</div>
</div>
<div id="contents">

	<div class="con_flow thanks_f">
		<ul>
			<li>1.必須項目を<br class="view_sp">入力</li>
			<li>2.入力内容の<br class="view_sp">確認</li>
			<li class="last active">3.送信<br class="view_sp">完了</li>
		</ul>
	</div>

	<div class="con_thanks">
		<h3>お問い合わせいただき、<br class="view_sp">ありがとうございました。</h3>
		<p>担当者がお問い合わせ内容を確認し、回答させていただきます。<br>ご返信にお時間を頂戴する場合がございますがご了承くださいませ。<br>
		もし3営業日経っても連絡がない場合は、通信エラーの可能性がございます。<br>
		お手数ですが、<?php echo LOCATION_TEL ?>までご連絡くださいませ。</p>
		<p class="btn btn_back"><a href="../">TOPページへ戻る</a></p>
	</div>

</div>
<?php include "../../templates/footer.php"; ?>
</body>
</html>
<?php $page = 'contact'; include "../config/include.php"; ?>

<!-- *** stylesheet *** -->
<?php include "../templates/common_css.php"; ?>
<link href="../css/<?php echo $page; ?>.css" rel="stylesheet" type="text/css" media="all">

<!-- *** javascript *** -->
<?php include "../templates/common_js.php"; ?>
</head>

<body id="<?php echo $page; ?>">
<?php include "../templates/header.php"; ?>
<?php include "../templates/nav.php"; ?>

<div class="con_title">
	<div class="st_center">
		<h3><span class="jp">お問い合わせ</span><br><span class="en">CONTACT</span></h3>
	</div>
</div>
<div id="contents">

	<div class="con_txt">
		<ul class="box_txt">
			<li>お問い合わせのご返答にはお時間を頂く場合がございます。</li>
			<li>当日・明日のお問い合わせ、その他お急ぎの場合は、恐れ入りますがお電話にてお問い合わせくださいますようお願い致します。</li>
			<li><span>※</span>は必須項目です。</li>
		</ul>
		<div class="box_contact">
			<p class="title_tel"><span>【</span>&nbsp;お急ぎの場合は<br class="view_tab-sp">お電話にてお問い合わせください&nbsp;<span>】</span></p>
			<dl>
				<dt>ホテル名</dt>
				<dd><p class="txt_tel"><span class="num">TEL: </span><a href="tel:0000000000">0000-00-0000</a></p></dd>
			</dl>
		</div>
	</div>

	<div class="con_flow">
		<ul>
			<li class="active">1.必須項目を<br class="view_sp">入力</li>
			<li>2.入力内容の<br class="view_sp">確認</li>
			<li class="last">3.送信<br class="view_sp">完了</li>
		</ul>
	</div>

	<div class="con_request">
		<form action="./#contact_form" method="post" name="contact_form" id="contact_form">
			<input type="hidden" name="mode" value="confirm" />
			<table class="tbl_primary">
				<tr class="select">
					<th>お問い合わせ項目</th>
					<td>
						<select name="contact_type">
							<option label="お選びください" value="">お選びください</option>
							<option label="宿泊について" value="1">宿泊について</option>
							<option label="レストランについて" value="2">レストランについて</option>
							<option label="温泉について" value="3">温泉について</option>
							<option label="館内施設について" value="4">館内施設について</option>
							<option label="ウエディングについて" value="5">ウエディングについて</option>
							<option label="アクセスについて" value="6">アクセスについて</option>
							<option label="アクティビティについて" value="7">アクティビティについて</option>
							<option label="その他" value="8">その他</option>
						</select>
					</td>
				</tr>
				<tr class="name">
					<th>お名前<span>※</span></th>
					<td>
						<input type="text" name="name[0]" value="" placeholder="例) 山田 太郎">
					</td>
				</tr>
				<tr class="name">
					<th>フリガナ<span>※</span></th>
					<td>
						<input type="text" name="kana[0]" value="" placeholder="例) ヤマダ タロウ">
					</td>
				</tr>
				<tr class="email">
					<th>メールアドレス<span >※</span></th>
					<td>
						<input type="email" name="mail" value="" placeholder="例) info@oooooo.co.jp">
					</td>
				</tr>
				<tr class="tel">
					<th>お電話番号<span >※</span></th>
					<td>
						<input type="tel" name="tel" value="" placeholder="例) 0000000000">
					</td>
				</tr>
				<tr class="name">
					<th>ご宿泊予約者(お名前)</th>
					<td>
						<input type="text" name="reservation_name[0]" value="" placeholder="例) 山田 太郎">
					</td>
				</tr>
				<tr class="day">
					<th>ご到着日</th>
					<td>
						<input type="text" id="datepicker" class="datepicker" name="arrival_date" value="" readonly="readonly" placeholder="例) 2018年4月4日">
						<p>※ご宿泊のご予約をされているお客様は、ご到着日をご入力ください。</p>
					</td>
				</tr>
				<tr class="text">
					<th>お問い合わせ内容<span>※</span></th>
					<td>
						<textarea name="content" placeholder=" お問い合わせ内容を出来るだけ具体的にご記入ください。"></textarea>
					</td>
				</tr>
			</table>
			<div class="box_btn01">
				<p class="btn btn_next">
					<a href="../">入力項目を確認する</a>
				</p>
			</div>
			<div class="box_btn02">
				<p class="btn btn_back">
					<a href="../">入力項目へ戻る</a>
				</p>
				<p class="btn btn_next">
					<input type="submit" value="送信する">
				</p>
			</div>
		</form>
	</div>

</div>
<?php include "../templates/footer.php"; ?>
</body>
</html>

以上是关于php 20180402お问い合わせ的主要内容,如果未能解决你的问题,请参考以下文章

css お问い合わせフォームサンプル

css お问い合わせフォーム(チェックボックス)

python SQLでSELECT DISTINCTしてユニークな组み合わせをカウントするような问い合わせを,熊猫のデータフレームに书き変えてみました。以下「お昼のセットメニューの组み合わせに投票」と

テレワーク可/田町MySQLサーバーリソースチェック/問い合わせ対応業務

swift 公司的FireStoreのRxSwiftとの组み合わせ.Codableも活用。

javascript 配列の组み合わせを再帰的に取得するやつ