https://www.tanaka-co-web.com/contact.html

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>お問い合わせ｜株式会社タナカ</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="header.css">
8
9  <style>
10    body {
11      font-family: "Noto Sans JP", sans-serif;
12      margin: 0;
13      background: #f7f7f7;
14      color: #333;
15      line-height: 1.8;
16    }
17
18    main {
19      padding: 140px 20px 60px;
20      max-width: 800px;
21      margin: auto;
22    }
23
24    h2 {
25      font-size: 28px;
26      margin-bottom: 10px;
27      font-weight: 700;
28      color: #222;
29    }
30
31    p.lead {
32      font-size: 16px;
33      margin-bottom: 30px;
34      color: #555;
35    }
36
37    /* カード風フォーム */
38    .contact-box {
39      background: #fff;
40      padding: 40px;
41      border-radius: 12px;
42      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
43    }
44
45    .form-group {
46      margin-bottom: 20px;
47    }
48
49    label {
50      display: block;
51      font-weight: 600;
52      margin-bottom: 6px;
53    }
54
55    input, select, textarea {
56      width: 100%;
57      padding: 12px;
58      border: 1px solid #ccc;
59      border-radius: 6px;
60      font-size: 15px;
61      background: #fafafa;
62    }
63
64    textarea {
65      resize: vertical;
66    }
67
68    button {
69      width: 100%;
70      padding: 14px;
71      background: #1a3c8e;
72      color: #fff;
73      border: none;
74      border-radius: 6px;
75      font-size: 16px;
76      cursor: pointer;
77      margin-top: 10px;
78      transition: 0.3s;
79    }
80
81    button:hover {
82      background: #0f2a63;
83    }
84
85    /* 電話案内 */
86    .contact-info {
87      margin-top: 30px;
88      padding: 20px;
89      background: #eef2ff;
90      border-left: 4px solid #1a3c8e;
91      border-radius: 6px;
92    }
93
94    /* 戻るリンク */
95    .back-link {
96      display: inline-block;
97      margin-top: 30px;
98      text-decoration: none;
99      color: #1a3c8e;
100      font-weight: 600;
101    }
102
103    .back-link:hover {
104      text-decoration: underline;
105    }
106
107    /* フッター */
108footer {
109  text-align: center;
110  padding: 30px;
111  color: #777;
112  font-size: 14px;
113}
114
115footer nav a {
116  color: #1a3c8e;
117  text-decoration: none;
118  margin: 0 10px;
119  font-weight: 600;
120}
121
122footer nav a:hover {
123  text-decoration: underline;
124}
125
126  </style>
127</head>
128
129<body>
130
131<div id="header"></div>

132<script>
133  fetch("header.html")
134    .then(res => res.text())
135    .then(data => {
136      document.getElementById("header").innerHTML = data;
137    });
138</script>

138
139<script src="https://www.google.com/recaptcha/api.js?render=

1396Lf0gWctAAAAAMVIXH6hcR-1SLIkGh4I_UPBjgJP

139"></script>

140<script>
141grecaptcha.ready(function() {
142    grecaptcha.execute("6Lf0gWctAAAAAMVIXH6hcR-1SLIkGh4I_UPBjgJP", {action: "contact"}).then(function(token) {
143        document.getElementById("recaptcha_token").value = token;
144    });
145});
146</script>

146
147
148
149  <main>
150    <h2>お問い合わせ</h2>
151    <p class="lead">
152      OEM・PB企画のご相談、製品に関するお問い合わせは下記フォームより承っております。  
153      企画段階でもお気軽にご相談ください。
154    </p>
155
156    <div class="contact-box">
157      <form action="contact_send.php" method="post">
158
159        <div class="form-group">
160          <label for="company-name">御社名</label>
161          <input type="text" id="company-name" name="company-name" required>
162        </div>
163
164        <div class="form-group">
165          <label for="name">ご担当者名</label>
166          <input type="text" id="name" name="name" required>
167        </div>
168
169        <div class="form-group">
170          <label for="email">メールアドレス</label>
171          <input type="email" id="email" name="email" required>
172        </div>
173
174        <div class="form-group">
175          <label for="tel">電話番号</label>
176          <input type="tel" id="tel" name="tel">
177        </div>
178
179        <div class="form-group">
180          <label for="subject">お問い合わせ種別</label>
181          <select id="subject" name="subject">
182            <option value="oem">OEM・PB企画について</option>
183            <option value="product">既存製品について</option>
184            <option value="other">その他のお問い合わせ</option>
185          </select>
186        </div>
187
188        <div class="form-group">
189          <label for="message">お問い合わせ内容</label>
190          <textarea id="message" name="message" rows="6" required></textarea>
191        </div>
192<input type="text" name="secret" style="display:none;">
193<input type="hidden" name="recaptcha_token" id="recaptcha_token">
194
195        <button type="submit">送信する</button>
196      </form>
197
198      <div class="contact-info">
199        <p>
200          お電話でのお問い合わせ：<br>
201          <strong>052-481-9585（平日 9:00〜17:00）</strong>
202        </p>
203      </div>
204    </div>
205
206    <a href="index.html" class="back-link">← トップページに戻る</a>
207
208  </main>
209<div id="footer"></div>
210

211<script>
212  fetch("footer.html")
213    .then(response => response.text())
214    .then(data => {
215      document.getElementById("footer").innerHTML = data;
216    });
217</script>

217
218</body>
219</html>