今回はPHPを使ってコンタクトフォームの入力画面を作成する方法を紹介します。
作成する内容はコンタクトフォームを作成し、送信先のファイルまで情報を送るところまでです。難易度自体は簡単だと思います。
コンタクトフォームのコード
今回作成するコンタクトフォームはform.php、送信先はcheck.phpとします。
流れとしては、<input>や<textarea>に必要事項をユーザーに入力してもらい、情報をPOST変数に格納してデータを送るという感じです。
まずはHTMLでフォームを作成し、<table>などを使って少し整えておきましょう。
form.php（一部省略）
<form id="mail-form" action="./check.php" method="post">
<table>
<thead>
<tr>
<td colspan="2">コンタクトフォーム</td>
</tr>
</thead>
<tbody>
<tr>
<th>お名前</th>
<td><input type="text" id="name" name="name" value="" placeholder="名前を入力してください"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="mail" id="email" name="email" value="" placeholder="メールアドレスを入力してください"></td>
</tr>
<tr>
<th>電話番号</th>
<td><input type="tel" id="tel" name="tel" value="" placeholder="電話番号を入力してください"></td>
</tr>
<tr>
<th>URL</th>
<td><input type="url" id="url" name="url" value="" placeholder="URLを入力してください"></td>
</tr>
<tr>
<th>性別</th>
<td>
<input type="radio" id="sex-male" name="sex" value="男性">男性
<input type="radio" id="sex-female" name="sex" value="女性">女性
</td>
</tr>
<tr>
<th>お住まいのエリア</th>
<td>
<select id="location" name="location">
<option value="">選択してください</option>
<option value="北海道・東北">北海道・東北</option>
<option value="関東・甲信">関東・甲信</option>
<option value="首都圏">首都圏</option>
<option value="中部・東海">中部・東海</option>
<option value="近畿・北陸">近畿・北陸</option>
<option value="中国・四国">中国・四国</option>
<option value="九州・沖縄">九州・沖縄</option>
</select>
</td>
</tr>
<tr>
<th>お問い合わせ項目</th>
<td>
<input type="checkbox" id="check-inquiry" name="check[]" value="お問い合わせ">お問い合わせ
<input type="checkbox" id="check-quotation" name="check[]" value="お見積もり">お見積もり
<input type="checkbox" id="check-order" name="check[]" value="発注依頼">発注依頼
</td>
</tr>
<tr>
<th>件名</th>
<td><input type="text" id="subject" name="subject" value="" placeholder="件名を入力してください"></td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea id="message" name="message" rows="5" cols="50"></textarea></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button type="reset" id="reset-input" name="reset-input">やり直す</button></td>
<td><button type="submit" id="submit-input" name="submit-input">確認画面へ</button></td>
</tr>
</tfoot>
</table>
</form>
解説
送信先のファイルにデータを送るためには<form>タグにはaction属性とmethod属性を指定する必要があります。
action属性には送信先のファイル名、method属性にはpostを指定します。
<input>のtype属性は全てtextでも問題ないですが、よりわかりやすいように電話番号はtel、メールアドレスにはmail、URLにはurlとしておきましょう。また、value属性の値はからにしておきます。
name属性は送信先で参照するので、わかりやすい文字列を指定しておきましょう。
idは指定しなくても大丈夫ですが、バリデーションなどで項目の指定する際に使うので、name属性と同じ値を入れておきます。
本文となるお問い合わせ内容の欄は<textarea>タグで作成します。必要に応じてcols、rowsの値も指定しておきましょう。
また、複数の選択肢からどれか1つだけを選択する場合は<input>タグのtype属性にradio、value属性に項目名、name属性にわかりやすい文字列を指定しておきます。ラジオボタンですね。
1つを選択する場合でもプルダウン形式にしたい場合は<selece>タグと<option>タグで構成します。ラジオボタンと同じようにvalue属性に項目名、name属性にわかりやすい文字列を指定しておきます。
複数選択可能にしたい場合はtype属性をcheckboxとします。value属性とname属性は上と同じです。
ボタン自体は<button>タグを使って作成し、役割をtype属性で指定することができます。送信ボタンならsubmit、入力値のリセットならresetと指定します。
最後に注意点ですが、チェックボックスのように複数選択できる項目のname属性は、値の最後に[]を追加することを忘れないでください。
これは項目が複数選択された場合に、送信先に選択された複数のデータを全て受け取れるようにするための記述です。忘れると複数選択したはずなのに、最初の1つしか送信されていないなんてことになるので注意しましょう。
コンタクトフォームの入力画面はだいたいこんな感じです。正直PHPはほとんど使いませんでしたね。
name属性は送信先のファイルでデータを指定する際に使うので、わかりやすい値をいえれておくのがいいでしょう。
