一言メールフォーム設置 -PostMail編-

KENT WEBさんのPostMailで、一言メールフォームを作ります。

留意事項

PostMailの設置が必要です。
確認画面の設定はpostmail.cgiで。
KENTさんの著作表示を、どこかに代入してください。
（著作表示を完了画面でだす、KENTへリンクなど）
フォームの見栄えが気になる人はデザインページへ。

サンプルA

サンプル1の特徴

シンプル
2行以上入力できる
IE以外では、2行フォームにみえる
ボタンを押すまで送信されない

ソース

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<p>
<textarea name="_メッセージ" rows="1" cols="30"></textarea>
<input type="submit" value="コメント送信">
</p>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

name属性値の先頭に_(半角アンダーバー)を付けると、その項目は入力必須になります。これは PostMailの機能です。

rows="1" 入力フィールドの表示行数
cols="30" 入力フィールドの表示幅

サンプル

サンプル1の特徴

2行以上入力できる
IE以外では、2行フォームにみえる
ボタンを押すまで送信されない

ソース

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<p>
<label for="message">メッセージ</label>
<textarea name="_メッセージ" rows="1" cols="50" id="message"></textarea>
<input type="submit" value="送信">
</p>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

name属性値の先頭に_(半角アンダーバー)を付けると、その項目は入力必須になります。これは PostMailの機能です。

rows="1" 入力フィールドの表示行数
cols="50" 入力フィールドの表示幅

サンプル2

サンプル2の特徴

入力は1行まで
タグで最大入力文字数を設定できる
IE以外でも1行メールフォームに見える
入力フィールドの中で[Enter]キーを押すと送信される

ソース

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<p>
<label for="message">メッセージ</label>
<input type="text" name="_メッセージ" size="60" maxlength="50" id="message">
<input type="submit" value="送信">
</p>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

name属性値の先頭に_(半角アンダーバー)を付けると、その項目は入力必須になります。これは PostMailの機能です。

size="60" テキストフィールドの幅
maxlength="50" 50文字まで入力可能

maxlengthの補足

maxlengthは、<input type="text">か<input type="password">のみに指定できる属性です。

サンプル1にチェックボックス付加

非公開～の文字列をクリックしてもボックスにチェックが入ります。

ソース

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<p>
<label for="message">メッセージ</label>
<label for="box"><span style="font-size: 82%;">（非公開希望の人は□をチェックしてね）</span></label>
<br>
<input type="checkbox" name="check1" value="非公開希望" id="box">
<textarea name="_メッセージ" rows="1" cols="40" id="message"></textarea>
<input type="submit" value="送信">
</p>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

name属性値の先頭に _ (半角アンダーバー)を付けると、その項目は入力必須になります。これは PostMailの機能です。

rows="1" 入力フィールドの表示行数
cols="40" 入力フィールドの表示幅

サンプル3

サンプル1に名前を追加したものです。

ソース

<form action="http://～～/postmail.cgi" method="post">
<p>
<label for="name">名前</label>
<input type="text" name="名前" size="10" id="name">
<label for="message">メッセージ</label>
<textarea name="_メッセージ" rows="1" cols="40" id="message"></textarea>
<input type="submit" value="送信">
</p>
</form>

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

name属性値の先頭に_(半角アンダーバー)を付けると、その項目は入力必須になります。これはPostMailの機能です。

rows="1" 入力フィールドの表示行数
cols="40" 入力フィールドの表示幅

サンプル4

サンプル3にtableを使ったものです。

ソース

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<table>
<tr>
    <td><label for="name">Name</label></td>
    <td><label for="message">Comments</label></td>
</tr>
<tr>
    <td><input type="text" name="名前" size="10" id="name"></td>
    <td><textarea name="_メッセージ" rows="1" cols="40" id="message"></textarea>
<input type="submit" value="Post"></td>
</tr>
</table>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

太字の名前 Name Comments Post は、変えても問題ありません。

補足

name属性値の先頭に_(半角アンダーバー)を付けると、その項目は入力必須になります。これはPostMailの機能です。

rows="1" 入力フィールドの表示行数
cols="40" 入力フィールドの表示幅

メール件名をタグで指定する

これはPostMailの仕様です。

部品サンプル

<input type="hidden" name="subject" value="メールタイトル○○">

これを挿入すると、postmail.cgi の $subject より優先されます。

PostMail用ソースサンプル

サンプル1に挿入した例です。

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<input type="hidden" name="subject" value="メールタイトル○○"><!-- 件名指定 -->
<p>
<label for="message">メッセージ</label>
<textarea name="_メッセージ" rows="1" cols="50" id="message"></textarea>
<input type="submit" value="送信">
</p>
</form>
<!-- ここまで -->

メール件名をメニュー選択する

上と同じくPostMailの仕様です。

PostMail用ソースサンプル

<!-- ここから -->
<form action="http://～～/postmail.cgi" method="post">
<p>件名：
<select name="subject">
<option value="メールフォーム：">お選び下さい▼</option>
<option value="メールフォーム：リンク切れ">リンク切れ</option>
<option value="メールフォーム：ご意見ご感想">ご意見ご感想</option>
<option value="メールフォーム：その他">その他</option>
</select>
内容：
<textarea name="_内容" rows="1" cols="40"></textarea>
<input type="submit" value="送信">
</p>
</form>
<!-- ここまで -->

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

補足

緑色が実際の件名
オレンジ色がフォームに表示される件名

