宵闇書房　Twilight bookstore

2005/03/03 Thursday 23:52

sbにメールフォームを設置する※追記あり

※追記があります（2005/03/04/19:55）。

bk1から本が届いてホクホクのトルキーです、こんばんは。さてさて、ちょっとメールでご要望をいただいたので、メールフォームの設置の仕方を書いてみます。
以前、apeboard+とiframeを利用した方法については書きましたが、今度は直接テンプレートなどに記述できる方法です（apeboard+でも送信フォームだけは直接記述できますが…）。
当然ながらsendmailの使えるサーバでなければ設置できませんのでご注意のほど。
ちなみにこのスクリプトを使うときのメリットとデメリットはこんな感じです。

メリット

• iframeを使わなくてすむ
• いくつでもフォームを設置できる
• 送信完了画面とエラー画面が自分で設定できる
• 必須項目を設定できる
• 項目をいくつでも増やすことができる

3番目はおまけなんかに使えるかもです。

デメリット

• メールアドレスを認識しない

ええと、メールに返信を書く際、メーラーの返信ボタンを押してもメールを返すことはできないません。コピー＆ペーストが必要です。…一番肝心なところに少々難があります（汗）。

cgiの改造で対応することができました。手順については一番最後に書いてあります。

では、設置方法は「続きを読む」からどうぞ（長いです）。

続きはここから

1）kemu.netさまよりCGIスクリプトをお借りする

SCRIPTページにある「FORM MAIL (PERL)」のSHIFT-JISをお借りしましょう。 その際、利用規約を確認するのを忘れずに。

2）送信完了ページをつくる

送信完了ページはプロフィール画面を利用してつくります。
sbの管理画面より「ユーザー管理」を選択し、新しいユーザーを作成します。ユーザー名とパスワードはお好きなものに、フルネームは送信した後に表示されるタイトルを書きます（「メールありがとうございました」など）。
ユーザー説明には送信後のメッセージを書きましょう。
できましたら、表示設定を「ユーザーリストには表示しない」にして「>更新する<」をクリックします。

ちなみにこのブログではこんな感じ。

3）エラー画面をつくる

エラー画面は必須項目を全て記入していない場合などに表示されます。
2.と同じ手順でフルネームにはエラー表示時のタイトルを、メッセージにはエラー内容などを書いてください。
まぁ、以下の画像のような内容でよいでしょう。

メッセージを書いたら、最後に

<a href="javascript:history.back()">←前のページに戻る</a>


このように前の画面へと戻るリンクを書き加えます。

4）ダウンロードしたファイルを解凍、fmail.cgiを書き換える

書き換える部分は以下の通り。

• 1行目　#!/usr/local/bin/perl
  　　⇒!/usr/local/bin/perlをお使いのサーバのperlのパスに
  
• 11行目　$sendmail = '/usr/sbin/sendmail';
  　　⇒/usr/sbin/sendmailをお使いのサーバのsendmailのパスに
  
• 14行目　$my_mail = 'mail@address';
  　　⇒mail@addressをご自身のメールアドレスに
  
• 15行目　$m_subject = 'FROM SITE';
  　　⇒FROM SITEを受信時のタイトルに
  

さらに、送信完了画面とエラー画面の設定もしますが、このときに先ほどユーザー管理でつくった画面が必要になります。 トップページに表示しない設定にしていますが、以下の方法でアドレスを知ることができます。
sbの「ユーザー管理」を開き、送信画面用編集用のリンクにマウスを乗せます。
このとき、ステータスバーに

http://〜/admin.cgi?mode=profile&pid=数字

と表示されますので、最後の数字の部分だけを覚え、以下のように記述します。

• 16行目　$no_must = './fmail3.html';
  　　⇒./fmail3.htmlをhttp://〜/sb?pid=数字に（〜はご自身のブログのアドレス）
  

エラー画面も同様です。

• 17行目　$send_mail = './fmail2.html';
  　　⇒./fmail2.htmlをhttp://〜/sb?pid=数字に（〜はご自身のブログのアドレス）
  

5）アップロードする

FTPソフトを使い、アップロードします。
適当なフォルダをつくり、ダウンロードしたファイルの中から

• fmail.cgi
• jcode.pl

の二つのみアスキーモードでアップロードします。
パーミッションの設定が必要ですので、お使いのサーバにて指定されているパーミッションに変えてください。
※fmail1.html、fmail2.html、fmail3.htmlは使いません。

6）フォームをつくる

