-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
491 lines (474 loc) · 24 KB
/
index.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>登録予約フォーム</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/entryform.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body id="entry-form">
<div class="toaster" style="display: none;">Yay, the form is valid!</div>
<section class="entry-form-container">
<div class="row header">
<h1>登録予約フォーム</h1>
<h2>ご入力いただけましたら、追って弊社よりご連絡差し上げます。<br>
ご登録についてご不明点がある場合もお気軽にお問い合わせ下さい。</h2>
</div>
<div class="row body">
<form name="signup" class="form" novalidate method="post" onsubmit="return false;" >
<div class="l-float-left" data-states-for="family_name_kanji">
<label for="family_name_kanji" >姓 <span class="callout callout-must">必須</span></label>
<input type="text"
id="family_name_kanji"
name="family_name_kanji"
class="form-input form-addon"
placeholder="山田"
value=""
required
formnovalidate>
<div data-errors-for="family_name_kanji"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 姓を漢字で入力してください。 </small> </div>
</div>
<div class="pull-right" data-states-for="first_name_kanji">
<label for="first_name_kanji">名<span class="callout callout-must">必須</span></label>
<input type="text"
id="first_name_kanji"
name="first_name_kanji"
class="form-input form-addon"
placeholder="太郎"
value=""
required
formnovalidate>
<div data-errors-for="first_name_kanji"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 名を漢字で入力してください。 </small> </div>
</div>
<div class="l-float-left mb5" data-states-for="family_name_kana">
<label for="family_name_kana" >姓 (フリガナ) <span class="callout callout-must">必須</span></label>
<input type="text"
id="family_name_kana"
name="family_name_kana"
class="form-input form-addon katakana"
placeholder="ヤマダ"
value=""
required
formnovalidate>
<div data-errors-for="family_name_kana"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 姓をカタカナで入力してください。 </small> <small class="form-error is-hidden"
data-errors-when="patternMismatch"> 全角カタカナで入力してください。 </small> </div>
</div>
<div class="pull-right mb5" data-states-for="first_name_kana">
<label for="first_name_kana">名 (フリガナ)<span class="callout callout-must">必須</span></label>
<input type="text"
id="first_name_kana"
name="first_name_kana"
class="form-input form-addon katakana"
placeholder="タロウ"
value=""
required
formnovalidate>
<div data-errors-for="first_name_kana"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 名をカタカナで入力してください。 </small> </div>
</div>
<div class="l-float-left" data-states-for="radio">
<div class="l-w220px"> <i>性別<span class="callout callout-must">必須</span></i> </div>
<div class="l-float-left mb5">
<label class="mt-label" for="radio1">
<input type="radio" name="radio" id="radio1" value="radio1" class="radio-inline" checked required formnovalidate>
男性</label>
</div>
<div class="l-float-left">
<label class="mt-label" for="radio2">
<input type="radio" name="radio" id="radio2" value="radio2" class="radio-inline" required formnovalidate>
女性</label>
</div>
<div data-errors-for="radio" class=" clearfix"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 性別を選んでください。 </small> </div>
</div>
<div class=" pull-right pos-rel mb5" data-states-for="pref">
<label for="pref">お住まい<span class="callout callout-must">必須</span></label>
<select name="pref"
class="form-input form-addon"
id="pref"
tabindex="1"
required="required"
formnovalidate>
<optgroup label="北海道・東北">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東">
<option selected value="東京都">東京都 (23区)</option>
<option value="神奈川県">東京都 (市町村部)</option>
<option value="神奈川県">神奈川県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="山梨県">山梨県</option>
</optgroup>
<optgroup label="信越・北陸">
<option value="新潟県">新潟県</option>
<option value="長野県">長野県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
</optgroup>
<optgroup label="東海">
<option value="愛知県">愛知県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="三重県">三重県</option>
</optgroup>
<optgroup label="近畿">
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="京都府">京都府</option>
<option value="滋賀県">滋賀県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>
</div>
<div data-errors-for="pref" class="ml-pref-valid"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> お住まいを選んでください。 </small> </div>
<div class="clearfix"></div>
<div class=" mb5 l-float-left " data-states-for="birth_yaer">
<label for="birth_year">誕生年 <span class="callout callout-must">必須</span></label>
<select name="birth_yaer"
class="form-input form-addon"
id="birth_yaer"
tabindex="1"
required="required"
formnovalidate>
<option value="1965">1965年</option>
<option value="1966">1966年</option>
<option value="1967">1967年</option>
<option value="1968">1968年</option>
<option value="1969">1969年</option>
<option value="1970">1970年</option>
<option value="1971">1971年</option>
<option value="1972">1972年</option>
<option value="1973">1973年</option>
<option value="1974">1974年</option>
<option value="1975">1975年</option>
<option value="1976">1976年</option>
<option value="1977">1977年</option>
<option value="1978">1978年</option>
<option value="1979">1979年</option>
<option value="1980">1980年</option>
<option value="1981">1981年</option>
<option value="1982">1982年</option>
<option value="1983">1983年</option>
<option value="1984">1984年</option>
<option value="1985">1985年</option>
<option value="1986">1986年</option>
<option value="1987">1987年</option>
<option value="1988">1988年</option>
<option value="1989">1989年</option>
<option value="1990" selected>1990年</option>
<option value="1991">1991年</option>
<option value="1992">1992年</option>
<option value="1993">1993年</option>
<option value="1994">1994年</option>
<option value="1995">1995年</option>
<option value="1996">1996年</option>
<option value="1997">1997年</option>
<option value="1998">1998年</option>
<option value="1999">1999年</option>
<option value="2000">2000年</option>
</select>
</div>
<div data-errors-for="birth_year" class="ml-pref-valid"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 生年月日をご入力ください。 </small> </div>
<div class=" mb5 l-float-left ml-birth-cell2 l-w100px" data-states-for="birth">
<label for="birth_month">誕生月 <span class="callout callout-must">必須</span></label>
<select name="birth_month"
class="form-input form-addon l-w100px"
id="birth_month"
tabindex="1"
required="required"
formnovalidate>
<option value="" selected disabled>--</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>
</div>
<div class=" mb5 l-w100px l-float-left ml-birth-cell" data-states-for="birth">
<label for="birth_day">誕生日 <span class="callout callout-must">必須</span></label>
<select name="birth_day"
class="form-input form-addon l-w100px"
id="birth_day"
tabindex="1"
required="required"
formnovalidate>
<option value="" selected disabled>--</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>
</div>
<div class="pos-rel">
<div data-errors-for="birth_month" class="ml-birth-month-valid"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 月をご入力ください。 </small> </div>
<div data-errors-for="birth_day" class="ml-birth-day-valid"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 日をご入力ください。 </small> </div>
</div>
<div class="l-float-left l-w220px mb9" data-states-for="tel">
<label for="tel">電話番号<small class="color-default">(ハイフン無し半角数字)</small><span class="callout callout-must">必須</span></label>
<input type="tel"
id="tel"
name="tel"
class="form-input form-addon js-characters-change"
placeholder="09012345678"
pattern="^[0-9()+\s]{8,13}$"
value=""
required
formnovalidate>
<div data-errors-for="tel"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 電話番号を入力してください。 </small> <small class="form-error is-hidden"
data-errors-when="patternMismatch"> ハイフン無し半角数字で入力してください。 </small> </div>
</div>
<div class="pull-right" data-states-for="email">
<label for="email">メール<small class="color-default">(半角英数)</small><span class="callout callout-must">必須</span></label>
<input type="email"
id="email"
name="email"
class="form-input form-addon js-characters-change"
placeholder="[email protected]"
value=""
required
formnovalidate>
<div data-errors-for="email"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> メールアドレスを入力してください。 </small> <small class="form-error is-hidden"
data-errors-when="typeMismatch"> @(アットマーク) .(カンマ)はついてますか? </small> </div>
</div>
<div class="clearfix"></div>
<h3>キャリアカウンセリングを予約する</h3>
<div class="divider2 mb1em"></div>
<div id="js-date" class="l-float-left" data-states-for="datepicker">
<label for="datepicker">キャリアカウンセリング希望日</label>
<input type="text" id="datepicker" name="datepicker" class="date form-input form-addon" placeholder="選択してください" value="選択してください"formnovalidate>
<div data-errors-for="datepicker"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 希望日を選んでください。</small> </div>
</div>
<div class=" pull-right" data-states-for="time">
<label for="time">時間 <small class="color-default">※平日/土曜日で時間が違います。</small></label>
<select name="time"
class="form-input form-addon"
id="time"
tabindex="2"
formnovalidate>
<option value="" selected disabled>選択してください</option>
<optgroup label="平日">
<option value="5">11:00 (平日)</option>
<option value="6">13:00 (平日)</option>
<option value="7">15:00 (平日)</option>
<option value="8">17:00 (平日)</option>
<option value="9">19:00 (平日)</option>
</optgroup>
<optgroup label="土曜日">
<option value="1s">12:30 (土曜日)</option>
<option value="2s">14:30 (土曜日)</option>
<option value="3s">16:30 (土曜日)</option>
</optgroup>
<option value="" disabled>※日曜祝日は休業日です。</option>
</select>
</div>
<div class="ml-time-valid" data-errors-for="time"> <small class="form-error is-hidden"
data-errors-when="valueMissing"> 希望時間を選んでください。 </small> </div>
<div class="clearfix"></div>
<div class="mb1em">
<label for="comments">備考欄</label>
<textarea cols="46" rows="3" name="comments" placeholder="ご希望・備考等あればお知らせください" accesskey="T" tabindex="3" formnovalidate></textarea>
</div>
<div data-states-for="privacy">
<input type="checkbox" name="privacy" id="privacy" value="privacy"class=" margin-0 radio-inline large-checkbox form-addon " required formnovalidate>
<p><span class="callout callout-must-left">必須</span><strong><a rel="leanModal" href="#privacy-policy">プライバシーポリシー</a>を確認し、同意しました。</strong></p>
<div data-errors-for="privacy"> <small class="form-error is-hidden privacy-policy"
data-errors-when="valueMissing"> 内容を確認のうえチェックを入れてください。 </small> </div>
<div id="privacy-policy">
<div class="privacy-policy-inner"> <b>当社は個人情報の保護について以下の取り組みを実施致します。</b>
<div class="divider2 mb1em"></div>
<dl>
<dt>■当社が収集する個人情報</dt>
<dd>当社のお取引先、当社に入社希望される方々の個人情報の取扱いについて、個人情報管理責任者を設置し適切且つ安全に管理致します。<br>
webサイト等を通じ当社が個人情報を直接的に収集する場合は、事前に収集の目的を明確に開示し、その目的の範囲内でのみ利用致します。<br>
個人情報の利用及び提供を行う為の措置を講じ、個人情報を無断で利用致しません。また、個人情報を外部に委託する場合は当社所定の規則に従い適切に取扱います。<br>
個人情報への不正アクセス、紛失、破壊、改ざん及び漏洩等、個人情報に関するリスクに対して、合理的な予防対策を講じます。</dd>
<dt>■委託元企業様よりお預かりする個人情報</dt>
<dd>個人情報の取扱いの適正を確認した上で、当社が適正と判断した情報につきましては、以下の対応を実施致します。<br>
個人情報管理責任者の下、適正且つ安全に管理致します。<br>
契約の範囲内で利用・提供し、第三者への提供・開示は一切行ないません。</dd>
<dt>■個人情報保護の為のコンプライアンス・プログラム</dt>
<dd>当社は、保有する個人情報に関して適用される法令、規範を尊守するとともに、個人情報保護の為のコンプライアンス・プログラムを制定し、その継続的見直しと改善を通じて個人情報の適切な管理の維持運営に努めてまいります。</dd>
</dl>
</div>
<div > <a class="modal_close" href="javascript:void(0)"></a> </div>
</div>
</div>
<div class="form-footer__cta div-center">
<button type="submit" class="button btn btn-submit">Sign up</button>
</div>
</form>
</div>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/gentle_form.js">//フォームに関するjs</script>
<script type="text/javascript" src="js/jquery.autoKana.js">//フリガナ入力支援</script>
<script type="text/javascript" src="js/valueconvertor.js">//ひらがな→カタカナ自動変換</script>
<script type="text/javascript" src="js/jquery-ui.min.js">//日時取得</script>
<script type="text/javascript" src="js/jquery.leanModal.min.js">//モーダルウィンドウ</script>
<script type="text/javascript">
var toaster=document.querySelector(".toaster");
new GentleForm('form', function (event, isValid, data) {
event.preventDefault();
if(isValid){
window.location.href="./confirm.html"
}else{
toast("入力エラーがあります。<br>・必須項目の抜けはありませんか?<br>・プライバシーポリシーのチェックが外れていませんか?","error")
}
});
var timeout;
function toast(b,a){
if(a=="success"){
toaster.classList.remove("toaster--error");
toaster.classList.add("toaster--success")
}else{
toaster.classList.remove("toaster--success");
toaster.classList.add("toaster--error")
}
toaster.innerHTML=b;toaster.style.display="block";
clearTimeout(timeout);
timeout=setTimeout(function(){
toaster.classList.add("toaster--show");
timeout=setTimeout(function(){
toaster.classList.remove("toaster--show");
timeout=setTimeout(function(){
toaster.style.display="none"
},300)},5000)},7)};
$(function() {
// フォームの入力欄が更新されたかどうかを表すフラグ。
var isChanged = false;
$(window).bind("beforeunload", function() {
if (isChanged) {
// isChangedフラグがtrueの場合、つまり入力内容が変更されていた
// 場合のみ文字列を返すようにします。
return "入力途中の項目があります。";
}
});
$("form input, form select, form textarea").change(function() {
// 入力内容が更新されている場合は、isChangedフラグをtrueにします。
isChanged = true;
});
$("input[type=submit]").click(function() {
// フォームをサブミットする前にフラグを落とします。
// ※ これをやらないと、サブミット時に確認メッセージが表示されてしまいます。
isChanged = false;
});
})</script>
<script type="text/javascript">//jquery.autoKana.js フリガナ入力支援
$(document).ready(
function() {
$.fn.autoKana('#family_name_kanji', '#family_name_kana', {
katakana : true //true：カタカナ、false：ひらがな（デフォルト）
});
$.fn.autoKana('#first_name_kanji', '#first_name_kana', {
katakana : true //true：カタカナ、false：ひらがな（デフォルト）
});
//メソッド メアド、電話の全角文字を半角に自動変換する
$(".js-characters-change").blur(function(){
charactersChange($(this));
});
charactersChange = function(ele){
var val = ele.val();
var han = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
if(val.match(/[Ａ-Ｚａ-ｚ０-９]/g)){
$(ele).val(han);
}
}
//メソッド モーダルウィンドウ
$( 'a[rel*=leanModal]').leanModal({
top: 150, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
});
});
//メソッド bootstrap-datepicker.js
$(function(){
$("#datepicker").datepicker();
$("#datepicker").datepicker('option','beforeShowDay',function(date){
var ret = [(date.getDay() != 0 )];
return ret;
});
});
</script>
</body>
</html>