アンケートページの作り方(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()">
※日本語に設定することもできますが、文字化けする恐れがありますので、 半角英数文字が無難です。