Skip to content

sora / achievement

Go to a project
Commit f27308c6 by Orine Matsui
Options

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

parent 0ef72ae6
Inline Side-by-side
Showing with 265 additions and 243 deletions
achievement-official.conohawing.com/common_previous/css/contact.css
......@@ -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;
}
}
......
achievement-official.conohawing.com/contact/form/confirm.php 0 → 100644
<?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'); ?>
achievement-official.conohawing.com/contact/form/index.php
......@@ -6,7 +6,8 @@
<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"><span>お問い合わせ</span></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">
......@@ -25,10 +26,12 @@
<div class="form_row form_row_content">
<div class="left"><label for="form_content">ご相談内容</label><span class="required error">必須</span></div>
<div class="right">
<label><input type="radio" name="form_content" value="male" id="form_content_01" required><span class="label_text">サービス</span></label>
<label><input type="radio" name="form_content" value="female" id="form_content_02" required><span class="label_text">採用</span></label>
<label><input type="radio" name="form_content" value="male" id="form_content_03" required><span class="label_text">個別相談</span></label>
<label><input type="radio" name="form_content" value="female" id="form_content_04" required><span class="label_text">その他</span></label>
<div class="form_radiobox">
<label><input type="radio" name="form_content" value="male" id="form_content_01" required><span class="label_text">サービス</span></label>
<label><input type="radio" name="form_content" value="female" id="form_content_02" required><span class="label_text">採用</span></label>
<label><input type="radio" name="form_content" value="male" id="form_content_03" required><span class="label_text">個別相談</span></label>
<label><input type="radio" name="form_content" value="female" id="form_content_04" required><span class="label_text">その他</span></label>
</div>
<p class="alert_text">お問い合わせ項目を選んでください。</p>
</div>
</div>
......@@ -53,173 +56,6 @@
</div>
</div>
<div class="form_row">
<div class="left"><label for="gender">性別</label><span class="required error">必須</span></div>
<div class="right">
<label><input type="radio" name="gender" value="male" id="gender_male" required><span class="label_text">男</span></label>
<label><input type="radio" name="gender" value="female" id="gender_female" required><span class="label_text">女</span></label>
</div>
</div>
<div class="form_row form_row_04">
<div class="left"><label for="gender">生年月日</label><span class="required error">必須</span></div>
<div class="right">
<label for="year"><input type="text" name="year" id="year" required><span class="label_text">年</span></label>
<p class="alert_text alert_text_sp">年が入力されていません。</p>
<label for="month" class="form_select"><select name="month" id="month" required>
<option value="">【選択してください】</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></label><span class="label_text">月</span>
<p class="alert_text alert_text_sp">月が選択されていません。</p>
<label for="day" class="form_select"><select name="day" id="day" required>
<option value="" selected="selected">【選択してください】</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></label><span class="label_text">日</span>
<div class="alert_area"><p class="alert_text alert_text_pc">年が入力されていません。</p>
<p class="alert_text alert_text_pc">月が選択されていません。</p>
<p class="alert_text">日が選択されていません。</p></div>
</div>
</div>
<div class="form_row">
<div class="left"><label for="zip">郵便番号</label><span class="required error">必須</span></div>
<div class="right">
<input type="text" name="zip" id="zip" pattern="\d{3}[\-\s]?\d{4}" x-autocompletetype="postal-code" required>
<div class="alert_area"><p class="sup_text">※郵便番号7桁をハイフン(-)なしでご入力ください</p>
<p class="alert_text">郵便番号が入力されていません。</p></div>
</div>
</div>
<div class="form_row">
<div class="left"><label for="pref">住所</label><span class="required error">必須</span></div>
<div class="right">
<div class="form-group">
<label class="form_select"><select name="pref" id="pref" x-autocompletetype="region" required>
<option value="" selected="selected">-- 都道府県 --</option>
<optgroup label="北海道">
<option value="1">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸">
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
</optgroup>
<optgroup label="中部">
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
</optgroup>
<optgroup label="近畿">
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州/沖縄">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</optgroup>
</select></label>
<p class="alert_text">都道府県が入力されていません。</p>
</div>
<div class="form-group-02"><div class="form-group">
<label for="town">市区町村/番地</label>
<input type="text" name="town" id="town" x-autocompletetype="street-address" required>
<p class="alert_text">市区町村が入力されていません。</p>
</div>
<div class="form-group">
<label for="building">マンション名</label>
<input type="text" name="building" id="building">
<p class="alert_text">丁目番地・マンション名が入力されていません。</p>
</div></div>
</div>
</div>
<div class="form_row">
<div class="left"><label for="tel_no">電話番号</label><span class="required error">必須</span></div>
<div class="right">
<input type="text" name="tel_no" placeholder="" id="tel_no" value="" maxlength="12" required="required">
......@@ -228,13 +64,6 @@
</div>
<div class="form_row">
<div class="left"><label for="fax_no">FAX番号</label></div>
<div class="right">
<input type="text" name="fax_no" placeholder="" id="fax_no" value="" maxlength="12">
</div>
</div>
<div class="form_row">
<div class="left"><label for="regist_email">メールアドレス</label><span class="required error">必須</span></div>
<div class="right">
<input type="email" name="mail_address" placeholder="" id="regist_email" value="" maxlength="256" required="required">
......@@ -257,13 +86,6 @@
</div>
<div class="form_row">
<div class="left"><label for="department_name">部署名</label></div>
<div class="right">
<input type="text" name="department_name" placeholder="" id="department_name" value="" maxlength="80">
</div>
</div>
<div class="form_row">
<div class="left"><label for="position">役職</label></div>
<div class="right">
<input type="text" name="position" placeholder="" id="position" value="" maxlength="80">
......@@ -271,43 +93,34 @@
</div>
<div class="form_row">
<div class="left"><label for="club_members">クラブ会員登録</label><span class="required error">必須</span></div>
<div class="left"><label for="industry">業種</label></div>
<div class="right">
<label><input id="club_members1" name="club_members" type="radio" value="1" checked="checked"><span class="label_text">有</span></label>
<label><input id="club_members2" name="club_members" type="radio" value="2"><span class="label_text">無</span></label>
<input type="text" name="industry" placeholder="" id="industry" value="" maxlength="80">
</div>
</div>
<div class="form_row">
<div class="left"><label for="members_number">会員番号</label></div>
<div class="left"><label for="number_of_employees">社員数</label></div>
<div class="right">
<input type="text" name="members_number" data-charcheck="digit" placeholder="" id="members_number" value="" maxlength="20">
<input type="text" name="faxnumber_of_employees_no" placeholder="" id="number_of_employees" value="" maxlength="８"><span class="label_text">人</span>
</div>
</div>
<div class="form_row form_row_03">
<div class="left">お問合せのきっかけ</div>
<div class="form_row form_row_theme">
<div class="left"><label for="form_theme">テーマとされていること</label><span class="required error">必須</span></div>
<div class="right">
<div class="form_checkbox">
<label><input id="inquiry_content1" name="inquiry_content[]" type="checkbox" value="1"><span class="label_text">検索エンジン（Yahoo!,Google等）</span></label>
<label><input id="inquiry_content2" name="inquiry_content[]" type="checkbox" value="2"><span class="label_text">Webサイトより</span></label>
<label><input id="inquiry_content3" name="inquiry_content[]" type="checkbox" value="3"><span class="label_text">DM</span></label>
<label><input id="inquiry_content4" name="inquiry_content[]" type="checkbox" value="4"><span class="label_text">弊社関連書籍</span></label>
<label><input id="inquiry_content5" name="inquiry_content[]" type="checkbox" value="5"><span class="label_text">メールマガジン</span></label>
<label><input id="inquiry_content6" name="inquiry_content[]" type="checkbox" value="6"><span class="label_text">青木仁志オフィシャルサイト</span></label>
<label><input id="inquiry_content7" name="inquiry_content[]" type="checkbox" value="7"><span class="label_text">ClubNews</span></label>
<label><input id="inquiry_content8" name="inquiry_content[]" type="checkbox" value="8"><span class="label_text">知人からの紹介</span></label>
<label><input id="inquiry_content9" name="inquiry_content[]" type="checkbox" value="9"><span class="label_text">弊社コンサルタントからの紹介</span></label>
<label><input id="inquiry_content10" name="inquiry_content[]" type="checkbox" value="10"><span class="label_text">その他</span></label>
</div>
</div>
</div>
<div class="form_row">
<div class="left"><label for="service_use">アチーブメント株式会社<br>サービス利用の有無</label></div>
<div class="right">
<label><input id="service_use1" name="service_use" type="radio" value="1" checked="checked"><span class="label_text">有</span></label>
<label><input id="service_use2" name="service_use" type="radio" value="2"><span class="label_text">無</span></label>
<div class="form_radiobox">
<label><input type="radio" name="form_theme" value="male" id="form_theme_01" required><span class="label_text">離職率の低下</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_02" required><span class="label_text">売上の増大</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_03" required><span class="label_text">顧客満足の向上</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_04" required><span class="label_text">営業力強化</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_05" required><span class="label_text">現場の主体性向上</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_06" required><span class="label_text">理念浸透の推進</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_07" required><span class="label_text">幹部人材の育成</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_08" required><span class="label_text">人間関係の改善</span></label>
<label><input type="radio" name="form_theme" value="male" id="form_theme_09" required><span class="label_text">時間の使い方</span></label>
</div>
<p class="alert_text">テーマとされていることを選んでください。</p>
</div>
</div>
......@@ -322,17 +135,18 @@
<div class="form_row">
<div class="left">個人情報保護方針<span class="required error">必須</span></div>
<div class="right">
<p>当社の「<a href="#" target="_blank">個人情報保護方針及び個人情報の取り扱い指針</a>」に承諾頂いた上で送信をお願い致します。</p>
<p>個人情報をご入力頂く前に、「<a href="https://achievement.co.jp/privacy/" target="_blank">個人情報保護取扱いについて</a>」及び「<a href="https://achievement.co.jp/policy/" target="_blank">プライバシーポリシー</a>」を必ずご一読くださいませ。</p>
<div class="form_checkbox">
<label><input id="info_agreement" required="required" name="info_agreement" type="checkbox" value="1"><span class="label_text">個人情報保護方針に同意します。</span></label>
<p class="alert_text">個人情報保護方針をご確認のうえ、同意してください。</p>
<label><input id="info_agreement" required="required" name="info_agreement" type="checkbox" value="1"><span class="label_text">「個人情報保護取扱いについて」及び「プライバシーポリシー」に同意します。</span></label>
<p class="alert_text">「個人情報保護取扱いについて」及び「プライバシーポリシー」をご確認のうえ、同意してください。</p>
</div>
</div>
</div>
<div class="contact-bottom-buttons">
<div class="left c-btn1"><a href="https://www.moyore-niigata.jp/contact" class="c-btn1__txt">リセットする</a></div>
<div class="right c-btn1 c-btn-faq"><button type="submit" class="c-btn1__txt">送信する</button></div>
<div class="c-btn1 c-btn-faq"><button type="submit" class="c-btn1__txt">送信する</button></div>
</div>
<div class="contact-bottom-buttons">
<div class="c-btn1 c-btn-faq"><button type="submit" class="c-btn1__txt" disabled="disabled">送信する</button></div>
</div>
</form>
......
achievement-official.conohawing.com/contact/form/thanks.php 0 → 100644
<?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