HTMLでメールフォームを作成する方法

2014/05/06

メールフォームは、ホームページを見た人からのお問い合わせなどを受け付ける為の機能です。 企業サイトはもちろんですが、個人サイトでもできるだけ準備しておいた方が良いでしょう。

このページではメールフォームを作成する方法をご紹介します。今回メールを送信する為のプログラムはPHP工房の多機能メールフォーム フリー（無料）版を利用させてもらいます。

メールフォーム作成のサンプルページも用意しましたので、記事の内容と一緒にご覧ください。

フォームタグの構成

メールフォームはHTMLのフォームタグを利用します。 フォームタグは<form>〜</form>内に記述します。

<form method="送信方法" action="プログラムのURL">
	<!--ここにフォームタグを記述します-->
</form>

代表的なフォーム内の部品をご紹介しましょう。

テキストボックス

1行のテキストを入力できるテキストボックスです。名前やメールアドレスなどの入力欄に使用します。 name属性にはテキストボックスの名前を設定しておき、幅の大きさを変えるにはsize属性に設定をします。

<input type="text" name="" size="30">

テキストボックス：

ラジオボタン

項目を選択する為のボタンです。複数の項目を同時に選択する事はできませんので、性別など必ずどちらかに当てはまる項目に利用します。

name属性には同じグループのラジオボタンの名前を設定し、各ボタンの項目はvalue属性に設定します。 例えば性別を選択するラジオボタンの場合、name属性には「性別」、value属性には「男性」や「女性」を設定します。

<input type="radio" name="" value="">

ラジオボタン：

チェックボックス

ラジオボタンと同様に項目を選択する為のボタンです。チェックボックスは複数の項目を同時に選択する事ができます。

<input type="checkbox" name="" value="">

チェックボックス：

テキストエリア

複数行のテキストが入力できるテキストエリアです。お問い合わせ内容など、少し長い文章を入力する事が想定される箇所に利用します。

<textarea rows="10" cols="50" name=""></textarea>

テキストエリア：

送信ボタン

メールフォームの内容を送信する為のボタンです。

<input type="submit" name="送信ボタン" value="送信">

送信ボタン：

メールフォームのHTML

フォームの構成要素を使って一般的なメールフォームのHTMLを書いてみましょう。
メールフォームを追加したい箇所に以下のソースコードを追加してください。

<form method="post" action="mail.php">
	<table class="sample-table">
		<tr>
			<th>お名前</th>
			<td><input type="text" name="名前" size="30"></td>
		</tr>
		<tr>
			<th>メールアドレス</th>
			<td><input type="text" name="Email" size="40"></td>
		</tr>
		<tr>
			<th>性別</th>
			<td>
				<span><input type="radio" name="性別" value="男性">男性</span>
				<span><input type="radio" name="性別" value="女性">女性</span>
			</td>
		</tr>
		<tr>
			<th>趣味</th>
			<td>
				<span><input type="checkbox" name="趣味" value="読書">読書</span>
				<span><input type="checkbox" name="趣味" value="映画鑑賞">映画鑑賞</span>
				<span><input type="checkbox" name="趣味" value="旅行">旅行</span>
			</td>
		</tr>
		<tr>
			<th>内容</th>
			<td><textarea rows="10" cols="50" name="内容"></textarea></td>
		</tr>
	</table>
	<div id="mainform-submit">
		<input type="submit" name="送信ボタン" value="送信">
	</div>
</form>

メールフォームのプログラムへのパス設定

メールフォームのHTMLでのポイントは、formタグ内に書かれているactionプロパティです。 actionにはメールフォームの内容を受け渡すプログラムのファイル名を記述します。

上記のソースコードでは、フォームのHTMLファイルと同じフォルダにプログラム（mail.php）をアップロードしている場合の記述にしています。

仮に「php」という名前のフォルダを作って、そのフォルダ内にプログラム（mail.php）をアップロードした場合には、actionには「../php/mail.php」というプログラムへのパスが入ります。

ファイルパスはご自分の環境に合わせて修正をしてください。

メール送信プログラムについて

このページでご紹介しているメール送信用のプログラムについては、ソース配布元のPHP工房様のサイトに区らしく書かれています。設定などは配布元のサイトをご覧ください。

PHP工房の多機能メールフォーム フリー（無料）版

またPHPで書かれたプログラムを使用する場合には、PHPが動作するレンタルサーバーを用意する必要があります。SITEMIXなど、PHPが動作する無料レンタルサーバーもありますので、もし今の環境がPHPが動かない場合には引越しなども検討してみましょう。