HTMLでのお問い合わせフォーム作成を基礎から解説！作成例も紹介
HTMLを使ってお問い合わせフォームを作りたいと思いませんか？
Webサイトにお問い合わせフォームを置くと、ユーザーとより相互的なやり取りができるようになりますよね。
今回の記事では、お問い合わせフォームを置きたいけれど、コードが複雑そうと感じている方に向けて
- どうやってフォームを作るのか
- フォームで使う項目には何があるのか
- 簡単なフォーム作成例について
などについて詳しく解説していきます。
この記事を読めば、基本的な項目を抑えたお問い合わせフォームを作成できるようになりますよ。ぜひ、最後まで読んでくださいね。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
フォームって何？HTMLだけで作れるの？
そもそも、フォームとはどのようなものなのでしょうか？
フォームにはお問い合わせフォームの他に、検索ボックスや申し込みの入力欄などがあります。
いずれも、サイトに訪れたユーザーに何か入力させるための場所となっています。
未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！
✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！
＼実践的なスキルが身に付くカリキュラム／
フォームを作成するときに必要な項目について
フォームには処理に応じた項目がいくつかあります。
今回は、お問い合わせフォームでよく使う以下の項目について紹介します。
- テキストフィールド 「テキスト（名前・メールアドレスなど）を入力する項目」
- セレクトボックス 「プルダウンで現れる選択肢を選ぶ項目」
- ラジオボタン 「表示されている複数の選択肢から1つ選ぶ項目」
- チェックボックス 「表示されている選択肢から複数のチェックができる項目」
- テキストエリア 「1行で書ききれない文章（メッセージなど）を入力する項目」
- 送信ボタン 「入力データを送信するボタン」
それぞれの項目を使う上で必要なことを丁寧に解説していきます。
どれも1度は見たことがある項目なので、すぐにわかるようになりますよ。
formでフォーム全体を囲う
<form action="confirm.php" method="post">
フォームのパーツである各要素を書いていく
</form>まずは、フォームであることを示すために、formを設置します。
フォーム作成には、複数のHTML要素を使いますが、それらはすべて、このformタグの間に書き足していきます。
formタグで全体を囲むことで、その部分がフォームであることをブラウザに認識させることができます。
HTML要素にはそれぞれ属性がありますが、formでは以下のものを指定する必要があります。
- action属性
- method属性
それぞれ見ていきましょう。
action属性について
action属性では、フォームで入力されたデータを受け渡す場所を指定します。
送信ボタンを押した後に確認画面を表示させたい場合にも、そのような処理が書かれたページを記述します。
プログラミングの知識が必要となってきますので、フォーム作成の段階では空白のままでも構いません。
method属性について
method属性では、データ送信する際の処理方法を指定します。
「GET」と「POST」がありますが、お問い合わせフォームでは基本的にPOSTを使います。
GETはデータを取得するときに使うことが多いです。
【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！
✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート
＼目的別で選べる3つのコース／
inputを使ったテキストフィールド
<input type="text" name="name">テキストフィールドは、inputを使って作成ができ、短い文章などを入力することができます。
inputではtype属性とname属性の指定ができます。
type属性について
type属性を指定することによって、フィールドに入力できるデータの種類が決まります。
何も指定していない場合は、「text」となり、通常のテキスト入力ができます。
「number」にすると、数字入力専用のフィールドができ、「email」では、メールアドレス入力専用になります。
後でも詳しく説明しますが、他には以下の指定があります。
- radio 「ラジオボタンでの選択ができる」
- checkbox 「チェックボックスでの選択ができる」
name属性について
name属性は、半角英数字で好きな名前を付けることができます。
データ内容がわかるように英訳した名前を付けることが多いです。
名前なら「name」や「yourname」などにすると良いでしょう。
このように name 属性 の値を用いて，対象要素を特定し様々な処理を行うことができます。
labelを使った項目名と入力欄の関連付け
<label>項目名</label>inputを使っているときに、labelを併せて使うことがよくあります。
labelは、入力欄のすぐ近くに入力データの項目名を書きたいときに使います。
記述の仕方は2つあり、「項目名と入力欄をまとめてlabelタグで囲う方法」と、「labelとinputを分けて、for属性とid属性で連動させる方法」です。
項目名と入力欄をまとめて囲う方法は
<label>名前：<input type="text" name="name"></label>となります。
もう1つの、labelとinputを分けて、for属性とid属性で連動させる方法は
<label for="name-id">名前：</label> <input id="name-id" type="text" name="name">となります。
for属性とid属性には同じ名前を記述します。
同じ名前で関連付けすることで、「名前：」をクリックしても入力欄の方にフォーカスされます。
もちろん、labelタグを使わず、pタグなどで記述した場合はフォーカスされません。
selectとoptionでセレクトボックスを作成
<select name="weather">
<option value="sunny">晴れ</option>
<option value="cloudy">くもり</option>
<option value="rainy">雨</option>
</select>セレクトボックスでは、ボックスをクリックすると、プルダウンで選択肢のメニューが表示されます。
選択肢が最低2つ以上あるときに使い、選択肢の中から1つを選択させることができます。
selectタグを使ってセレクトボックス全体を定義し、optionタグを使って、選択肢を作成します。
select内では、name属性を用いて選択肢の名前を指定できます。
option内では、value属性を指定できます。
value属性は、その選択肢の「値」を記述することになります。
この値は、送信ボタンを押してデータを送ったときに、プログラム側でどの項目が選択されたのか判断するために利用されます。
value属性は、セレクトボックスだけでなく、この後に出てくるラジオボタンやチェックボックスなどの設定をするときにも必要となるので、覚えておきましょう。
「type=”radio”」でラジオボタンを作成
<p>好きな季節</p>
<input id="spring" type="radio" name="season" value="spring"><label for="spring">春</label>
<input id="summer" type="radio" name="season" value="summer"><label for="summer">夏</label>
<input id="autumn" type="radio" name="season" value="autumn"><label for="autumn">秋</label>
<input id="winter" type="radio" name="season" value="winter"><label for="winter">冬</label>ラジオボタンは、複数の選択肢から1つだけ選択させるときに使います。
inputのtype属性を「radio」とすることで選択肢を作成でき、いくつでも並べることが可能です。
選べる選択肢は1つだけ、という特徴を持っていますので、他の選択肢を選ぶとチェックが外れます。
テキストフィールドと同様、for属性とid属性を用いてチェック欄と項目名を関連付けることができます。
name属性について
<p>好きな季節</p>
<input id="spring" type="radio" name="season" value="spring"><label for="spring">春</label>
<input id="summer" type="radio" name="season" value="summer"><label for="summer">夏</label>
<p>好きな動物</p>
<input id="cat" type="radio" name="animal" value="cat"><label for="cat">猫</label>
<input id="dog" type="radio" name="animal" value="dog"><label for="dog">犬</label>name属性を使って、「好きな季節」や「好きな動物」などを「name=”season”」「name=”animal”」と分けてグループ化する必要があります。
こうすることで、ラジオボタンで複数の質問があったときに、質問の選択肢を同じグループとして扱うことができるようになります。
「type=”checkbox”」でチェックボックスを作成
<p>希望する曜日</p>
<input id="monday" type="checkbox" name="week" value="monday"><label for="monday">月曜日</label>
<input id="tuesday" type="checkbox" name="week" value="tuesday"><label for="tuesday">火曜日</label>
<input id="wednesday" type="checkbox" name="week" value="wednesday"><label for="wednesday">水曜日</label>
<input id="thursday" type="checkbox" name="week" value="thursday"><label for="thursday">木曜日</label>
<input id="friday" type="checkbox" name="week" value="friday"><label for="friday">金曜日</label>チェックボックスは、複数の選択肢を用意して、いくつでも選択させることができる項目です。
inputのtype属性を「checkbox」にすることで選択肢を作成できます。
チェックボックスでもname属性を使って選択肢をグループ化することが可能です。
textareaでテキストエリアを表示
<label for="comment">コメント</label>
<textarea id="comment" name="comment"></textarea>textareaは複数行になる文章の入力欄を作りたいときに使います。
中に子要素を作る必要はありませんが、終了タグのを記述しなければいけません。
textareaで作成した入力欄は、右下にある斜線部分をドラッグすると、縦横のサイズを変更することができます。
rows属性とcols属性を使うと、それぞれ「行数」と「1行の文字数」を指定することができます。
placeholder属性について
<label for="name">名前：</label>
<input id="name" type="text" name="yourname" placeholder="山田太郎">
<label for="comment">お問い合わせ</label>
<textarea id="comment" name="comment" placeholder="自由に質問を書いてください"></textarea>inputとtextareaでは、placeholder属性を指定することができます。
placeholder属性は入力欄に薄い文字を表示させて、入力のヒントを与えることができます。
あとで説明する初期値とは異なり、文字入力を始めると消去されます。
buttonで送信ボタンを表示
<button type=“submit>送信</button>buttonを使って送信ボタンを作成することができます。
送信ボタンを押すことで、フォームに記入したデータが送信されます。
実は、inputを使用しても同じようなことができます。
<input type="submit" value="送信する">ですが、buttonの方がカスタマイズの幅が広がりますので、そちらを使用することをおすすめします。
buttonタグには開始タグと終了タグがあるため、中に子要素を持つことができ、CSSでのデザイン変更も容易になります。
もちろん、::beforeや::afterなどの擬似要素も使用できるため、自由度は高いです。
aタグで作ったボタンとデザインを一致させたい場合にも、buttonの方が設定しやすいです。
各項目での初期値の設定方法
これまで、フォームの項目について一通り説明してきました。
それぞれの項目には、あらかじめ初期値を設定することができます。
placeholder属性で指定できる文字は、薄い灰色の文字で入力と同時に消去されますが、初期値は実際に記入されている文字になります。
選択肢の場合も、初期の選択を指定することが可能です。
テキストフィールドの初期値
<input type="text" value="ライオン" name="animal">value属性に文章を記述することで、テキストフィールドの初期値を設定できます。
type属性が「number」や「email」だった場合は、その値の型に応じて指定する必要があります。
テキストエリアの初期値
<textarea name="comment">こんにちは</textarea>テキストエリアの場合は、開始タグと終了タグの間に文章を記述すると、それが初期値になります。
textareaでは、value属性は指定できません。
セレクトボックスの初期値
<select name="weather">
<option value="sunny">晴れ</option>
<option value="cloudy" selected>くもり</option>
<option value="rainy">雨</option>
</select>セレクトボックスに初期値を設定したい場合は、その項目のタグに「selected」を指定してください。
選択肢の順番は変わらないまま、selectedが書かれた項目が最初に選択されて表示されます。
ラジオボタンとチェックボックスの初期値
<p>好きな季節</p>
<input id="spring" type="radio" name="season" value="spring"><label for="spring">春</label>
<input id="summer" type="radio" name="season" value="summer"><label for="summer">夏</label>
<input id="autumn" type="radio" name="season" value="autumn" checked><label for="autumn">秋</label>
<input id="winter" type="radio" name="season" value="winter"><label for="winter">冬</label>ラジオボタンでは、「checked」と書かれた項目が初期値として選択されます。
チェックボックスでも同じように、
<p>希望する曜日</p>
<input id="monday" type="checkbox" name="week" value="monday"><label for="monday">月曜日</label>
<input id="tuesday" type="checkbox" name="week" value="tuesday" checked><label for="tuesday">火曜日</label>
<input id="wednesday" type="checkbox" name="week" value="wednesday"><label for="wednesday">水曜日</label>
<input id="thursday" type="checkbox" name="week" value="thursday"><label for="thursday">木曜日</label>
<input id="friday" type="checkbox" name="week" value="friday" checked><label for="friday">金曜日</label>とcheckedが書かれた項目にチェックが入った状態で表示されます。
チェックボックスは複数選択している状態にできますが、もともと1つしか選択できないラジオボタンでは、初期値として指定できるものも1つのみです。
お問い合わせフォームの作成例
これまでお伝えしてきたものを使って、実際に簡単なお問い合わせフォームを作成してみました。
Webサイトの内容に合わせて、参考にしてください。
<form action="confirm.php" method="post">
<div class="item">
<label class="label" for="name">名前<span class="label-required">(必須)</span>：</label>
<input id="name" type="text" name="yourname">
</div>
<div class="item">
<label class="label" for="email">メールアドレス<span class="label-required">(必須)</span>：</label>
<input id="email" type="email" name="email" placeholder="example@gmail.com">
</div>
<div class="item">
<label class="label" for="tel">電話番号：</label>
<input id="tel" type="text" name="tel" placeholder="000-0000-0000">
</div>
<div class="contact">
<p class="label">ご希望の連絡先</p>
<input id="mail" type="radio" name="contact" value="メール"><label for="mail">メール</label>
<input id="call" type="radio" name="contact" value="電話"><label for="call">電話</label>
</div>
<div class="item">
<label for="item" class="label">お問い合わせ項目：</label>
<select id="item" name="item">
<option value="product">商品について</option>
<option value="order">注文について</option>
<option value="ship">配送について</option>
<option value="other">その他</option>
</select>
</div>
<div class="item">
<label class="label" for="textarea-item">お問い合わせ内容<span class="label-required">(必須)</span>：</label>
<textarea name="textarea-item" id="textarea-item"></textarea>
</div>
<div class="btn">
<button type="submit">送信</button>
</div>
</form>CSSを使ったデザインの例も記述しました。
form{
max-width: 680px;
width: calc(100% - 10px);
margin: 0 auto;
font-size: 20px;
}
.item{
display: flex;
align-items: center;
padding-top: 20px;
}
.sex{
padding-top: 20px;
}
.label{
width: 180px;
padding-left: 10px;
border-left: solid 5px #a0522d;
}
.label-required{
color: #ff6347;
font-weight: bold;
font-size: 18px;
}
input[type="text"],input[type="email"]{
border: solid 1px #aaa;
border-radius: 5px;
padding: 10px;
font-size: 15px;
}
select{
appearance: none;
cursor: pointer;
border: solid 1px #aaa;
border-radius: 5px;
padding: 10px;
font-size: 15px;
}
textarea{
border: solid 1px #aaa;
border-radius: 5px;
padding: 10px;
height: 160px;
width: 480px;
font-size: 15px;
}
.btn{
text-align: center;
margin: 25px auto;
}
button{
background: #ff6347;
border-radius: 7px;
cursor: pointer;
color: white;
font-size: 17px;
font-weight: bold;
padding: 10px 25px;
}項目名と入力欄の部分が明確にわかるように記述すると、全体的に見やすいフォームになります。
入力必須項目には、目印になるような要素を置いてみましょう。
「(必須)」と具体的に書いても構いませんし、マークのようにボックス要素を付け足しても良いですね。
応用になりますが、フォームを作成するときには、「リセットCSS」の導入を検討しても良いでしょう。
リセットCSSについて
リセットCSSとは、ブラウザ間に生じる表示の違いを上書きして、デザインを揃えるために使うCSSのことです。
今回説明した中では、inputタグが表示が崩れやすいものとして有名です。
このような表示の違いを自分でコードを書いて揃えてもいいのですが、それでは、CSS内が煩雑になり大変です。
ネット上には、ダウンロードしてすぐに使えるリセットCSSが多数ありますので、そちらを利用することをおすすめします。
まとめ：HTMLのお問い合わせフォーム作成では、各項目の特徴を知ることが大事
今回は、HTMLを使ったお問い合わせフォームの作り方について解説しました。
実際に動かすにはJavaScriptやPHPなど、他のプログラム言語が必要になりますが、基本的なフォームの形は理解できたかと思います。
フォーム作成する際に鍵となる部分をまとめると、
- inputのtype属性の指定によって、テキストフィールドやラジオボタンなどのフォームが決まる
- inputのid属性とlabelのfor属性に同じものを指定することで、項目名と入力欄が連動する
- ラジオボタン、チェックボックスでname属性を同じにすると、複数の選択肢が同じグループとして扱われる
となります。
これらを参考に、ぜひオリジナルのお問い合わせフォームを作成してみてくださいね。
