-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
200 lines (175 loc) · 8.39 KB
/
contact.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
<!DOCTYPE html>
<html lang="ja">
<!-- サイトに関する設定事項を記述します -->
<head id="head">
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ページのタイトル -->
<title>お問い合わせ - WAVE</title>
<!-- ビューポート(視点)の指定 -->
<meta name="viewport" content="width=device-width">
<!-- ファビコンの指定 https://ao-system.net/favicongenerator/ -->
<link rel="icon"
href="images/favicon.ico"
type="image/ico">
<link rel="apple-touch-icon"
href="images/apple-touch-icon-180x180.png"
type="image/png"
sizes="180x180">
<!-- 検索時に表示される、ウェブサイトの要約文 -->
<meta name="description" content="概ね80文字前後のサイトの
紹介文が、検索時に表示されます。">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v6.7.1/css/all.css">
<!-- Reset CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acab/[email protected]/index.min.css">
<!-- 自分で作ったスタイルシート -->
<link rel="stylesheet" href="stylesheets/master.css">
<!-- 先頭へ戻るボタンの為のJavaScript -->
<script src="javascripts/page_top.js" defer></script>
<!-- 部分ファイルを読み込む -->
<script src="include.js"></script>
</head>
<!-- 表示したい内容・出し物・コンテンツを記述します -->
<body class="post">
<!-- ヘッダー(サイト名) -->
<header id="header"></header>
<script>include("header")</script>
<!-- ナビゲーションメニュー -->
<nav id="navigation"></nav>
<script>include("navigation")</script>
<!-- 主要なコンテンツ -->
<main>
<!-- 投稿記事 -->
<article>
<h1>お問い合わせ</h1>
<p>
ご意見・ご感想など、以下の欄にご記入の上、送信してください。
記事に関するご質問などもお気軽にお寄せください。
</p>
<!-- お問い合わせフォーム -->
<!-- 各種属性の意味は次の通り -->
<!-- name="contact" サーバ処理時に、contact という名前のフォームとして扱う
action="/success" 送信ボタンを押すと、success.html を表示する
method="POST" form送信の際の約束事として、こう記述する
netlify-honeypot="bot-field" ボット対策(プログラムによる自動投稿対策)
data-netlify-recaptcha="true" 車の絵を選べなどの「キャプチャ」機能を用いる
data-netlify="true"> Netlify でフォーム処理を行う -->
<form
name="contact"
action="/success"
method="POST"
netlify-honeypot="bot-field"
data-netlify-recaptcha="true"
data-netlify="true">
<!-- Netlify honeypot -->
<!-- hidden(隠し)クラスにしているので、人の目からはこの入力枠は見えない。
それでも入力枠に文字入力されているならば、ボット（コンピュータプログラム）
による投稿なので、Netlify により、スパム(迷惑)として扱われる -->
<p class="hidden">
<label>Don’t fill this out if you're human:
<input name="bot-field">
</label>
</p>
<!-- メール通知用の隠し枠 -->
<!-- Netlifyから送られるメールの「件名」と
「問い合わせ前に見ていたURL」を指定している -->
<label class="hidden" for="subject">件名</label>
<input type="hidden"
id="subject"
name="subject"
data-remove-prefix="true"
value="Webサイトから「お問い合わせ」がありました。">
<label class="hidden" for="referrer_url">お問い合わせ前に見ていたURL</label>
<input type="hidden" id="referrer_url" name="referrer_url">
<script>document.getElementById("referrer_url").value = document.referrer</script>
<p>
<!-- 長文用の文字入力枠 -->
<!-- 各種属性の意味は次の通り -->
<!-- autocapitalize="none" 自動的に先頭文字を大文字にしない
autocorrect="off" 自動的に綴校正(スペルチェック)を行わない
id="message" id属性をmesseageにする。
labelのfor属性に for="message" と書き、
入力枠とラベルの対応関係を明確にする
name="message" サーバ側で、message という名前の入力枠として扱う
placeholder="とっても為になりました。ありがとうございます。" 入力例 required="required" required属性。送信ボタンを押すには入力必須 -->
<label for="message">お問い合わせ内容</label>
<textarea
autocapitalize="none"
autocorrect="off"
id="message"
name="message"
placeholder="とっても為になりました。ありがとうございます。" required="required"></textarea>
</p>
<p>
<!-- 文字入力枠 -->
<!-- 各種属性の意味は次の通り -->
<!-- type="text" 文字入力用の枠 通常のキーボードが表示される
autocomplete="name" iPhone の連絡先から自分の名前が自動入力できる -->
<label for="name">お名前</label>
<input
type="text"
autocomplete="name"
id="name"
name="name"
placeholder="山田 太郎"
required="required">
</p>
<p>
<!-- 文字入力枠 -->
<!-- 各種属性の意味は次の通り -->
<!-- type="email" メール入力用の枠 メール用のキーボードが表示される
autocomplete="email" iPhone で自分のメールアドレスが自動入力できる -->
<label for="email">メールアドレス</label>
<input
type="email"
autocomplete="email"
id="email"
name="email"
placeholder="[email protected]"
required="required">
</p>
<p>
<!-- 文字入力枠 -->
<!-- 各種属性の意味は次の通り -->
<!-- type="tel" 電話入力用の枠 電話用のキーボードが表示される
autocomplete="tel" iPhone で自分の電話番号が自動入力できる
maxlength="13" 最大13桁
minlength="7" 最小 7桁
pattern="^(\d|-|\(|\))*$" 「正規表現」数字か - か () が入力可 -->
<label for="tel">電話番号</label>
<input
type="tel"
autocomplete="tel"
id="tel"
maxlength="13"
minlength="7"
name="tel"
pattern="^(\d|-|\(|\))*$"
placeholder="0523734649">
</p>
<!-- Netlify が提供する「キャプチャ機能」を用いるには
以下のコードを記述する。
「キャプチャ」機能とは、車の絵を選ぶなど、
人が操作しているか確認する機能のこと -->
<div data-netlify-recaptcha="true"></div>
<!-- 送信ボタン -->
<!-- type="submit" で、送信ボタンになる -->
<input type="submit" value="送信">
</form>
</article>
</main>
<!-- サイドバー -->
<div id="sidebar" class="sidebar"></div>
<script>include("sidebar")</script>
<!-- フッター -->
<footer id="footer"></footer>
<script>include("footer")</script>
</body>
</html>