この記事ではHTML, CSSを使った「お問い合わせフォームの作り方」を解説します。
実際に使用できるお問い合わせフォームを実装する場合は、下記のような他の技術・プログラミング言語を使用する必要があります。
- メール送信のためにPHPの技術
- 入力項目チェックのためにJavaScriptの技術
この記事ではHTML, CSSで、お問い合わせフォームの見た目のみを作っていきます。
この記事のゴールは「お問い合わせフォームの作り方を理解し、自分で作れるようになること」です。
いっしょに学習していきましょう。
- お問い合わせフォームの作り方
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
サンプルのダウンロード
以下のリンクからサンプルをダウンロードしましょう。
フォルダを開くと
- 「code」
→HTML・CSSファイル・画像ファイルが入っているフォルダ - 「mock-img」
→モックアップ画像
の2つが入っています。
デザインの確認
エディタでフォルダを開いてみましょう。
画像ファイル「mock-img」で、デザインの全体像が確認ができます。
お問い合わせフォームの作り方：コーディングしてみよう
それでは、早速コーディングの作業を行っていきます。
コーディングを行う際は、いきなりコードを記述せず、サイトのデザインをよく確認することが大切です。
サイトのデザインを確認する
HTMLでサイトの構造を記述する
CSSでサイトの見た目を整えていく
上記の流れを意識して、実際にコーディングを行っていきます。
全体のレイアウト
サイト全体のデザインを確認する
今回のコンタクトフォーム全体の構図は画像のようになります。
全体のコンテンツ部分が一つの入れ物に入っているイメージです。
HTMLで全体の構造を記述する
<body>
<div class="contact"></div>
</body>サイトのデザインを確認したら、HTMLで構造を記述します。
divタグを用いてコンタクトフォーム全体を覆う構造を作ります。
CSSで全体のスタイルを整える
* {
box-sizing: border-box;
}
body {
color: #333;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}まずは全ての要素に対してbox-sizing: border-box;を指定し、paddingやborderをwidthに含めるようにします。
box-sizing: border-box; とは、padding（余白）とborder（線）を幅と高さに含める指定です。
さらに、サイト全体の文字色とフォントファミリーを指定します。
CSSでcontactのスタイルを整える
.contact {
width: 960px;/*横幅*/
margin: 0 auto;/*中央寄せ*/
padding: 60px 0;
}次に、先ほどcontactとクラス名を付けたdivタグに対し、横幅と中央配置を指定します。
上下にも余白が欲しいので、paddingを用いて余白を付けましょう。
引き続き、タイトルを作っていきましょう。
タイトル
タイトルのデザインを確認する
サイトのデザインを確認してみてください。タイトルとフォームとの間に余白があるのが分かるかと思います。このような余白をどの要素に対して付けるべきか、デザインを見ただけですぐに判断できるとよいでしょう。
HTMLでタイトルの構造を記述する
<h1 class="contact-ttl">Contact</h1>基本的にページのタイトルはh1タグを使用します。
CSSでタイトルの見た目を整えていく
.contact-ttl{
font-size: 40px;
font-weight: bold;
margin-bottom: 40px;
text-align: center;
}今回、タイトルとフォームの間の余白は、タイトルに対して付けるようにしていきます。
その他、フォントサイズ40px、太字、テキスト中央寄せのスタイルを記述します。
ブラウザで確認するとこのような見た目になっています。
コンタクトフォーム
フォーム部分のデザインを確認する
コンタクトフォームの機能はPHPなどと連携して仕組みを作る必要があるため、HTML側ではデータが入力される要素の周りをformタグで囲う必要があります。
HTMLでフォーム部分の構造を記述する
<form action="">
<table class="contact-table"></table>
<!-- 後ほど送信ボタンを作成 -->
</form>前述した通り、コンタクトフォームはformタグで囲います。その中に、表のような見た目を作るためにtableタグを記述しcontact-tableというクラスを命名します。
formタグ
入力・送信フォームを作成する際に使用するタグです。formタグで囲まれた部分がフォームになります。inputタグ、textareaタグなどと組み合わせて、入力されたデータをPHPなどで構成されるデータの送信システムに渡します。
action属性
action属性は、フォームの送信データの送信先を設定する属性です。セキュリティ上の問題から、値は空にすることが推奨されます。PHPやJavaScriptといった別の言語でプログラムを組み、入力された情報を第三者が盗み見ることができないようにする必要があります。
CSSでフォーム部分の見た目を整えていく
.contact-table { width: 100%; margin-bottom: 20px; }
tableタグに対して命名したcontact-tableクラスに対して、横幅をいっぱいに広げ、送信ボタンとの間の余白を作るためにmargin-bottomを指定します。
引き続き中身を作っていきましょう。
tableの中を作る
tableの中身を記述していきましょう。
HTMLでtableの構造を記述する
<tr>
<th class="contact-item"></th>
<td class="contact-body"></td>
</tr>tableは使用するタグが多いうえにタグの名前が似ていて、間違いやすいので注意しましょう。
以下の記事でtableで使用するタグを紹介しているので、復習をしたい方は確認してみてください。
trタグで行を作り、その中に行の見出しとしてthタグと、データ入力部分としてtdタグを記述します。さらにthタグに対してはcontact-itemというクラスを、tdタグにはcontact-bodyというクラスを命名します。
このtrタグ（行のまとまり）を、コンタクトフォームのデザインの入力項目の数に合わせて複製しましょう。今回は「名前・性別・メール・電話・職業・スキル・お問い合わせ内容」と合計7つあるので、7つ分作ります。
CSSでtableの見た目を整えていく
.contact-item, .contact-body { padding: 20px; border: 1px solid #ccc; } .contact-item { text-align: left; /* テキスト左寄せ */ width: 30%; /* 横幅30%指定（グレーの背景色部分） */ background-color: #eee; /* グレーの背景色 */ } .contact-body { width: 70%; /* 横幅70%指定（白背景色部分） */ }
ここでは、contact-itemとcontact-bodyに対して内側に余白を設け、枠線を付けています。
contact-itemにはテキストの左寄せ・横幅・背景色を指定し、contact-bodyには横幅のみ指定して3:7の割合としました。
ここまで書き、ブラウザで確認すると下の画像のようになります。
入力欄を作る
表ができたら、あとは中身の項目名と入力欄を作成するだけです。
HTMLで入力欄の構造を記述する
<tr>
<th class="contact-item">名前</th>
<td class="contact-body">
<input type="text" name="名前" class="form-text" />
</td>
</tr>
<tr>
<th class="contact-item">性別</th>
<td class="contact-body">
<label class="contact-sex">
<input type="radio" name="性別" />
<span class="contact-sex-txt">男</span>
</label>
<label class="contact-sex">
<input type="radio" name="性別" />
<span class="contact-sex-txt">女</span>
</label>
</td>
</tr>
<tr>
<th class="contact-item">メール</th>
<td class="contact-body">
<input type="email" name="メール" class="form-text" />
</td>
</tr>
<tr>
<th class="contact-item">電話</th>
<td class="contact-body">
<input type="tel" name="電話" class="form-text" />
</td>
</tr>
<tr>
<th class="contact-item">職業</th>
<td class="contact-body">
<select name="職業" class="form-select">
<option>選択</option>
<option>学生</option>
<option>主婦</option>
<option>会社員</option>
</select>
</td>
</tr>
<tr>
<th class="contact-item">スキル</th>
<td class="contact-body">
<label class="contact-skill">
<input type="checkbox" name="スキル" />
<span class="contact-skill-txt">HTML,CSS</span>
</label>
<label class="contact-skill">
<input type="checkbox" name="スキル" />
<span class="contact-skill-txt">JavaScript,jQuery</span>
</label>
<label class="contact-skill">
<input type="checkbox" name="スキル" />
<span class="contact-skill-txt">WordPress</span>
</label>
<label class="contact-skill">
<input type="checkbox" name="スキル" />
<span class="contact-skill-txt">その他</span>
</label>
</td>
</tr>
<tr>
<th class="contact-item">お問い合わせ内容</th>
<td class="contact-body">
<textarea name="問い合わせ" class="form-textarea"></textarea>
</td>
</tr>入力欄は一般的に、inputタグなどで作成します。
inputタグでは、
- type属性でフォーム部品の種類（値によって種類の選択をする）
- name属性で部品の名前
- value属性で初期値
などを指定できます。
inputタグのname属性：データに名前をつける
name属性は要素の名前を指定することができます。name属性は入力項目を管理するidのようなものです。inputタグに付与されたname属性は、フォーム送信時に利用されます。
inputタグのvalue属性：初期値や値
value属性は、送信される値を指定します。value属性に記述した値は、入力欄に表示される初期値として使用されます。value属性は必須ではないため、初期値を設定しない場合は不要です。
入力欄に内容が入力された場合はvalue属性の初期値ではなく、そちらが送信されます。
<input type="text" name="name" value="初期値">送信ボタンにvalue属性を適用すると、ボタンにvalue属性で設定した内容が表示されます。以下のコードの場合、ボタンに「送信する」というテキストが表示されます。
<input type="submit" value="送信する">
inputタグのtype属性：フォーム部品の種類を指定する
inputタグはtype属性の値によって部品の種類を分けることができます。
今回は、項目ごとに以下のように指定しています。
| 項目 | タイプ | 意味 |
|---|---|---|
| 名前 | text | 1行のテキスト入力 |
| 性別 | radio | 一つだけ選択させるラジオボタン |
| メール | メールアドレスの入力 | |
| 電話 | tel | 電話番号の入力 |
| スキル | checkbox | 複数選択可能なチェックボックス |
ラベルの関連付け
ラジオボタンやチェックボックスは入力部品とラベルの関連付けをするためにlabelタグで囲っています。そうすることで、「男」「女」や「HTML, CSS」「JavaScript, jQuery」「WordPress」「その他」などの文字をクリックしたときに関連する入力部品（ラジオボタンやチェックボックス）が選択状態となります。
「職業」の項目はselectタグとoptionタグで実装しています。selectタグは、optionタグを同時に使用して選択肢を増やすことができます。
そして、最後の自由記述の部分「お問い合わせ内容」は、入力部分に行数が欲しいためtextareaタグを使用します。inputタグには閉じタグがありませんでしたが、textareaタグには必要ですので注意しましょう。
selectタグ
セレクトボックスを作成するタグです。selectタグの初期値でプルダウンメニューとなります。複数の選択肢を選択できるmultiple属性、同時にいくつかの選択肢を表示できるsize属性などがあります。
複数選択できるようにする場合、下記の記述になります。
<select name="職業" class="form-select" multiple>
<option>選択</option>
<option>学生</option>
<option>主婦</option>
<option>会社員</option>
</select>
textareaタグ
textareaタグは<input type="text">の場合と違い、複数行のテキストを入力することができます。rows属性やcols属性を指定して入力フィールドの横幅と高さの表示サイズを指定できます。
CSSで入力欄の見た目を整えていく
名前、メール、電話のスタイル
.form-text {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
max-width: 400px;
}
名前の項目などの1行の入力欄は見た目を統一したいので、同じクラスとしてform-textを命名しました。横幅、最大横幅や内側に余白、角丸などを付けて見た目を整えています。
またappearanceプロパティを用いて、PCによって異なるスタイルを解除するようにしています。クロスブラウザ対応すのため、ベンダープレフィックス付きでも指定しています。
appearanceプロパティとベンダープレフィックス
appearanceプロパティは、ユーザーが利用するプラットフォームに応じて、要素がその環境での標準的な見た目になるように指定する際に使われます。appearanceプロパティを使う際は、ベンダープレフィックスといっしょに指定します。
ベンダープレフィックスとは、CSSプロパティをChromeやSafari、Firefoxなど各ブラウザに認識してもらうためのものです。
- -ms- ：IE対応
- -webkit-：Chrome、Safari対応
- -moz-：Firefox対応
性別のスタイル
.contact-sex + .contact-sex {
margin-left: 10px;
}
.contact-sex-txt {
margin-left: 5px;
}隣接セレクタを用いることで、一つ目以降の要素にのみ指定することができます。今回は「女」の左側に余白を付けました。文字とラジオボタンの間に余白を付けるために、spanタグのcontact-sex-txtクラスに対してmargin-leftを指定しています。
職業のスタイル
.form-select {
width: 180px;
height: 40px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}職業のスタイルはシンプルに幅・高さ・余白・角丸などを付けました。
スキルのスタイル
.contact-skill {
display: block;
}
.contact-skill + .contact-skill {
margin-top: 10px;
}
.contact-skill-txt {
margin-left: 5px;
}各labelタグに対してcontact-skillクラスを付けていますが、インライン要素になるので横に並んでしまいます。縦に並べるためにdisplay: block; を指定しました。
また性別のスタイルと同じように、一つ目以降の要素に対して上に余白を付けるようにしています。
文字とチェックボックスの間に余白を入れるため、spanタグのcontact-skill-txtに対してmargin-leftを指定しています。
お問い合わせ内容のスタイル
.form-textarea {
width: 100%;
padding: 10px;
height: 200px;
border-radius: 5px;
border: 1px solid #ccc;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}最後のお問い合わせ内容に対しては、幅・高さ・余白・角丸などを付けています。幅に関してはセルいっぱいに広げるために100%としました。また、「名前、メール、電話のスタイル」と同様にappearanceプロパティを指定しています。
ここまで書き、ブラウザで確認すると上記の画像のようになります。
送信ボタン
送信ボタンのデザインを確認する
最後にコンタクトフォームを送信するために必ず必要な、送信ボタンの作成をしていきます。
HTMLで送信ボタンの構造を記述する
<input class="contact-submit" type="submit" value="送信" />inputタグにtype属性submitを指定すると、送信ボタンを作成することができます。value属性の値はボタンのラベルとして表示されます。今回は「送信」と表示させたいので、「送信」という値をvalueに入れました。class属性にはcontact-submitを入れています。
CSSで送信ボタンの見た目を整えていく
.contact-submit {
width: 250px; /* 横幅指定 */
background-color: #333; /* 背景色 */
color: #fff; /* 文字色 */
font-weight: bold; /* 文字の太さ */
display: block; /* インライン要素をブロック要素に変更 */
margin: 0 auto; /* 中央寄せ */
font-size: 16px; /* 文字の大きさ */
padding: 15px; /* 内側の余白 */
border-radius: 100vh; /* 角丸指定 */
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}contact-submitに対して横幅・背景色・文字色・フォントサイズ・太字・内側に余白・角丸などを指定しています。inputタグはインライン要素なのでblockに変更し、margin: 0 autoで中央寄せをして、appearanceプロパティを指定しました。
そして最後にマウスカーソルを載せたときにボタンであることを視覚化するためにcursor: pointerを指定して、コンタクトフォームの完成です！
完成
以上でコンタクトフォームの実装は終了です。お疲れ様でした！
まとめ
コンタクトフォームはポートフォリオサイトや企業HPの制作など、実務でも多く使われます。細かい知識もしっかりと押さえておきましょう！
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
フォームの作成まとめ
- formタグを使って、inputタグ、selectタグ、textareaタグなど組み合わせてフォームをつくる
- inputタグは、type属性でさまざまなパーツをわけて使うことができる
- HTMLでデータの送信はできるが、受け取ることはできない
- データの受け取りは、PHPのようなサーバーサイド言語の知識が必要になる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