<form method="post" action="http://〜/fmail.cgi">
<div style="text-align:right;">
<label for="name">name</label>
<input type="text" name="name"
style="width:150px;" class="form" id="name" /><br />
<label for="mail">email</label>
<input type="text" name="mail" style="width:150px;" class="form" id="mail" /><br />
<label for="url">url</label>
<input type="text" name="url" style="width:150px;" class="form" id="url" /><br />
<label for="comments">comments</label><br />
<textarea name="comments" rows="7"
cols="20" class="form" id="comments"
style="width:170px;"></textarea><br />
<input type="submit" value="Submit!"
class="button" />
</div>
</form>

ソースは基本的にはこんな感じです。名前、メールアドレス、サイトのアドレス、コメントの4つが記述できます。
テンプレートに直接記述することもできますし、送信完了画面などと同様にユーザー管理から新しくユーザーを設定し、そちらにつくることもできます。

• 〜は5.でアップロードしたfmail.cgiのアドレスを書いてください。
• width（横幅）やrows（行数）なんかはそれぞれのテンプレートなどに合わせてご自由に変えてください。クラス名には"form"を設定していますので、当ブログのテンプレートを設置している方はコメント部分と同じスタイルが反映されます。他のテンプレートをお使いの方は別途CSSの記述が必要です。
• これ以上項目を増やすことやラジオボタンなんかも可能です（詳しくはHTMLのリファレンスサイトなどでお調べください）。
• name="mail"をname="Xmail"…などと、Xをnameの中につけると必須項目となります。また、nameには日本語を設定しないでください（文字化けします）

7）送信テストをする

さて、ここまでできましたら送信テストをしてみましょう。3.と4.で設定した送信完了画面が表示され、お使いのメールアドレスにメールが届きましたら成功です。
もしもうまくいかないようでしたら、

• perlのパスは間違っていないか
• sendmailのパスは間違っていないか
• パーミッションは間違っていないか
• フォームに記述したアドレスは間違っていないか

ここら辺を中心にご確認ください。

エラー画面がきちんと設定されているかどうかは、必須項目を設定している場合、何も記述せずにフォームのボタンをクリックしてみることで確認できます。
両方とも確認できましたらこれにて終了です。

ご苦労様でした！

追記：メールアドレスを認識させる方法について

ちょっと調べてやってみましたら意外と簡単でしたので載せておきます。
fmail.cgiを改造することになります。
以下の方法でどうぞ。

38行目（open(MAIL, "|$sendmail -oi -t") or die "Location: $no_must\n\n";）と39行目（print MAIL $message;）の間に以下の一行を付け加える

print MAIL "From: $query{mail}\n";


53行目（$value =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C", hex($1))/eg;）と54行目（jcode::convert(\$in{value},'euc');）の間に以下の一行を付け加える

$query{$key} = $value;


\は半角の￥なのですが、どうも上手く表示できませんね。実態参照しているんですが…。
コピー＆ペーストした際にはきちんと表示されますので、大丈夫だとは思いますが、一応お気お付けくださいませ。

フォームをつくる際、メールアドレス入力部分はname="mail"と指定してください。その項目はメールアドレスと認識されます（6.のソースは大丈夫です）。

• ブログカスタマイズ > その他
• comments (23)
• trackbacks (4)

comments

みなみ | 2005/03/04 Friday 03:32

こんにちは。えと、返信ボタンが使えないということは、もらったメールにお返事するときは、いちいち相手のメルアドをコピペして新しくメールを作成しなければいけないのでしょうか？

トルキー | 2005/03/04 Friday 21:01

＞みなみさま
こんにちは。
そうなんです…が、ちょっとだけcgiを改造したら、この件クリアできました。Outlook Express6.0にて確認済みです。
エントリーに追記しましたので、参考にしていただければ幸いです！

ユウ | 2005/03/14 Monday 06:26

はじめまして。kemu.netの管理人をしているユウと申します。
改良しなければと思っていたところを改良していただけたみたいで…有難うございます。
返信の件ですが（相手がメールアドレスを書いていたら）それを送信元にするということは、トルキー様の書いておられる方法で間違えないと思います。ただ、メールアドレスを書いていない場合に代替のメールアドレスを設定する必要がありますが。ちょっと改良も考えてみます。

トルキー | 2005/03/14 Monday 21:51

＞ユウさま
あわわ、はじめまして、こんにちは。
スクリプトのほうお借りいたしましたのにご挨拶もいたしませんで…。
デザイン優先で著作権表示をしなくともよい、というとても太っ腹なスクリプトはないだろうな…と思っておりましたので、見つけましたときには思わず目を疑ってしまいました（笑）。本当にありがとうございます！
素人の浅知恵での改造でしたので不安な点がありましたが、ユウさまのお言葉でほっといたしました。
改良のほう、のんびりゆっくりお待ちしております。

