ホームページビルダー・グレート初心者講座

　CGI を使わないメールフォームの設置

ＣＧＩを使わずに利用できるメールフォームを作ってみます。　これは送信する時にＣＧＩを使わず観覧者のメールソフトを利用する為、ＣＧＩの利用制限のあるサーバでも利用できるのが利点です。

　サンプル

通常、フォームはＣＧＩへデータを渡すために使いますが、メールへのリンクと同じタグを使えば、フォームからＣＧＩを使わずにメール送信することができます。

※ 実際に送信するにはメールソフトから「送信」を行わないといけません。
　　送信を押したメールはメールソフトの「送信トレイ」等に置かれます。

（送信先は私になっています）

「メール送信フォームサンプル」

メール送信フォーム

お名前
メールアドレス
ネット経験		１年未満　１～５年　５年以上
ご意見

「送信されるメールサンプル」

　フォームを作成

上のサンプルのフォームのページ編集画面は下の画像のようになっており、これを参考にしながら順番に説明をしていきたいと思います。

１．　フォーム枠を挿入する
まずはフォームを設定したい所にフォーム枠を挿入するのですが、上のように表の中へレイアウトする場合、挿入したいセルを左クリックし、メニューバーの「挿入」 → 「入力部品」→ 「フォーム」を選択し、そのまま続けてレイアウトさせる表を挿入します。

こうする事で表全体がフォームの対象となります。

※　レイアウトさせる表を作成してからフォームを挿入すると別々のフォー
　　ムとなってしまい動作しませんので、必ずフォームを挿入してからそこ
　　に表を挿入します。

２．　説明書きを入れていく
上の画像でいうと赤丸９番の所に「お名前」「メールアドレス」などを入れていきます。

なるべく分かりやすい説明を付けておきましょう。

３．　名前の入力欄を付ける
上の画像の赤丸１の部分を１行テキスト領域といい、文字を入力する為の領域です。

赤丸１のセルを左クリック、メニューバーから「挿入」 → 「入力部品」 → 「１行テキスト領域」を選択し、下の項目を設定します。

名前
１行テキストボックスの名前で、メールが送信されると上部の「送信されるメールサンプル」の赤文字「ａ」の部分にこれが表示されます。

上のサンプルではこの項目を「お名前」に設定してあります。
この項目は他の項目と重ならないように必ず設定します。

カラム数
これは初期表示される入力欄の幅を設定し、はじめは２０になっていますが、これは半角で２０文字なので、全角だと１０文字になります。　サンプルでは２０に設定しています。

最大入力文字数
入力できる最大の文字数を設定します。　上のカラム数と間違いやすいですが、これが入力出来る文字の数で、上のカラム数は入力欄の幅です。
これを設定しなければ、カラム数を超えて入力した場合、右にスクロールしながら入力していく事ができます。

特に必要なければ設定は不要です。　サンプルでは設定していません。

初期値
デフォルトで入力されている値を入れます。　例えばここに「名前を入力して下さい」と入れておくと、ページを開いた時、１行テキスト領域に「名前を入力して下さい」と表示されます。

特に設定しなければサンプルのように空欄となります。

４．　メールアドレス入力欄を付ける
これは上記と同じく１行テキスト領域を使っているので、同じように設定していきます。

注意するのは「３．名前の入力欄を付ける」で設定した名前と重ならないようにする事で、サンプルでは赤丸２のセルに「メールアドレス」という名前で、カラム数３０、その他はデフォルトのままの設定にしてあります。

ここで付けた「名前」は上部サンプルの「送信されるメールサンプル」の赤文字「ｂ」のようにメールに記載されます。

５．　ネット経験の選択欄を付ける
これはラジオボタンを利用しています。　ラジオボタンは複数の中から１つを選択するのに利用されるボタンで、サンプルでも１つしか選択できないようになっています。

ラジオボタンを入れたいセルをクリックし、メニューバーの「挿入」 → 「入力部品」 → 「ラジオボタン」を選択し、項目を設定します。

グループ名
これは複数の中から１つのみを選択させるために、複数のボタンを１つのグループと認識させる為の名前です。　例えば、サンプルでは３つのラジオボタンがありますが、グループ名に、「ネット暦」という名前を付け、他の２つも同じくグループ名を「ネット暦」としています。

