第5章 応用テクニックのマスター

5.フォームでアンケートの作成

今回は下記2種類を作成してみました。本来はCGIという外部プログラムを使えばより詳しい内容になるのですが、私のようにCGIを使えないプロバイダの場合は、電子メールをアンケートの返信に利用します。

今回の簡易アンケートのサンプルはこちらです

(1)簡易アンケート

CGIやJavaScriptを使用しないでPageMillのみを使ってアンケート用フォームを作成します。今回作成するアンケートは上記の内容です。なんて、簡単なアンケートじゃ・・・っと設問内容は笑えるのですが、アップルのWebページもこの内容です(^^;)もっともアップルの場合はWebObjectを使っていますが・・・

では、PageMillを使って下記のように作成してみます。PageMillのツールボタンにある「ラジオボタンの挿入」「送信ボタンを挿入」を使います。

はい、ここまでは簡単ですね。きっと・・・では、Yesの左側にあるラジオボタンをクリックし「属性パレット」を見てみます。

(2)属性パレットの内容を変更します

「名称」

質問のグループの名称を指定します。今回のアンケートは「あなたの役に立ちましたか?」の設問がひとつですから、Q1のように指定します。

「値」

この左早Aのラジオボタンを選択した場合にメールには「Yes」という形で送られてきます。

「チェック」

このアンケートのページをブラウザで表示したときに既定値として押された状態にします。

ではアンケート右側のラジオボタンの属性パレットを見てみます。

「名称」は左側のラジオボタンと同じ名称Q1にします。この名称を同一にすると、ラジオボタンは左右どちらかひとつが選択できるようになります。

「値」この右側のラジオボタンを選択した場合にメールには「No」という形で送られてきます。

「チェック」左側のラジオボタンはチェックをオンにしていますから、右早Aは押されていないよう表示されるようオフの状態にします。

次は「送信」ボタンをクリックして属性パレットを見てみます。「名称」例えば複数のページにアンケートをつけた場合は、ここにページ名を入力するとメールでどのページのアンケートかがわかります。「ラベル」送信ボタンに表示したい名前をここに入力します。

では、属性パレットの「フォーム」タグをクリックします。「アクション」にはあなたのメールアドレスを入力します。

「POST」アンケート結果をメールで送信しますから、「POST」を選択します。

(3)HTMLの修正

はい、ここで一段落ですね。次はPageMillの「表示」メニューより「ソースモード」を選択して変更します

<FORM>というタグがありますよね。このENTYPEの値を変更します。

変更前

<FORM ACTION="mailto:eijiiio@mac.com" ENCTYPE="x-www-form-urlencoded" METHOD="POST">

変更後

<FORM ACTION="mailto:eijiiio@mac.com" ENTYPE="text/plain" METHOD="POST" >

「ACTION」にはあなたのメールアドレスが入力されています。

「METHOD」はメールで送りますから“post”です。

「ENTYPE」メールで送信するときにテキストで送るということです。

text/plainだとそのままメールで読めます。他の解説本では、このENTYPEが他の形式になっているのが多いですが、メールで送られてくる内容がエンコード(変換)されて送られてきて、変換するためのツールが必要になります。

っということで、このWebページの一番の内容はこのENTYPEにtext/plainを指定するということです。

これで、OKです。ご自分の環境で確認してみて下さいね。

(4)ちょっぴり高機能な簡易アンケート

MacとPageMillを使って、フォーム機能を使ってアンケートを作成してみます。今回はJavaScriptを使って「送信」ボタンを押すと「ご協力ありがとうございました」のウィンドウを出すようにします。

※この機能はJavaScriptを使用しています。ブラウザの初期設定で「スクリプトを有効にする」をオンにしないと無視されます。下記は、今回作成したHTMLをソースモードでみた例です。変更する箇所は<SCRIPT language=“JavaScript”>から</SCRIPT>の部分と<FORM NAME〜 の部分です。

<SCRIPT language="JavaScript">
<!--
function sendmail(){
document.anketo.action="mailto:eijiiio@mac.com";
document.anketo.method="post";
document.anketo.encoding="text/plain";
alert("ご協力ありがとうございました");
}
//-->
</SCRIPT>

このJavaScriptで sendmail()という関数を定義しています。

actionで指定されたメールアドレスにテキスト形式で送信しろという内容です。

そして「alert」という単語があると思います。sendmail()という関数が呼び出せれたとき・・・そうです「送信」ボタンをクリックしたときに「ご協力ありがとうございました」という警告ウィンドウを表示するという命令です。

「anketo」という単語がありますが、これは<FORM NAME="anketo"に対応しています。

<FORM NAME="anketo" onSubmit="sendmail()">

onSubmitは「送信」ボタンをクリックしたときに右辺の関数を実行しろという命令です。

このサンプルでは「送信」ボタンをクリックしたときにsendmeailというJavaScriptの関数を実行するといった内容になっています。

今回PageMillで作成した「簡易アンケート2」のサンプルはこちらにあります

※居住地域を選択できるアンケートを作成しました。ただし?、愛媛県がポンジュースになっていますから、修正を忘れないでくださいね(笑)PageMillで作成したサンプルはこちらです。

| | | |

Update: Wed, Mar 31, 2004 / 9:43:19 AM