鈴木智子のホームページのアクセスアップコーディング講座メールフォームのスキン制作

メールフォームのスキン制作

メールフォームを設置するために必要なスキンをhtmlファイルで制作します。

htmlファイルを用意する

ここでは、inquiry（お問合せ）という名前で制作します。

ファイル名	内容
inquiry.html	入力画面
inquiry_conf.html	入力内容確認画面
inquiry_thanks.html	送信終了後画面
inquiry_timeout.html	セッションタイムアウト画面

inquiry.htmlとinquiry_conf.htmlは、後にソースを丸ごとコピーして使用するのできちんと制作しましょう。

inquiry.html（入力画面）の制作

まずはinquiry.html（入力画面）から制作します。
といっても、inqiry.htmlの共通要素は他のページと同じですので、作成済みのhtmlファイルをコピーして流用できます。
コンテンツの内容を全て削除した後、tableタグ等を使用してフォームの項目とフォームオブジェクトを配置してゆきます。
「鈴木智子のホームページのアクセスアップ講座」の場合は、下記のようになります。

<form method="post" action="inquiry_conf.php" enctype="multipart/form-data">
<table class="layout_border">
<tr>
<td width="176">お名前</td>
<td width="459"><input name="name" value="" type="text" /></td>
</tr>
<tr>
<td>ふりがな</td>
<td><input name="furigana" value="" type="text" />
</td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input name="mail" value="" type="text" /></td>
</tr>
<tr>
<td>お問合せ内容</td>
<td><select name="inquiry_contents">
<option value="" selected>選択してください</option>
<option value="ホームページ制作について" >ホームページ制作について</option>
<option value="SEOについて" >SEOについて</option>
<option value="SEOツールについて" >SEOツールについて</option>
<option value="SEMについて" >SEMについて</option>
<option value="広告について" >広告について</option>
<option value="取材依頼" >取材依頼</option>
<option value="その他のメッセージ" >その他のメッセージ</option>
</select>
</td>
</tr>
<tr>
<td>このサイトを何で<br />
お知りになりましたか？</td>
<td><select name="know">
<option value="" selected>選択してください</option>
<option value="Yahoo!検索" >Yahoo!検索</option>
<option value="Google検索" >Google検索</option>
<option value="他の検索サイト" >他の検索サイト</option>
<option value="新聞・雑誌" >新聞・雑誌</option>
<option value="その他" >その他</option>
</select>
</td>
</tr>
<tr>
<td>メッセージ</td>
<td><textarea name="notes" value="" rows="7"></textarea></td>
</tr>
</table>
<p align="center">ご記入内容をご確認の上、よろしければ確認ボタンを押してください。<br />
<br />
<input type="submit" name="Submit" value="　確　認　" />
</p>
</form>

ここで注意しなければならないのが、フォームオブジェクトのname="○○○"の部分です。

name="○○○"の○○○部分は、項目の内容を指しています（例：お名前＝name）。
同じ要素名を入れないでください。
必ず半角英数字を使用してください。
要素名に-（ハイフン）は使えません。

フォームオブジェクトのタグについてはこちらの便利なサイトをご参照ください。

とほほのwww入門（<form> - フォーム）

inquiry_conf.html（入力内容確認画面）の制作

入力内容確認画面とは、[確認]ボタンを押した後の画面のことです。
ユーザーに入力内容を確認してもらうと同時に、フリガナが入力必須項目とされているのに入力されていない場合、「フリガナを入力してください」などの注意を促します。

ここでは先程作成したinquiry.htmlを流用します。
このファイルはスクリプトを設置したあとに内容を変更しますので、ひとまずこのままにしておいてください。

inquiry_thanks.html（送信終了後画面）の制作

ここでもinquiry.htmlを流用します。
コンテンツの内容を全て削除して、そこに送信終了後用のテキストを配置します。

例）
鈴木智子のホームページのアクセスアップ講座にお問合せいただき、ありがとうございました。
お問合せいただきました内容については、3営業日以内に返信を差し上げます。
万が一弊社からの返信が遅れた場合は、お手数ですがもう一度メールフォームからお問合せいただくか、お問合せ内容確認メールに記載の連絡先よりお問合せください。

以上でinquiry_thanks.html（送信終了後画面）の制作は終了です。

inquiry_timeout.html（セッションタイムアウト画面）の制作

セッションタイムアウト画面を制作します。
セッションタイムアウトとは、一定時間操作をせずに放置した場合に表示される画面のことです。今回使用するスクリプトでは、約24分間放置すると、セッションタイムアウトになります。

ここでもinquiry.htmlを流用します。
コンテンツの内容を全て削除した後に、下記のソースをコピーしてください。

<p>処理がタイムアウトしました。<br />もう一度お問合せ事項をご入力ください。</p>
<form action="inquiry.php" method="post" enctype="multipart/form-data">
<input type="submit" name="button" id="button" value="　戻　る　" />
</form>

以上でinquiry_timeout.html（セッションタイムアウト画面）の制作は終了です。

これで4ファイルの制作が終わりました。
いよいよ「メールフォームのスクリプトの設置」に移りましょう。