現在地: Home » 初級ホームページ作成講座：目次 » ホームページ作成その他：お問合わせフォーム設置
お問合わせフォーム設置
無料(X)HTML CSSエディタの紹介
無料で使えるホームページ作成支援ツールです（当サイトも下記ソフトで作成しています）サイト内では説明上「メモ帳」を利用するようにしていますが、実際のホームページ作成には正直無理があります。お薦めなので是非ダウンロードしておきましょう。
CGIを利用したフォームメールについての解説です。今回、無料で配布されている KENT-WEB のpostmailを使って解説いたします。当サイトでもお世話になってます。
尚、ダウンロード方法及び設定に関しては当サイトでは解説していません。ダウンロード方法及び設定はKENT-WEBの解説に従って下さい。初心者の方でもすぐに利用できるとても優しい解説を添付しておられます。
今回の指定に関する前提条件
- XHTMLソースは<form></form>間のみの解説
- デザインに関しては外部CSSを利用(フォームに#formmailとセレクタを指定しています)
- 入力用ページのみ解説
各サンプル目次
ダウンロード時のXHTMLソース
赤字部分についての変更解説です。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>FormMail</title></head>
<body bgcolor="#F1F1F1" text="#000000">
<h3>ご感想をどうぞ。</h3>
<form action="./postmail.cgi" method="post">
<input type="hidden" name="need" value="email 性別 ページ" />
<input type="hidden" name="match" value="email email2" />
おなまえ<br /><input type="text" name="name" size="35" /><br />
メールアドレス<br /><input type="text" name="email" size="35" /><br />
メールアドレス (再度入力)<br /><input type="text" name="email2" size="35" /><br /><br />
性別<br />
<input type="radio" name="性別" value="男" />男
<input type="radio" name="性別" value="女" />女
<br /><br />
面白かったページ<br />
<input type="checkbox" name="ページ" value="日記" />日記
<input type="checkbox" name="ページ" value="自己紹介" />自己紹介
<input type="checkbox" name="ページ" value="映画批評" />映画批評
<input type="checkbox" name="ページ" value="音楽批評" />音楽批評
<br /><br />
メッセージ<br />
<textarea name="メッセージ" rows="6" cols="50"></textarea><br />
<br /><br />
<input type="submit" value="送信する" /><input type="reset" value="リセット" />
</form>
</body>
</html>
tableタグを使用したパターン
一番ポピュラーなタイプです。
<form action="./postmail.cgi" method="post" id="formmail"> <input type="hidden" name="need" value="email 性別 ページ" /> <input type="hidden" name="match" value="email email2" /> <table border="0" cellpadding="0" cellspacing="0" summary="お問い合せフォーム"> <tr> <th>おなまえ<span>(必須)</span></th> <td><input type="text" name="name" size="35" /></td> </tr> <tr> <th>メールアドレス<span>(必須)</span></th> <td><input type="text" name="email" size="35" /></td> </tr> <tr> <th>メールアドレス<span>(再度入力/必須)</span></th> <td><input type="text" name="email2" size="35" /></td> </tr> <tr> <th>性別<span>(必須)</span></th> <td> <input type="radio" name="性別" value="男" />男 <input type="radio" name="性別" value="女" />女 </td> </tr> <tr> <th>面白かったページ</th> <td> <input type="checkbox" name="ページ" value="日記" />日記 <input type="checkbox" name="ページ" value="自己紹介" />自己紹介 <input type="checkbox" name="ページ" value="映画批評" />映画批評 <input type="checkbox" name="ページ" value="音楽批評" />音楽批評 </td> </tr> <tr> <th>メッセージ</th> <td> <p><textarea name="メッセージ" rows="6" cols="40"></textarea></p> <input type="submit" value="送信する" /><input type="reset" value="リセット" /> </td> </tr> </table> </form>
CSS
#formmail{width: 100%;}
#formmail th,
#formmail td{
vertical-align: top; /* セルの上に配置 */
border-bottom: 1px solid #999999;
}
#formmail th{
padding: 5px 0 10px 10px;
background-color: #ccccff;
}
#formmail th span{
font-weight: normal; /* (必須) */
color: #ff0000;
padding: 0 0 0 1em;
}
#formmail td{
padding: 5px 0 10px 10px;
}
dlタグを使用したパターン
リストタグの<dl>を利用しています。
<form action="./postmail.cgi" method="post" id="formmail"> <input type="hidden" name="need" value="email 性別 ページ" /> <input type="hidden" name="match" value="email email2" /> <dl> <dt>おなまえ<span>(必須)</span></dt> <dd><input type="text" name="name" size="35" /></dd> <dt>メールアドレス<span>(必須)</span></dt> <dd><input type="text" name="email" size="35" /></dd> <dt>メールアドレス<span>(再度入力/必須)</span></dt> <dd><input type="text" name="email2" size="35" /></dd> <dt>性別<span>(必須)</span></dt> <dd> <input type="radio" name="性別" value="男" />男 <input type="radio" name="性別" value="女" />女 </dd> <dt>面白かったページ</dt> <dd> <input type="checkbox" name="ページ" value="日記" />日記 <input type="checkbox" name="ページ" value="自己紹介" />自己紹介 <input type="checkbox" name="ページ" value="映画批評" />映画批評 <input type="checkbox" name="ページ" value="音楽批評" />音楽批評 </dd> <dt>メッセージ</dt> <dd> <p><textarea name="メッセージ" rows="6" cols="40"></textarea></p> <input type="submit" value="送信する" /"<input type="reset" value="リセット" /> </dd> </dl> </form>
CSS
#formmail{width: 100%;}
#formmail dt{
font-weight: bold;
margin: 0 0 5px 0;
padding: 5px 0 5px 5px;
border-left: 10px solid #9999ff;
background-color: #ccccff;
}
#formmail dt span{
font-weight: normal; /* (必須) */
color: #ff0000;
padding: 0 1em;
}
#formmail dd{
margin: 0 0 1.5em 0;
padding: 0 0 0 0;
}
dlタグを使用したパターン2
リストタグの<dl>を利用しています。上記サンプルをもっと分かりやすくグループ分けしています。
<form action="#" method="post" id="formmail"> <input type="hidden" name="need" value="email 性別 ページ" /> <input type="hidden" name="match" value="email email2" /> <fieldset> <legend>基本情報</legend> <dl> <dt>おなまえ<span>(必須)</span></dt> <dd><input type="text" name="name" size="35" /></dd> <dt>メールアドレス<span>(必須)</span></dt> <dd><input type="text" name="email" size="35" /></dd> <dt>メールアドレス<span>(再度入力/必須)</span></dt> <dd><input type="text" name="email2" size="35" /></dd> <dt>性別<span>(必須)</span></dt> <dd> <input type="radio" name="性別" value="男" />男 <input type="radio" name="性別" value="女" />女 </dd> </dl> </fieldset> <fieldset> <legend>アンケート</legend> <dl> <dt>面白かったページ</dt> <dd> <input type="checkbox" name="ページ" value="日記" />日記 <input type="checkbox" name="ページ" value="自己紹介" />自己紹介 <input type="checkbox" name="ページ" value="映画批評" />映画批評 <input type="checkbox" name="ページ" value="音楽批評" />音楽批評 </dd> </dl> </fieldset> <fieldset> <legend>ご意見</legend> <dl> <dt>メッセージ</dt> <dd> <p><textarea name="メッセージ" rows="6" cols="40"></textarea></p> <input type="submit" value="送信する" /><input type="reset" value="リセット" /> </dd> </dl> </fieldset> </form>
CSS
#formmail{width: 100%;}
fieldset{
margin-bottom: 1em;
padding: 1em 2em;
}
#formmail dt{
font-weight: bold;
margin: 0 0 5px 0;
padding: 5px 0 5px 5px;
}
#formmail dt span{
font-weight: normal;
color: #ff0000;
padding: 0 1em;
}
#formmail dd{
margin: 0 0 1.5em 0;
padding: 0 0 0 0;
}
高性能サーバ
低価格サーバ
無料ホームページスペース