まず１つ目のラジオボタンはグループ名を自分で入力します。
２つ目以降のラジオボタンはグループ名のドロップダウンメニューから１つ目に設定したグループ名を選択する事で設定できます。　サンプルでは３つとも「ネット暦」としています。

ここに設定したグループ名が、上部サンプルの赤文字「ｃ」の「ネット暦」の部分に記載される項目となります。

選択値
ここに入力した値が上部サンプルの赤文字「ｃ」の「５年以上」の部分に記載される項目となる部分で、それぞれのラジオボタンに別々に設定します。

サンプルでは３に「１年未満」　４に「１から５年」５に「５年以上」という選択値が設定してあります。

初期状態
初期状態ははじめの時点で選択されているかどうかの設定です。
サンプルでは１年未満の項目だけ選択のチェックボックスにチェックされています。

６．　ネット経験のラジオボタンに説明を付ける
このままではラジオボタンが何の役割なのか分からないので、ラジオボタンのとなりに説明を付けていきます。

名前を付けるときはラジオボタン周辺をクリックし、キーボードの矢印キーで送りながら順番に付けていくといいと思います。

７．　ご意見欄を付ける
ご意見欄を入れたい場所をクリックし、メニューバーの「挿入」 → 「入力部品」 → 「複数行テキスト領域」を選択します。

名前
ここに設定した名前はメールサンプルの赤文字「ｄ」の「ご意見」の欄に該当します。他の名前と重ならないように設定します。　サンプルでは「ご意見」になっています。

行数
テキスト領域の行数を指定し、サンプルでは行数「７」に設定しています。

カラム数
テキスト領域の幅を設定します。　これも半角相当で設定するので、３０に設定すれば全角で１５文字まで入力できるようになります。　サンプルでは「３０」に設定しています。

８．　「送信」「リセット」ボタンを付ける
送信ボタンとリセットボタンも同じように「挿入」 → 「入力部品」 → 「プッシュボタン」から挿入します。

送信ボタンとリセットボタンは、挿入し、「ボタンに表示するラベル」を設定するだけで結構で、「名前」の欄を入れてしまうと、送信されたメールにこれが表示されてしまいます。

別に害はないですが、必要もないので設定しません。

サンプルでは送信ボタンのラベルに「送信」、リセットボタンのラベルに「リセット」がそれぞれ設定してあり、その他の項目は設定していません。

９．　フォームにメール送信設定をする
最後にフォームにメール送信するための設定をします。
フォーム内を右クリックし、「属性の変更」を選択しますが、このままではフォームの設定が表示されていないと思うので、「属性の変更」画面の上部にある「タグ」のドロップダウンメニューから「フォーム」を選び下の項目を設定します。

下のサンプルを見てください。
設定する項目は「アクション」の項目と「メソッド」、「エンコードの種類」の３項目です。

アクション
以下のタグを「アクション」の欄に貼り付け、設定します。

mailto:****@****.**.**?subject=ここへ件名を入力

****@****.**.** となっている所に送信先のアドレスと入れ替えます。
サンプルでは私のメールアドレス「aimix@mbh.nifty.com」が設定。

ここへ件名を入力は送信されるメールの件名と入れ替えます。

メソッド
メールソフトにデータを渡す方法で、「Post」を選択します。

エンコードの種類
「text/plain」を選択します。

この３つを設定したらOKで完了しましょう！

ちょっと長くなりましたが、これで設定完了です！　お疲れ様でした。
プレビューで早速確認してみましょう！　それぞれの項目を入力し、「送信」ボタンを押してみて、「電子メールを送信します」と表示されればOKです。
そのまま送信してみます。

フォームを使って送信した人のメールソフトを利用して送信するので、実際に送信するにはメールソフトを立ち上げ、「送受信」する必要があります。送受信してみて実際に送られてきたら成功です。

チェックボックスやオプションメニューなども同様の手順で使うことができるので、いろいろと試してみましょう。

　注意

この方法では実際に送信するのにメールソフトを立ち上げて送信しなくてはいけないので手間がかかってしまうのと、メッセージを入れた人が送信するのを忘れていると送られません。

メール送信にCGI が使える場合は使ったほうがいいのかもしれませんが設置できない所も多く、CGIも使えない場合はこの方法が役に立つと思います。