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

挿絵

KENT WEBさんのPOST-MAILで、一言メールフォーム(埋め込み型)を作ります。

留意事項

サンプルA

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

サンプル1の特徴

ソース

<!-- ここから -->
<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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

サンプル

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

サンプル1の特徴

ソース

<!-- ここから -->
<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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

サンプル2

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

サンプル2の特徴

ソース

<!-- ここから -->
<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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

maxlengthの補足

短く制限する場合は、「50文字まで入力できます」と注釈があると親切です。(最大文字数を設定しない場合は、maxlength="50" を削除する。maxlength属性は必須ではない)

※maxlengthはいくつかのブラウザでは、50文字の半分しか入力できないことがあります。(50が文字数ではなくバイト数で判断されるため。全角1文字は2バイトなので、25文字で50バイトになる)

maxlengthは、<input type="text">か<input type="password">のみに指定できる属性です。複数行のテキスト入力欄<textarea>〜</textarea>には指定しません。(HTML5は指定できる。)

POST-MAILの文字数制限は?

POST-MAILの設定ファイルinit.cgiで、最大受信サイズを設定できます。 入力欄一つ一つの文字数ではありませんので、数値を低くしすぎると、メールが届かなくなります。

※POST-MAIL Ver: 6.73では、postmail.cgiの# 入力フィールドあたりの最大容量(バイト)が廃止され、init.cgi内 # 最大受信サイズ(Byte)で、全体の受付データサイズを制限するようです。

サンプル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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

サンプル3

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

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

ソース

<form action="http://〜〜/postmail.cgi" method="post">
<p>
<label for="name1">名前</label>
<input type="text" name="name" size="10" id="name1">
<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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

name="name" と指定したのに、"お名前="でメールが届く

PostMailの設定ファイルinit.cgiに# フォームのname値の置き換えをする場合という項目があります。初期設定ではnameがお名前で届くようになっています。

サンプル4

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

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

ソース

<!-- ここから -->
<form action="http://〜〜/postmail.cgi" method="post">
<table>
<tr>
    <td><label for="name1">Name</label></td>
    <td><label for="message">Comments</label></td>
</tr>
<tr>
    <td><input type="text" name="name" size="10" id="name1"></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の機能です。(※チェックボックスとラジオボックスは設定方法が異なる)

name="name" と指定したのに、"お名前="でメールが届く

PostMailの設定ファイルinit.cgiに# フォームのname値の置き換えをする場合という項目があります。初期設定ではnameがお名前で届くようになっています。

サイズ変更

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行目を入れ替えます。たて幅 よこ幅に半角数字を入れてください。

注意:一行の場合

複数行だと、cols="よこ幅"ですが、一行の場合、size="よこ幅"になります。<input type="text">にcols属性はありませんので注意してください。

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

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

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

確認ボタンの名前いろいろ

Ver: 6.73では確認画面がでるようです。postmail.cgiから「# 送信前確認」欄がなくなりました。

一言メールフォーム

確認ボタンの名称いろいろ

データの名前を変える

※PostMailの設定ファイルinit.cgiに# フォームのname値の置き換えをする場合という項目があります。

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

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

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

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

PostMailで項目を入力必須にする場合、name属性値の先頭に_(半角アンダーバー)を付けます。ラジオボタンやチェックボックスなど全ての必須項目は、needとvalue値で指定できますので、詳しくはPostMailの解説ページへ。

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

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

入力欄に文字を表示する

一行と複数行では、やり方が違います。

複数行の場合は、3行目を変えます。ここに入力するに入力した文字が、初期値になります。

3行目:<textarea name="_メッセージ" rows="1" cols="40"></textarea>
   例:<textarea name="_メッセージ" rows="1" cols="40">ここに入力する</textarea>

一行の場合は、<input type="text" name="_メッセージ" size="60" value="ここに入力する">というように、value属性で指定します。※value属性は要素によって役割が変わります。

XHTML 1.0

postmailのテンプレがXHTML対応に変わっているので、一応掲載します。

補足とエラー

項目「メール件名をタグで指定する」は削除中です。(PostMail仕様変更により、メール件名方法が変わったため)以前の件名指定のサンプル