マリン | 2005/03/15 Tuesday 21:09

トルキーさん　はじめまして。
今までのＨＴＭＬで作成してきたサイトから
ブログへ移行ちぅのブログ初心者です。

上記メールフォーム設置説明･･･超初心者の私には
ほんとうにわかりやすくて
スラスラ・・・あっいや・・・５.アップロードする
まで出来ました~(=^‥^A
ここで教えていただきたいのですが･･･

１.テンプレートに直接記述する
利用中のテンプレート編集でベースHTMLテンプレに
表示させたい場所にフォームを埋め込むんですよね？

２.送信完了画面などと同様にユーザー管理から新しくユーザーを設定し、そちらにつくる
新しくつくったユーザーの編集からユーザー説明にフォームを書き込めばいいのでしょうか？

（↑（１.）（２.）どちらにしようかまだ決めていないもので＾＾；）

トルキー | 2005/03/15 Tuesday 21:39

＞マリンさま
初めまして、こんにちは。
私なんぞ設置方法を書いているだけです（笑）。もうkemu.netさまのスクリプトがなければこのエントリーもなかったわけで、その点ユウさまには大感謝です。

ええと、１．はその通りです。私はこっちを使ってサイドに埋め込んでいます。常に見えるところにありますので、気軽に書き込んでもらうにはいいかもしれません。

２．もその通りです。ちょっと今思ったのですが、新しく作らずそのままご自身のプロフィールに一緒に置いてしまってもいいかもですね。
このとき、上のソースを使う場合は「自動改行しない」にチェックするときれいに表示されます。テキストエリアなどをある程度大きくできますので、長文を書き込んでもらう場合などにお勧めでしょうか…？

どちらを重要視するかによっても違うと思いますので、お使いやすいほうでどうぞ。

マリン | 2005/03/18 Friday 08:41

おはようございます。早朝から失礼します（汗
設置完了して送信テストしたのですが
Forbidden
You don't have permission to access /ms_blog/mailcgiを置いてあるフォルダ名/fmail.cgi on this server.
って出るんです(;つД｀)
・perlのパスはPerl文法チェッカーで確認→OK
・sendmailのパス→OK　（他にメールフォーム設置してるので）
・パーミッションはとっかえひっかえやってはおるのですがどうにもダメなもので
今、レンタルサーバーへ聞いておりますが返事がまだ来ない(TωT)
こちらでお聞きする事ではないと思うのですが
（？）と思うようなことありましたらアドバイスお願いしたいのですが＜(＿ ＿)＞。

マリン | 2005/03/18 Friday 15:00

↑
すいません。iframeで呼び出しすることにしました
お騒がせしてすいませんでした＜(＿　＿)＞。

トルキー | 2005/03/18 Friday 23:54

＞マリンさま
返信、遅くなりました。あわ、お役に立てず…。
パーミッションの問題ぽかったですね、エラー内容だけ見てみますと。やはりわかりにくいサーバってありますね。私のところは700と600の二つしか出てくることがないのでたいそう楽ちんなのですが。
うーん、難しいです…。

ユウ | 2005/05/19 Thursday 05:51

遅くなりましたが、トルキー様のものをコピペして修正し、アップロード致しました。
本来は自分で考えて書かないと駄目なのですが…へっぽこプログラマなので（本職は違いますが）。

時間がとれましたら、より良いものを開発していきたいので「ここ使いにくい」という部分がございましたら、ご指摘ください。

今回の件につきましては、本当に有難うございました。

トルキー | 2005/05/21 Saturday 00:55

＞ユウさま
わぁ、ありがとうございます！
パソコン故障によりメーラで受信することができないため、フォームは一時非表示にしてあるのですが、もうすぐ戻ってくることが分かりましたので、その際にはまた活用させていただきたいと思います。
こちらこそ本当にありがとうございました！

じみ | 2005/11/08 Tuesday 01:23

手順通りにやったのですが、受け取るメールが文字化けしてしまいます。serena bach だと何か変更しないといけないのでしょうか？

トルキー | 2005/11/08 Tuesday 22:53

＞じみさま
こんにちは。
文字化けとのことですが、とりあえずメーラーのエンコードを変えるとどうなるでしょうか？
（Outlook Expressの場合はメールを選択した上で、表示→エンコードで日本語に）

cgi自体は開発者のユウさんがアップデートしてくださったため追記の部分は必要ないです。一応ご注意下さいませ。

moonlit | 2006/05/14 Sunday 13:19

トルキーさんお久しぶりです。
fmail.cgi設置完了したものの送信完了していてもエラーページが表示されてしまうのです。
16行目　$no_must =エラーページ
17行目　$send_mail =送信完了ページ
で良かったですか？（kemu.netさまのサンプル参考）逆もやってみたのですが…
アドバイスをいただければと思いまして、宜しくお願いします。

トルキー | 2006/05/15 Monday 23:25

＞moonlitさま
お久しぶりです、こんにちは。

＞16行目　$no_must =エラーページ
＞17行目　$send_mail =送信完了ページ
…で合ってます（ファイルを開いて確かめました）。上にエントリを書いた当時と違い、現在では改造しなくとも大丈夫なはずです。
で、肝心の何処が間違っているのかはよくわからないのですが…。うーん…。

moonlit | 2006/05/16 Tuesday 23:27

トルキーさん、おばんです。
今一度確認して見ましたら
ちゃんと表示されてました。なんでだろか…。
またまた、お騒がせしてしまいました。すみません。でも、相変わらず素敵なテンプレートですね！「シンプルだけどインパクトがある」これからも頑張ってくださいね。

トルキー | 2006/05/18 Thursday 00:23

＞moonlitさま
Oh…不思議ですね。ブラウザのキャッシュなんかが残っていたのかな、と思いました。
テンプレートは実は現在作成中のが1つあります。もうすぐ出せるかなぁ…というところですが、あともうちょっとかかりそうです。そして、またシンプル系です（笑）。

つばき | 2006/07/06 Thursday 15:43

こんにちわ、初めまして。
トルキーさんの素材やテンプレのまとめ、情報にはいつもお世話になっています。

今私は「Serene Bach 2.04R」を利用しているのですが、sb用のせいかこの設置方法ではうまく稼動しませんでした。
もし余裕がありましたら、Serene Bach版メールフォーム設置方法をご教授頂ければ幸いです。
どうか宜しくお願い致します。

トルキー | 2006/07/07 Friday 23:54

＞つばきさま
うーん何故でしょう…。
本日、メールアドレス変更のため、このcgiを再び弄ったのですが、特に問題なく動いております。
エントリを書いたのはsbの時でしたが、Serene Bachでも手順は全く同じはずです。
「うまく稼働しない」がどのような状況かわからないので、詳細がつかめませんが、まずはパーミッションやパスなどは大丈夫でしょうか？

つばき | 2006/07/10 Monday 14:04

＞トルキーさま
必須事項の「X」の記述がうまくできていなかっただけでした。
うっかりミスでお手を煩わせて申し訳ございませんでした；

トルキー | 2006/07/11 Tuesday 23:39

＞つばきさま
いえいえ、うまく行きましたようで何よりです。
また何かありましたら遠慮なくどぞ＾＾

ゆい | 2006/10/05 Thursday 14:40

参考にさせて頂いて設置してみました
Serene Bach本体がUTF-8版なのが文字化けの原因のようです。
trackbackにあった
Thorn - Exdeathique Record | Serene Bach UTF-8版にメールフォームを設置する
というエントリーを参考にさせていただいたら文字化けしないで受信できました

トルキー | 2006/10/08 Sunday 23:02

＞ゆいさま
文字化け、私はcgi自体をブログのエンコードに合わせて返還していたので気付きませんでした…。
情報どもです！

comment form

name

email

url

comments

submit

cookie?

trackback url

トラックバックは承認制です。言及リンクがない場合には公開致しませんのでご了承下さい。

http://twilightbookstore.org/blog.cgi/100

trackback

メールフォームつけてみた

しょんぼり技研 | 2005/09/29 Thursday 22:08

え〜、昨日も一昨日も飲み会で、地下鉄の終電で帰りました。なんかもう、よれよれなので今日はマジで早く寝たい。

メールフォームはじめました

day tripper | 2005/10/11 Tuesday 04:47

冷し中華は終わりですが。…て、そんなくだらない冗談は置いといて、インフォメーションのページにメールフォームを設置しました。前々からやろうと思っていて延ばし延ばしになっていたのですが…。コメント欄に出る...

Serene Bach UTF-8版にメールフォームを設置する

Thorn - Exdeathique Record | 2006/01/26 Thursday 01:10

<a href="http://quarter.vis.ne.jp/books/log/eid100.html" title="sbにメールフォームを設置する@宵闇書房">sbにメールフォームを設置する@宵闇書房</a>を参考にして、UTF-8版SBにメールフォームを設置。要スクリプト改造。

お世話になりましたサイト様。

:: go with the light :: | 2007/11/17 Saturday 17:28

☆プラグインをお借りしたサイト様。・sb開発研究所様http://serenebach.net/「記事評価プラグイン ver 0.03」・[あ]UnderDone（あんでるどん）様http://underdon...