CGIお問合わせフォーム設置｜初級ホームページ作成講座

Loading

スポンサードリンク

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;
  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;
  padding: 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: 0 0 1em;
  padding: 1em 2em;
}

#formmail dt {
  font-weight: bold;
  margin: 0 0 5px;
  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;
}

スポンサードリンク