質問編集履歴
2
ソースの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,17 +18,75 @@
|
|
|
18
18
|
■参考にしたページ
|
|
19
19
|
https://qiita.com/dolaemoso/items/fd05c101e7e190070059
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
親ページのソースおよびiframe内のソースが下記となります。
|
|
22
|
-
ただ、どうやったら動作するかわからずコメントアウトしています。
|
|
23
22
|
|
|
23
|
+
親ページのソース
|
|
24
24
|
```ここに言語を入力
|
|
25
|
+
<!DOCTYPE html>
|
|
26
|
+
<html lang="ja">
|
|
27
|
+
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
|
|
28
|
+
<!--中略-->
|
|
29
|
+
<link rel="stylesheet" href="assets/css/base.css">
|
|
30
|
+
<link rel="stylesheet" href="assets/css/form.css">
|
|
31
|
+
<link rel="icon" href="http://140.227.39.204/~work260/favicon.ico">
|
|
32
|
+
<link rel="apple-touch-icon" href="http://140.227.39.204/~work260/assets/img/apple-touch-icon.png">
|
|
33
|
+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
34
|
+
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
|
|
35
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
36
|
+
</head>
|
|
37
|
+
<body id="page72" class="normal">
|
|
38
|
+
<header><!--中略--></header>
|
|
39
|
+
<main id="wrapper">
|
|
40
|
+
<article>
|
|
41
|
+
<section id="wide"><h2 class="wf4 cbc">お問合せ</h2></section>
|
|
42
|
+
<section id="contents" class="clearfix">
|
|
43
|
+
<div id="mainArea" class="clearfix">
|
|
44
|
+
<div id="fbox">
|
|
45
|
+
<div class="toiawaseTopBox"><p class="tfLink"><a href="#tel_fax" class="pt">電話をご利用の方はこちら</a></p></div>
|
|
46
|
+
<div><iframe id="iframe" src="http://140.227.39.204/~work260/cgi-bin/toiawase/form.cgi?trackerId=&siteId="></iframe></div>
|
|
47
|
+
<a name="tel_fax" id="tel_fax"></a>
|
|
48
|
+
<div class="tfBox"><dl class="bdt solid bl clearfix"><dt class="wf2 bc2">電話でのお問合せ</dt><dd><div class="fst wf3 tbc"><span class="tit">TEL.</span><a class="number" href="tel:0120-123-456" id="form_tel">0120-123-456</a></div><div class="lst">[営業時間] 10:00～19:00<br>[定休日] 日曜日</div></dd></dl></div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
</article>
|
|
53
|
+
</main>
|
|
54
|
+
<footer class="wbg bl">
|
|
55
|
+
<!--中略-->
|
|
56
|
+
</footer>
|
|
57
|
+
<script src="assets/js/jquery.flexnav.js"></script>
|
|
58
|
+
<script src="assets/js/jquery.smoothScroll.js"></script>
|
|
59
|
+
<script src="assets/js/lightbox-2.6.min.js"></script>
|
|
60
|
+
<script src="assets/js/pager.js" defer></script>
|
|
61
|
+
<script defer>
|
|
62
|
+
jQuery(document).ready(function($){$(".navi_p").flexNav();});
|
|
63
|
+
$(function(){
|
|
64
|
+
var topBtn=$('#pageTop');
|
|
65
|
+
var obj=$('#iframe');
|
|
66
|
+
var tf=$('#tel_fax');
|
|
67
|
+
topBtn.hide();
|
|
68
|
+
$(window).scroll(function(){if($(this).scrollTop()> 100){topBtn.fadeIn();}else{topBtn.fadeOut();};});
|
|
69
|
+
tf.click(function(){
|
|
70
|
+
var speed = 500;
|
|
71
|
+
var href= $(this).attr("href");
|
|
72
|
+
var target = $(href == "#" || href == "" ? 'html' : href);
|
|
73
|
+
var position = target.offset().top;
|
|
74
|
+
$("html, body").animate({scrollTop:position}, speed, "swing");
|
|
75
|
+
return false;
|
|
76
|
+
});
|
|
77
|
+
topBtn.click(function(){$('body,html').animate({scrollTop: 0},1000);return false;});
|
|
78
|
+
obj.on('load',function(){var off=$('body').offset();$('body,html').animate({scrollTop: off.top,scrollLeft: off.left},0);});
|
|
79
|
+
$(window).on("scroll touchmove", function(){
|
|
80
|
+
$("#footer_link").stop();
|
|
81
|
+
$("#footer_link").css('display', 'none').delay(300).fadeIn(500);
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
</script>
|
|
25
85
|
<script>
|
|
26
86
|
$(function(){
|
|
27
87
|
$(window).on('beforeunload', function(){return ""; });
|
|
28
|
-
//$('iframe').submit'((window).off('beforeunload'););
|
|
88
|
+
//$('iframe').submit'((window).off('beforeunload'););
|
|
29
|
-
//$('iframe').on('submit',function(){$(window).off('beforeunload');});
|
|
89
|
+
//$('iframe').on('submit',function(){$(window).off('beforeunload');});
|
|
30
|
-
|
|
31
|
-
// iframeの高さ
|
|
32
90
|
var frm = document.getElementById("iframe");
|
|
33
91
|
if(!frm){frm = document.getElementById("contact");}
|
|
34
92
|
if(frm){
|
|
@@ -37,6 +95,100 @@
|
|
|
37
95
|
}
|
|
38
96
|
function frameHeight(){$(frm).height(frm.contentWindow.document.body.scrollHeight+100);}
|
|
39
97
|
});
|
|
98
|
+
</script>
|
|
99
|
+
<script type="text/javascript" src="//webfont.fontplus.jp/accessor/script/fontplus.js?BgLtZoOyUF4%3D&aa=1&ab=2" charset="utf-8"></script>
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
102
|
+
```
|
|
40
103
|
|
|
104
|
+
iframe内のソース（入力画面）
|
|
105
|
+
```ここに言語を入力
|
|
106
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
107
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
|
|
108
|
+
<head>
|
|
109
|
+
<title>入力画面</title>
|
|
110
|
+
<!--中略-->
|
|
111
|
+
<link rel="stylesheet" href="../css/base.css" type="text/css" />
|
|
112
|
+
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
|
|
113
|
+
<script type="text/javascript" src="../js/jquery.autoKana.js"></script>
|
|
114
|
+
<script type="text/javascript" src="//ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
|
|
115
|
+
<script type="text/javascript" src="./static/js/form.js"></script>
|
|
116
|
+
<script>
|
|
117
|
+
window.onload = function () {
|
|
118
|
+
document.getElementById("zip").onkeyup = function(){AjaxZip3.zip2addr(this,'','address','address');};
|
|
119
|
+
// 姓名 (katakana : true カタカナ / false : ひらがな)
|
|
120
|
+
$.fn.autoKana( "input[name='name']", "input[name='kana']", {katakana : true});
|
|
121
|
+
}
|
|
41
122
|
</script>
|
|
123
|
+
</head>
|
|
124
|
+
<body>
|
|
125
|
+
<div id="form_box">
|
|
126
|
+
<ul id="top_box">
|
|
127
|
+
<li class="on"><span class="css3">STEP 1</span><br><span class="pc_txt">必要事項の</span><span class="sp_txt">入力</span></li>
|
|
128
|
+
<li><span class="css3">STEP 2</span><br><span class="pc_txt">入力内容の</span><span class="sp_txt">確認</span></li>
|
|
129
|
+
<li class="lst"><span class="css3">STEP 3</span><br><span class="pc_txt">送信</span><span class="sp_txt">完了</span></li>
|
|
130
|
+
</ul>
|
|
131
|
+
<div id="form_main">
|
|
132
|
+
<form action="/~work260/cgi-bin/toiawase/form.cgi#form_box" method="post">
|
|
133
|
+
<input type="hidden" name="pid" value="6357390f8afd27beab7d40cb12efaaf1" /><input type="hidden" name="m" value="cfmsmt" />
|
|
134
|
+
<dl><dt><b class="nortice">必須</b><p class="">お問合せ区分</p></dt><dd><label for="type_1"><input type="radio" name="type" id="type_1" value="ご相談" class="radio " /> ご相談</label><label for="type_2"><input type="radio" name="type" id="type_2" value="お見積り" class="radio " /> お見積り</label><label for="type_3"><input type="radio" name="type" id="type_3" value="その他" class="radio " /> その他</label></dd></dl>
|
|
135
|
+
<dl><dt><b class="nortice">必須</b><p class="">お名前</p></dt><dd><input type="text" name="name" id="name" value="" maxlength="255" style="width:100%" class="text " /></dd></dl>
|
|
136
|
+
<dl><dt><b class="nortice">必須</b><p class="">フリガナ</p></dt><dd><input type="text" name="kana" id="kana" value="" maxlength="255" style="width:100%" class="text " /></dd></dl>
|
|
137
|
+
<dl><dt><b class="option">任意</b><p class="">参加日</p></dt><dd><input type="text" name="date" id="date" value="" maxlength="255" style="width:100%" class="text " /></dd></dl>
|
|
138
|
+
<dl><dt><b class="nortice">必須</b><p class="">郵便番号</p></dt><dd><input type="text" name="zip" id="zip" value="" maxlength="8" style="width:100px" class="text " /></dd></dl>
|
|
139
|
+
<dl><dt><b class="nortice">必須</b><p class="">ご住所</p></dt><dd><input type="text" name="address" id="address" value="" maxlength="255" style="width:100%" class="text " /></dd></dl>
|
|
140
|
+
<dl><dt><b class="nortice">必須</b><p class="">E-mail</p></dt><dd><p class="desc">携帯メール可</p><input type="text" name="email" id="email" value="" maxlength="255" style="width:100%" class="text " /></dd></dl>
|
|
141
|
+
<dl><dt><b class="nortice">必須</b><p class="">電話番号</p></dt><dd><p class="desc">携帯電話も可</p><input type="text" name="tel" id="tel" value="" maxlength="14" style="width:100%" class="text " /></dd></dl>
|
|
142
|
+
<dl><dt><b class="nortice">必須</b><p class="">お問合せ内容</p></dt><dd><textarea name="comment" id="comment" cols="40" rows="3" class="textarea "></textarea></dd></dl>
|
|
143
|
+
<div class="btn"><input type="submit" value="確認画面へ" class="submit" /></div>
|
|
144
|
+
</form>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
<script type="text/javascript">
|
|
148
|
+
$('#date').attr('type','date');
|
|
149
|
+
$('#email').attr('type','email');
|
|
150
|
+
$('#tel').attr('type','tel');
|
|
151
|
+
$('#fax').attr('type','tel');
|
|
152
|
+
</script>
|
|
153
|
+
</body>
|
|
154
|
+
</html>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
iframe内のソース（確認画面）
|
|
158
|
+
```ここに言語を入力
|
|
159
|
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
160
|
+
<html>
|
|
161
|
+
<head>
|
|
162
|
+
<title>メールフォーム：確認画面</title>
|
|
163
|
+
<!--中略-->
|
|
164
|
+
<link rel="stylesheet" href="../css/base.css" type="text/css">
|
|
165
|
+
<script type="text/javascript" src="./static/js/form.js"></script>
|
|
166
|
+
</head>
|
|
167
|
+
<body>
|
|
168
|
+
<div id="form_box">
|
|
169
|
+
<ul id="top_box">
|
|
170
|
+
<li><span class="css3">STEP 1</span><br><span class="pc_txt">必要事項の</span><span class="sp_txt">入力</span></li>
|
|
171
|
+
<li class="on"><span class="css3">STEP 2</span><br><span class="pc_txt">入力内容の</span><span class="sp_txt">確認</span></li>
|
|
172
|
+
<li class="lst"><span class="css3">STEP 3</span><br><span class="pc_txt">送信</span><span class="sp_txt">完了</span></li>
|
|
173
|
+
</ul>
|
|
174
|
+
<p class="art">下記の内容で送信いたします。<br>入力内容に間違いがなければ、下の送信ボタンをクリックしてください。</p>
|
|
175
|
+
<form action="/~work260/cgi-bin/toiawase/form.cgi" method="post">
|
|
176
|
+
<div id="form_main">
|
|
177
|
+
<input type="hidden" name="pid" value="e6897872edd8d5f0aff7a057e1e9a34f" /><input type="hidden" name="m" value="cptsmt" />
|
|
178
|
+
<dl><dt><b class="nortice">必須</b><p>お問合せ区分</p></dt><dd class="bg_f">ご相談</dd></dl>
|
|
179
|
+
<dl><dt><b class="nortice">必須</b><p>お名前</p></dt><dd class="bg_f">お名前</dd></dl>
|
|
180
|
+
<dl><dt><b class="nortice">必須</b><p>フリガナ</p></dt><dd class="bg_f">フリガナ</dd></dl>
|
|
181
|
+
<dl><dt><b class="option">任意</b><p>参加日</p></dt><dd class="bg_f">2019-08-09</dd></dl>
|
|
182
|
+
<dl><dt><b class="nortice">必須</b><p>郵便番号</p></dt><dd class="bg_f">6000000</dd></dl>
|
|
183
|
+
<dl><dt><b class="nortice">必須</b><p>ご住所</p></dt><dd class="bg_f">京都府京都市下京区</dd></dl>
|
|
184
|
+
<dl><dt><b class="nortice">必須</b><p>E-mail</p></dt><dd class="bg_f">sample@hoge.gom</dd></dl>
|
|
185
|
+
<dl><dt><b class="nortice">必須</b><p>電話番号</p></dt><dd class="bg_f">09090909090</dd></dl>
|
|
186
|
+
<dl><dt><b class="nortice">必須</b><p>お問合せ内容</p></dt><dd class="bg_f">お問合せ内容</dd></dl>
|
|
187
|
+
</div>
|
|
188
|
+
<p class="comment">※送信完了までに時間がかかる場合がございます。<br>送信完了画面が表示されるまでしばらくお待ちください。</p>
|
|
189
|
+
<div class="btn"><input type="button" value="戻る" onclick="javascript:document.location.href='http://140.227.39.204/~work260/cgi-bin/toiawase/form.cgi?m=frmshw&pid=e6897872edd8d5f0aff7a057e1e9a34f'" class="submit" /><input type="submit" value="送信" class="submit" /></div>
|
|
190
|
+
</form>
|
|
191
|
+
</div>
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|
|
42
194
|
```
|
1
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,4 +16,27 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
■参考にしたページ
|
|
19
|
-
https://qiita.com/dolaemoso/items/fd05c101e7e190070059
|
|
19
|
+
https://qiita.com/dolaemoso/items/fd05c101e7e190070059
|
|
20
|
+
|
|
21
|
+
javascriptのコードを追記いたします。
|
|
22
|
+
ただ、どうやったら動作するかわからずコメントアウトしています。
|
|
23
|
+
|
|
24
|
+
```ここに言語を入力
|
|
25
|
+
<script>
|
|
26
|
+
$(function(){
|
|
27
|
+
$(window).on('beforeunload', function(){return ""; });
|
|
28
|
+
//$('iframe').submit'((window).off('beforeunload');); //動作しないのでコメントアウト
|
|
29
|
+
//$('iframe').on('submit',function(){$(window).off('beforeunload');}); //動作しないのでコメントアウト
|
|
30
|
+
|
|
31
|
+
// iframeの高さ
|
|
32
|
+
var frm = document.getElementById("iframe");
|
|
33
|
+
if(!frm){frm = document.getElementById("contact");}
|
|
34
|
+
if(frm){
|
|
35
|
+
$(window).on('resize', function(){frameHeight();});
|
|
36
|
+
$(frm).load(function(){frameHeight();});
|
|
37
|
+
}
|
|
38
|
+
function frameHeight(){$(frm).height(frm.contentWindow.document.body.scrollHeight+100);}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
</script>
|
|
42
|
+
```
|