HTML5を使ったお問い合わせフォーム 


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
<style>
body {
  line-height: 1.6;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  margin-left: 30px;
  width: 560px;
}
p.site {
  font-weight: 500;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h3 class="hdg">お問い合わせフォーム</h3>
<p class="site">当サイトに関して、ご意見、ご感想などがございましたら、こちらのフォームに必要事項をご入力の上、送信して下さい。<br>返信には数日かかることもございますことを予めご了承下さい。<br>(※は必須項目です。)</p>
<form action="#" method="POST" class="f-inquiry">
<table class="f-table">
<tr>
<th>お問い合わせタイトル：※</th>
<td>
<input name="f-title" type="text" id="f-title" class="f-title" autofocus required>
<td>[全角・半角混在可]</td>
</tr>
<tr>
<th>お問い合わせ内容：※</th>
<td>
<textarea name="message" id="message" cols="24" rows="5" required></textarea>
<td>[全角・半角混在可]</td>
</tr>
<tr>
<th>お問い合わせの回答方法：※</th>
<td>
<input name="f-ans" type="text" id="f-ans" class="f-ans" required>
<td>[全角・半角混在可]</td>
</tr>
<tr>
<tr>
<th>お名前：※</th>
<td>
<input name="f-name" type="text" id="f-name" class="f-name" required>
<td>[全角]</td>
</tr>
<tr>
<th>フリガナ：※</th>
<td>
<input name="f-kana" type="text" id="f-kana" class="f-kana" required>
<td>[全角カタカナ]</td>
</tr>
<tr>
<th>メールアドレス：※</th>
<td>
<input name="f-email" type="email" id="f-email" class="f-email" required>
<td>[半角英数字]</td>
</tr>
<tr>
<th>電話番号：</th>
<td>
<input name="f-tel" type="tel" id="f-tel" class="f-tel" >
<td>[数字・ハイフン]</td>
</tr>
</table>
<p class="submit-btn"><input type="submit" value="送信"></p>
</form>
</body>
</html>