PostMailの確認画面は件名がでませんので（07年09月現在）、管理用に件名を変えても大丈夫です。変えない場合は、<option>件名○○</option>で結構です。

<option>件名○○</option>見本

<select name="subject">
<option>お選び下さい▼</option>
<option>リンク切れ</option>
<option>ご意見ご感想</option>
<option>その他・分からない</option>
</select>

option要素の内容が件名として送信されます。

上記ソースの先頭行に<input type="hidden" name="subject" value="メールタイトル○○">を挿入すると、hiddenとoptionで選択した件名が連結して届きます。最終行に挿入すると連結が逆になります。

メール件名をラジオボタンで選択

PostMail用ソースサンプル

<form action="http://～～/postmail.cgi" method="post">
<table>
<tr>
    <td style="vertical-align: top;">件名：</td>
    <td>▼お選び下さい<br>
    <input type="radio" name="subject" value="ご意見・ご感想">ご意見・ご感想
    <input type="radio" name="subject" value="リンク切れ">リンク切れ
    <input type="radio" name="subject" value="その他" checked>その他
    </td>
</tr>
<tr>
    <td>内容：</td>
    <td>
    <textarea name="_メッセージ" rows="1" cols="40"></textarea>
    <input type="submit" value="送信"></td>
</tr>
</table>
</form>

以上をコピーしてHTML文書に張り付けます。
http://～～/postmail.cgi を、設置したPostMailのURLに変えてください。

件名指定ラジオボタンの補足

件名指定に使うラジオボタンのname属性値は全てsubjectにする
value属性値が件名になる
ラジオボタンの隣に説明を付ける
checkedは最初から選択した状態にする属性

checkedの補足

checkedはラジオボタンかチェックボックスのみに指定できる属性です。では各グループに一つだけ、には複数指定できます。

checkedがなく送信者が件名を選ばない場合、postmail.cgi の $subject で指定した件名で送られます。

部品サンプル


<input type="radio" name="subject" value="○○">○○
<input type="radio" name="subject" value="××">××
<!-- ↓一つだけ最初から選んだ状態にする用 -->
<input type="radio" name="subject" value="□□" checked>□□

おまけ（説明なし）

<input type="radio" name="subject" value="件名○○" id="subject1">
<label for="subject1">件名○○</label>

<input type="radio" name="subject" value="件名△△" id="subject2">
<label for="subject2">件名△△</label>

<input type="radio" name="subject" value="件名××" id="subject3">
<label for="subject3">件名××</label>

<input type="radio" name="subject" value="件名☆☆" id="subject4">
<label for="subject4">件名☆☆</label>

<input type="radio" name="subject" value="件名□□" id="subject5">
<label for="subject5">件名□□</label>

赤色の数字は半角です。どれか一つにcheckedを。checkedが分からなければpostmail.cgi の $subject に件名を指定しておいてください。

サンプル（説明なし）

<form action="http://～～/postmail.cgi" method="post">
<table>
<tr>
    <td style="vertical-align:top">件名：</td>
    <td>▼お選び下さい<br>
    <input type="radio" name="subject" value="メール：ご意見・ご感想" id="opinion">
    <label for="opinion">ご意見・ご感想</label>
    <input type="radio" name="subject" value="メール：リンク切れ" id="deadlink">
    <label for="deadlink">リンク切れ</label>
    <input type="radio" name="subject" value="メール：その他" id="other" checked> 
    <label for="other">その他</label>
    </td>
</tr>
<tr>
    <td>内容：</td>
    <td>
    <textarea name="_メッセージ" rows="1" cols="40" id="message"></textarea>
    <input type="submit" value="送信">
    </td>
    </tr>
</table>
</form>

サイズ変更

→

1行目：<form action="http://～～/postmail.cgi" method="post">
2行目：<p>
3行目：<textarea name="_メッセージ" rows="1" cols="25"></textarea>
4行目：<input type="submit" value="コメント送信">
5行目：</p>
6行目：</form>

この項目はサンプルAのソースを使って説明します。

テキストフィールドの幅を変える

3行目：<textarea name="_メッセージ" rows="たて幅" cols="よこ幅"></textarea>
   例：<textarea name="_メッセージ" rows="2" cols="10"></textarea>

3行目を入れ替えます。たて幅 よこ幅に半角数字を入れてください。

送信ボタンの名前を変えたい

4行目：<input type="submit" value="ここを変える">
   例：<input type="submit" value="コメント送信">

4行目を入れ替えます。ここを変えるに入力した文字が、送信ボタンの名前になります。

データの名前を変える

データの名前を変えると、確認画面とメールの項目名が変わります。

メッセージ = こんにちは！頑張ってください！
↓
内容 = こんにちは！頑張ってください！

これは3行目のname="_メッセージ"を入れ替えます。

3行目：<textarea name="_メッセージ" rows="1" cols="40"></textarea>
   例：<textarea name="_内容" rows="1" cols="40"></textarea>

PostMailで項目を入力必須にする場合、name属性値の先頭に_(半角アンダーバー)を付けます。

フォームを小さくすると、フォームだと分からず誤送信してしまう人が増えるため、メッセージは入力必須にした方が良いと思います。

その他、独自仕様はPostMailの解説ページで確認してください。

ページ先頭へ▲

ブックマークラグナロク通り

件名：	▼お選び下さいご意見・ご感想リンク切れその他
内容：

※送信テストはできません
Name	Comments