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

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





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

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


 サンプル

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

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


(送信先は私になっています)

「メール送信フォームサンプル」
メール送信フォーム
お名前
メールアドレス
ネット経験 1年未満 1〜5年 5年以上
ご意見
 

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





 フォームを作成

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



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

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

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


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

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


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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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



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


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


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



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

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

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




 注意

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

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





| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved