Webサイトを作ったら、必ず欲しくなる機能。それが「お問い合わせフォーム」です。
仕事の依頼を受けたり、読者からの質問を受け付けたり。
フォームは、あなたと訪問者をつなぐ大切な「架け橋」です。
今回は、HTMLでフォームの骨組みを作り、CSSで「入力したくなるデザイン」に整える手順を解説します。
フォームを作る「4人の主役」たち
フォームを作るには、<form> という親タグの中に、以下の4つのパーツを配置します。
1. <label>（ラベル）
「名前」や「メールアドレス」といった項目名です。
このタグを使うと、「文字をクリックしても入力欄にカーソルが合う」ようになるので、使い勝手が爆上がりします。
2. <input>（インプット）
1行だけの入力欄です。名前やメールアドレスに使います。
type="text" や type="email" のように属性を変えることで、役割が変わります。
3. <textarea>（テキストエリア）
複数行の入力欄です。お問い合わせ内容などの長文に使います。
※これだけは <input> ではなく、別のタグなので注意！
4. <button>（ボタン）
送信ボタンです。type="submit" を指定します。
ユーザーに優しいフォームにする「属性」設定
ただタグを書くだけでは不親切です。以下の設定を必ず入れましょう。
- placeholder（プレースホルダー）：
placeholder="例：田中 太郎"
入力欄の中に薄く表示されるヒントです。何を書けばいいか一瞬で分かります。 - required（リクワイアード）：
required
これを書くだけで「必須項目」になります。空欄のまま送信しようとすると、ブラウザが勝手に「入力してください！」と怒ってくれます。 - type=”email”：
スマホで入力する時、キーボードが自動的に「英数字モード（@などの記号入り）」に切り替わります。これだけでスマホユーザーは大喜びです。
実践：おしゃれなコンタクトフォームを作ろう
では、実際にコードを書いてみましょう。
CSSで見た目を整えて、入力中の枠の色が変わる（フォーカス機能）ようにしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body {
font-family: sans-serif;
padding: 50px;
background-color: #f9f9f9;
}
/* フォーム全体を中央寄せにして枠をつける */
.contact-form {
max-width: 600px; /* 幅は最大600pxまで */
margin: 0 auto; /* 中央寄せ */
padding: 40px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
h2 { text-align: center; color: #333; }
/* 各項目のグループ */
.form-group {
margin-bottom: 20px; /* 下に余白 */
}
/* ラベルのデザイン */
label {
display: block; /* 縦並びにする */
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
/* 入力欄（input, textarea共通）のデザイン */
input[type="text"],
input[type="email"],
textarea {
width: 100%; /* 親要素いっぱいに広げる */
padding: 12px; /* 内側の余白 */
border: 1px solid #ddd; /* 薄いグレーの枠線 */
border-radius: 5px;
box-sizing: border-box; /* paddingを含めた幅計算にする（崩れ防止） */
font-size: 16px;
transition: 0.3s; /* 色の変化を滑らかに */
}
/* ★ここ重要！入力中に枠の色を変える */
input:focus,
textarea:focus {
outline: none; /* デフォルトの青い枠を消す */
border-color: #00bcd4; /* オリジナルの色にする */
background-color: #e0f7fa; /* 背景も薄く色付け */
}
/* テキストエリアの高さ */
textarea {
height: 150px;
resize: vertical; /* 縦方向だけリサイズ許可 */
}
/* 送信ボタン */
.btn-submit {
display: block;
width: 100%;
background-color: #00bcd4;
color: white;
padding: 15px;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.btn-submit:hover {
background-color: #008ba3; /* ホバー時に少し暗く */
}
</style>
</head>
<body>
<div class="contact-form">
<h2>お問い合わせ</h2>
<form action="#" method="post">
<!-- お名前 -->
<div class="form-group">
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="例：山田 太郎" required>
</div>
<!-- メールアドレス -->
<div class="form-group">
<label for="email">メールアドレス</label>
<!-- type="email"にするとスマホ入力が楽になる！ -->
<input type="email" id="email" name="email" placeholder="例：abc@example.com" required>
</div>
<!-- お問い合わせ内容 -->
<div class="form-group">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" placeholder="ご自由にご記入ください" required></textarea>
</div>
<!-- 送信ボタン -->
<button type="submit" class="btn-submit">送 信</button>
</form>
</div>
</body>
</html>まとめ：フォームは「おもてなし」
ただ入力欄を並べるだけでなく、以下の3点にこだわるのがプロの仕事です。
- Labelタグを使う： 文字クリックで入力できるようにする。
- Type属性を選ぶ： スマホユーザーの入力の手間を減らす。
- :focusで反応する： 「今ここに入力してますよ」と色で教えてあげる。
ちなみに、このコードだけでは「送信」ボタンを押してもメールは届きません（画面が切り替わるだけです）。
実際にメールを送るには、PHPなどの「バックエンド言語」や、Googleフォームなどのサービスと連携する必要があります。
まずは「見た目（UI）」を完璧に作れるようになりましょう！