Commit f27308c6 by Orine Matsui

コンタクトフォーム、確認、完了を追加

parent 0ef72ae6
......@@ -250,9 +250,16 @@ contact.css
line-height: 1.4; } }
.contact-bottom-buttons button[disabled="disabled"] {
background: #ccc;
color: #363636;
border: 2px solid #ccc;
background-color: #ccc;
cursor: none;
}
.contact-bottom-buttons button[disabled="disabled"]:after {
display: none;
}
.header-contact {
......@@ -348,8 +355,19 @@ button {
width: 100%;
}
.form_row.form_row_content .right label:not(:first-child) {
margin-left: 40px;
.form_row .right .form_radiobox {
margin-top: 15px;
margin-bottom: 15px;
}
.form_row .right .form_radiobox label {
display: inline-block;
margin-right: 40px;
}
.form_row_theme .right .form_radiobox label {
width: 30%;
margin-right: 0;
}
.form_row ul {
......@@ -387,7 +405,7 @@ input[type="radio"] + .label_text:before {
content: "";
display: block;
position: absolute;
top: 4px;
top: 2px;
left: 0;
width: 15px;
height: 15px;
......@@ -398,7 +416,7 @@ input[type="radio"]:checked + .label_text::after {
content: "";
display: block;
position: absolute;
top: 7px;
top: 5px;
left: 3px;
width: 11px;
height: 11px;
......@@ -590,6 +608,10 @@ input[type="email"] {
width: 144px;
margin-right: 10px;
}
#number_of_employees {
width: 144px;
margin-right: 10px;
}
#zip,
#month,
#day,
......@@ -629,7 +651,9 @@ input[type="email"] {
margin-top: 0;
}
p + .form_checkbox {
margin-top: 0;
}
.form_select {
margin-left: 16px;
......@@ -666,6 +690,8 @@ input[type="email"] {
width: 100%;
color: #dc3b3a;
font-size: 14px;
display: none!important;
}
.form_row .right .alert_area {
margin-top: -10px;
......@@ -699,12 +725,13 @@ input[type="email"] {
margin-bottom: 20px;
}
.contact-bottom-buttons {
margin-top: 60px;
margin: 60px auto 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 81px;
width: 80%;
}
.contact-bottom-buttons .left {
width: 33.75%;
......@@ -765,8 +792,8 @@ input[type="email"] {
margin-top: 0;
margin-bottom: 0;
}
.form_row.form_row_content .right label:not(:first-child) {
margin-left: 40px;
.form_row.form_row_theme .right label:not(:first-child) {
margin-left: 0;
}
#last_name,
#first_name,
......@@ -858,28 +885,34 @@ input[type="email"] {
confirm
------------------------------------------ */
#p-confirm .form_row {
.p-contact-confirm .form_row {
padding-top: 15px;
padding-bottom: 15px;
}
#p-confirm p + .form_row {
margin-top: 60px;
.p-contact-confirm .form_row.form_row_02 .right .label_text,
.p-contact-confirm .form_row.form_row_02 .right label {
width: auto;
}
#p-confirm .contact-bottom-buttons {
border-top: 1px solid #c4c2bf;
}
#p-confirm .contact-bottom-buttons button[type="submit"] {
margin-top: 60px;
.p-contact-confirm .form_row.form_row_02 .right label + label {
margin-left: 20px;
}
@media(max-width:768px) {
#p-confirm .contact-bottom-buttons .left button[type="submit"] {
margin-bottom: 0px;
@media(max-width:768px) {
.p-contact-confirm .form_row {
padding-top: 0;
}
.p-contact-confirm .form_row .left {
padding-bottom: 8px;
}
#p-confirm .contact-bottom-buttons .right button[type="submit"] {
margin-top: 30px;
.form_row_theme .right .form_radiobox label {
width: 100%;
margin-left: 0;
}
.p-contact-confirm .contact-bottom-buttons .c-btn1,
.p-contact-confirm .contact-bottom-buttons .left button[type="submit"] {
margin-bottom: 0px;
}
}
......
<?php $pageid="contact";?>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/header.php'); ?>
<div class="p-other">
<div class="c-breadcrumb pc-only">
<ul class="c-breadcrumb__inner">
<li class="c-breadcrumb__item"><a href="/"><span>TOP</span></a></li>
<li class="c-breadcrumb__item"><a href="/contact/"><span>お問い合わせ</span></a></li>
<li class="c-breadcrumb__item"><span>お問い合わせ内容の確認</span></li>
</ul>
</div>
<section class="c-mainvisual p-other-mv">
<div class="c-mainvisual__inner">
<h2 class="c-mainvisual__ttl">お問い合わせ内容の確認</h2>
</div>
</section>
<div class="container">
<main class="p-contact-content p-contact-confirm">
<section class="otherSingle2">
<form method="post" action="">
<div class="form_row form_row_content">
<div class="left"><label for="form_content">ご相談内容</label></div>
<div class="right">
<label><span class="label_text">サービス</span></label>
</div>
</div>
<div class="form_row form_row_02">
<div class="left"><label for="last_name">お名前</label></div>
<div class="right">
<label><span class="label_text">性お名前</span></label>
<label><span class="label_text">名お名前</span></label>
</div>
</div>
<div class="form_row form_row_02">
<div class="left"><label for="last_name_kana">お名前(かな)</label></div>
<div class="right">
<label><span class="label_text">セイお名前(かな)</span></label>
<label><span class="label_text">メイお名前(かな)</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="tel_no">電話番号</label></div>
<div class="right">
<label><span class="label_text">00000000000</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="regist_email">メールアドレス</label></div>
<div class="right">
<label><span class="label_text">aaa@aaa.com</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="office_name">会社名</label></div>
<div class="right">
<label><span class="label_text">会社名会社名会社名</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="position">役職</label></div>
<div class="right">
<label><span class="label_text">役職役職役職役職役職</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="industry">業種</label></div>
<div class="right">
<label><span class="label_text">業種業種業種業種業種業種</span></label>
</div>
</div>
<div class="form_row">
<div class="left"><label for="number_of_employees">社員数</label></div>
<div class="right">
<label><span class="label_text">00000</span><span class="label_text"></span></label>
</div>
</div>
<div class="form_row form_row_theme">
<div class="left"><label for="form_theme">テーマとされていること</label></div>
<div class="right">
<label><span class="label_text">離職率の低下</span></label>
</div>
</div>
<div class="form_row">
<div class="left">お問合わせ内容</div>
<div class="right">
<label><span class="label_text">お問合わせ内容お問合わせ内容お問合わせ内容<br>お問合わせ内容お問合わせ内容お問合わせ内容<br>お問合わせ内容お問合わせ内容お問合わせ内容<br>お問合わせ内容お問合わせ内容お問合わせ内容</span></label>
</div>
</div>
<div class="form_row">
<div class="left">個人情報保護方針</div>
<div class="right">
<label><span class="label_text">「個人情報保護取扱いについて」及び「プライバシーポリシー」を確認のうえ、同意しました。</span></label>
</div>
</div>
<div class="contact-bottom-buttons">
<div class="left c-btn1">
<button type="submit" name="action" value="back" class="c-btn1__txt">入力内容修正</button>
</div>
<div class="right c-btn1 c-btn-faq">
<button type="submit" name="action" value="submit" class="c-btn1__txt">送信する</button>
</div>
</div>
</form>
</section>
</main>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/footer.php'); ?>
<?php $pageid="contact";?>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/header.php'); ?>
<div class="p-other">
<div class="c-breadcrumb pc-only">
<ul class="c-breadcrumb__inner">
<li class="c-breadcrumb__item"><a href="/"><span>TOP</span></a></li>
<li class="c-breadcrumb__item"><a href="/contact/"><span>お問い合わせ</span></a></li>
<li class="c-breadcrumb__item"><span>送信完了</span></li>
</ul>
</div>
<section class="c-mainvisual p-other-mv">
<div class="c-mainvisual__inner">
<h2 class="c-mainvisual__ttl">送信完了</h2>
</div>
</section>
<div class="container">
<main class="p-contact-content p-contact-confirm">
<section class="otherSingle2">
<h3 class="c-title1">お問い合わせを受け付けました。</h3>
<p class="p-contact-text2">お問い合わせ内容を確認し、担当者よりご連絡を差し上げます。<br>
尚、お問い合わせの内容により、多少お時間をいただく場合がございます。<br>
予め、ご了承ください。</p>
<div class="contact-bottom-buttons">
<div class="c-btn1 c-btn-faq">
<a href="/" class="c-btn1__txt">トップページへ</a>
</div>
</div>
</section>
</main>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/footer.php'); ?>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment