アンケートページの作り方（JavaScriptを使用）
JavaScript
sendmailが使えないフォームページを作成するには、JavaScriptを使用する方法もあります。ただし、既定のメールソフトがMicrosoft Office の Outlook 等ではうまく動作しないので注意してください。 なお、この手法はかなり古いので、あまり有効ではないでしょう。
はじめに
メールソフトを起動させずに、簡単にアンケートフォームを作成することができます。しかしながら、セキュリティの関係で、自作CGIを使ってメール受信することができないプロバイダがあります（sendmailが使えないため）。
ブラウザから簡単にE-mail受信ができるようなフォームをご紹介いたします。
もちろん、文字化け対策は万全ですので、ぜひ使ってみてください。
※ただし、Netscape Navigator 3.0以降、Internet Explorer 4.0以降（標準で使用するメールソフトがOutlook Expressであること）に適用となります。ご了承ください。
さっそく作ってみよう
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ゲストブック</title>
<script type="text/javascript">
<!--
function addtitle()
{
document.sendmail.encoding='text/plain';
document.sendmail.Page.value=document.title;
document.sendmail.Browser.value=navigator.appName;
document.sendmail.Version.value=navigator.appVersion;
}
//-->
</script>
</head>
<body>
<h2>ゲストブック</h2>
<hr />※注意：以下のブラウザでのみ適用となります。ご了承ください。
<ol>
<li>Netscape Navigator 3.0以降 </li>
<li>Microsoft Internet Explorer 4.0以降<br />
(標準で使用するメールソフト：Outlook Express) </li>
</ol>
<hr />
<form name="sendmail" method="post"
action="mailto:（あなたのE-mailアドレス）" onsubmit="addtitle()">
<table border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>おすまいは？</td>
<td><select name="ADDRESS" size="1">
<option value="北海道">北海道</option>
<option value="青森">青森</option>
<option value="岩手">岩手</option>
<option value="秋田">秋田</option>
<option value="山形">山形</option>
<option value="宮城">宮城</option>
<option value="福島">福島</option>
<option value="群馬">群馬</option>
<option value="栃木">栃木</option>
<option value="茨城">茨城</option>
<option value="千葉">千葉</option>
<option value="東京">東京</option>
<option value="埼玉">埼玉</option>
<option value="神奈川">神奈川</option>
<option value="山梨">山梨</option>
<option value="新潟">新潟</option>
<option value="長野">長野</option>
<option value="静岡">静岡</option>
<option value="富山">富山</option>
<option value="岐阜">岐阜</option>
<option value="愛知">愛知</option>
<option value="三重">三重</option>
<option value="石川">石川</option>
<option value="福井">福井</option>
<option value="滋賀">滋賀</option>
<option value="京都">京都</option>
<option value="大阪">大阪</option>
<option value="奈良">奈良</option>
<option value="和歌山">和歌山</option>
<option value="兵庫">兵庫</option>
<option value="香川">香川</option>
<option value="徳島">徳島</option>
<option value="愛媛">愛媛</option>
<option value="高知">高知</option>
<option value="鳥取">鳥取</option>
<option value="岡山">岡山</option>
<option value="島根">島根</option>
<option value="広島">広島</option>
<option value="山口">山口</option>
<option value="福岡">福岡</option>
<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>
<td>このホームページの<br />
感想は？</td>
<td><select name="KANSO" size="1">
<option selected="">すばらしい！</option>
<option>よくできてるよ！</option>
<option>ふつう</option>
<option>たいしたことない</option>
<option>いまいち</option>
<option>最悪！</option>
</select> </td>
</tr>
<tr>
<td>メッセージをどうぞ</td>
<td><textarea rows="7" cols="55" name="message">
</textarea></td>
</tr>
<tr>
<td colspan="2"><center>
<input type="submit" value="メール送信" />
<input type="reset" value="リセット" />
<input type="hidden" name="Page" />
<input type="hidden" name="Browser" />
<input type="hidden" name="Version" /></center></td>
</tr>
</tbody>
</table>
<br />
<hr />
<input type="button" value=" もどる " onclick="history.back();" /></form>
</body>
</html>
まず、メモ帳でこのHTMLソースをコピーしてください。
そして、赤色の部分をあなたの環境に合わせてくださいね。
- 4行目と19行目・・・タイトルの設定
ゲストブック→このままでいい場合はそのままで(^_^;) - 18行目・・・BODYタグの設定
text="#000000"→既定値の文字の色は黒です。背景色とのバランスを考えて設定してください。
bgcolor="#ffffff"→既定値は背景色は白です。変更したい色に変えてください。
背景画像を設定したい場合は、background="背景画像ファイルへのパス"にしてください。 - 16行目・・・送信先のE-mailアドレスの設定
（あなたのE-mailアドレス）→この部分にあなたのE-mailアドレスを入力してください。
－例－
<form name="sendmail" method="post" action="mailto:webmaster@wanichan.com"
onSubmit="addtitle()">
サンプルもご用意しています。 →こちら
（ただし、送信先が私のE-mailアドレスになっています。注意！）
エンコードタイプは必ずシフトJISで！
UTF-8などの異なるエンコードタイプで作ると、思いっきり文字化けしてしまいます。
accept-charset属性で指定する方法ありますが、IEでは対応してないので。。。orz
フォーム受信の時の件名（サブジェクト）を指定したい場合は？
<form>タグに、次のように設定してください。
<form name="sendmail" method="POST" action="mailto:あなたのE-mailアドレス?subject=件名" onsubmit="addtitle()">
★例★ 件名を「Form Mail」にしたい場合（私のE-mailアドレスの場合です）
<form name="sendmail" method="POST" action="mailto:webmaster@wanichan.com?subject=Form Mail" onSubmit="addtitle()">
※日本語に設定することもできますが、文字化けする恐れがありますので、 半角英数文字が無難です。
スポンサーリンク
INDEX