無料お問い合わせフォームCGIなら「Post Mail」がおすすめ

無料のお問い合わせフォームCGIなら「Post Mail」がおすすめです。

設置が簡単でオーソドックスな構成です、必要な設定はinitファイルにまとめられています。

エラー画面・内容確認画面・完了画面、メール文面、控えメール文面すべてカスタマイズできます。

無料お問い合わせフォームのおすすめ

WEBで利用できる無料のお問い合わせフォームにもいろいろなものがあります。

Wordpressを使っているなら「Contact Form 7」や「MW WP Form」などが主流ではないでしょうか。

こういったプラグインは大変便利ですが、常にセキュリティ面に注意を配る必要があります。

Wordpress自体が狙われやすいシステムですから、ここは致し方ありません。

お問い合わせフォームCGI「Post Mail」

プラグインを使わずにお問い合わせフォームを準備するなら「Post Mail」CGIがおすすめです。

Post Mailとは、Kent-web様のフリーソフトWEBサイトで公開されているお問い合わせフォームCGIです。

Kent-web様サイトにはお問い合わせフォーム以外に様々なCGIプログラムが公開されています。

Kent-web様サイトはこちら

今回はこの「Post Mail」CGIの設置の仕方や利用方法をご紹介します。

「Post Mail」CGIの設置準備

下記ページから「postmail.zipファイル」をダウンロードしましょう（UTF-8版です）。

ダウンロードはこちらから

zipファイルを解凍すると、以下の様な構成になっています。

設定ファイルの操作

ファイル構成の中で最初に扱うのが「init.cgi」ファイルです。

init.cgiをテキストエディタなどで開きましょう。

ファイルの上部にはライセンスや使い方の説明がコメント記載されています。

その下が設定欄ですのでメールアドレスやテキストを入れたり、選択欄では「0」や「1」を選びます。

主に設定する（確認する）箇所

送信先メールアドレス

お問い合わせメールを受信するメールアドレスを入れましょう。

複数のメールで受信したい場合は、'アドレス','アドレス'とカンマで区切って設定できます。

sendmailのパス

初期は'/usr/lib/sendmail'となっていますが、サーバー仕様によってはlibのところをsbinに変更する場合があります。

送信者へのメール送信

初期では「1」になっており、フォームを送信したユーザーにも控えメールが届く様になっています。

控えメールは基本送るべきですので「1」のままにしておきましょう。

メールの件名・返信向けタイトル

自分に届くメールの件名、そして相手がもらう控えメールの件名を指定できます。

返信後の形態・戻り先

初期値は「0」で、送信が完了した後に「完了メッセージ」を出します。

「1」だと自動で戻り先にジャンプしますが、完了メッセージを出すのは必須なので「0」のままにしておきましょう。

完了メッセージ表示の語の戻り先としてはTOPページなどを指定できます。

アップロード・動作チェック

postmailフォルダ一式をFTPソフトなどでサーバーの任意のディレクトリにUPします。

今回紹介する方法では構成ファイル内にあるpostmail.htmlは使いません。

ひな型として作られたHTMLファイルなので、記述タグの確認としては使えますがアップロードはしなくても良いです。

index.htmlが無いので注意

このpostmailフォルダの中にはindex.htmlがありません。

ですので空のindex.htmlを設置するか、.htaccessなどでアクセス制限を掛けるなどが必要になります。

ファイルおよび構成が表示されない様な工夫をしましょう。

パーミッションの設定は2つ

CGIファイルはアップした後にパーミッションを変更する必要があります。

Post Mailでパーミッションを変更するのは下の2つです。

CGIパーミッション変更画面

それぞれを「755」か「705」へ変更しましょう。これをしないと次のcheck.cgiが動きません。

動作確認

パーミッションまで変更したら、postmail/check.cgiが表示できるURLを直接アドレスバーに打ち込みましょう。

WEBサイトを表示させて、アップした通りの構成でpostmail/check.cgiを付け加える形です。

上の様な画面が出ますので、全ての項目がOKになっている事を確認しましょう。

これで設置準備は完了です。

お問い合わせフォームの書き方

次にお問い合わせフォームページの書き方をご紹介します。

formタグの書き方

まずはformタグで囲む事になりますね。

<form method="post" action="../postmail/postmail.cgi"> …入力ボックスが入ります </form>

まずmethod欄は「POST」にします。「GET」ではありません。

action欄はフォームページのある位置から、postmail/postmail.cgiのパスを記しています。

ここは絶対パス・相対パスいずれでも構いません。

各入力フィールドについて

代表的な入力フィールドを紹介していきます。

入力ボックス

<input type="text" name="お名前" value="">

メールアドレス

<input type="text" name="email" value="">

ラジオボタン

<input type="radio" name="項目" value="内容1">内容1 <input type="radio" name="項目" value="内容2">内容2 <input type="radio" name="項目" value="内容3">内容3

チェックボックス

<input type="checkbox" name="チェック項目" value="チェック内容1">チェック内容1 <input type="checkbox" name="チェック項目" value="チェック内容2">チェック内容2 <input type="checkbox" name="チェック項目" value="チェック内容3">チェック内容3

選択ボックス

<select name="選択項目"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select>

テキストエリア

<textarea rows="6" cols="10" name="お問い合わせ内容"></textarea>

送信ボタン

<input type="submit" value="内容確認">

一通り紹介しましたが、いずれも一般的なHTMLのフォームと変わりません。

あとは設置するWEBサイトの環境によって適宜変更してください。

見出しと内容

各タグのname欄に記載された文字が「見出し」として格納・出力されます。

各タグのvalueの欄に入力した文字が代入されて「内容」として格納・出力されてきます。

例）<input type="radio" name="色" value="赤">赤

これを選択した場合、色：赤という形で格納表示され、メールに記載されます。

※name値には全角文字が使えます。

name値にemailでメールアドレス判定

name値に「email」と入れると、入力文字をメールアドレスと判定します。

例）<input type="text" name="email" value="">

これによりメールアドレスの書式としてあっているかが簡易チェックされます。

例えばabc@xxx.co.jp は通りますが、abc.xxx.co.jp だと入力エラーになります。

name値をnameで「送信者名<メールアドレス>」へ

name値を「name」とした場合、そこに入力された文字を「送信者名」として判断します。

この場合フォームに入力されたメールアドレスと合わせて「送信者 <メールアドレス>」というフォーマットに自動変換します。

例）<input type="text" name="name" value="">ここに「えるぺぐ」と入れた場合 <input type="text" name="email" value="">ここにメールアドレスを入力

「えるぺぐ <abc@xxx.co.jp>」と自動変換し、送信元メールアドレスとして表示します。

送られてくるメールの送信元アドレスに上記の様に記載されてくる訳ですね。

必須入力について

name値の先頭に「_」（アンダーバー）を付けると、その項目は入力必須となり、入力されないとエラーになります。

例）会社名：<input type="text" name="_会社名" value="">

上記の例では会社名は入力必須となります。

必須項目の一括指定

上記の様にアンダーバーを付けても良いのですが、必須の項目を一括設定する事もできます。

name値を「need」として、value値に「必須項目1」半角スペース「必須項目2」半角スペース…と並べます。

例）<input type="hidden" name="need" value="名前 メールアドレス 性別">

このタグはtypeがhiddenなので表に見えません、formタグ内のどこかに入れておけば機能します。

中に入っている項目の中で未入力のものがあるとエラーが出ます。

半角スペースで複数指定ができますし、ラジオ・チェックボックス対策になります。

2つの入力内容が同一かチェック

もう一つ代表的な縛りがメールアドレスの記述チェックです。

name値を「match」とし、value値を「項目1」半角スペース「項目2」とします。

例）<input type="hidden" name="match" value="email email2">

このタグもtypeがhiddenなので表に見えません、formタグ内のどこかに入れておくと機能します。

これによりemailとemail2が全く同じ内容でないとエラーが出ますので、メールアドレスの間違いを防ぐ事ができます。

CGIプログラムの流れ

フォームへの入力

上の様にお問い合わせページに入力フォームが表示されます（上記ページはカスタマイズされています）。

ユーザーは必要事項の入力が済んだら、内容確認ボタンを押します。

入力内容確認（エラー時）

まずは入力内容の確認がおこなわれます。

記入漏れや間違いがある場合は上の様なエラーページがでます（上記エラーページはカスタマイズなしの初期状態です）。

その場合は「全画面に戻る」を押して修正をする事になります。

入力内容確認（正常時）

入力内容に問題が無ければ上の様な画面が表示されます（上記ページはカスタマイズなしの初期状態です）。

送信するボタンが表示されますので、「送信する」を押します。

メールが送信されると送信完了画面が表示されます。その後はTOPページを案内するなどできます。

送信後はメールが管理者に届き、送信したユーザーにも控えメールが届きます。

送信データの履歴はdataファイルのlog.cgiやses.cgiに出ますので、メールが届いたら都度確認しましょう。

テンプレートについて

postmailフォルダ内のtmplファルダ内には、各種テンプレートファイルが入っています。

テンプレートファイル一覧

ファイルは通常のHTMLや.txtなので、CGIから出力される箇所以外は自由にカスタマイズできます。

3つのhtmlファイルはソースを直接書き換える事ができますので、違和感がない様にWEBサイトと同じデザインにすると良いですね。

メールの文面txtは必要最低限の内容なので、ご挨拶や屋号・連絡先などまできちんと明記しておきましょう。

CGIから出力されるコード

<!-- cell_begin --> <tr> <th class="o">!key!</th> <td class="o_td">!val!</td> </tr> <!-- cell_end --> <form action="!mail_cgi!" method="post"> <!-- hidden --> <input type="button" value="< 前に戻る" onclick="history.back()" class="button" />    <input type="submit" value="送信する >" class="button"> </form>

上記の出力箇所さえ残せば、後のカスタマイズは自由です。

テンプレートファイルのリンクパスについて

このCGIはpostmail/postmail.cgiを軸に動くプログラムです。

内容確認ページやエラーページ・完了画面のどのページでも、表示URLはpostmail/postmail.cgiのまま変わりません。

しかし実際のテンプレートファイルはpostmail/tmpl/…と、一段下に入っています。

そのため、postmail/tmpl/からのリンクパスを考えがちですがその必要はありません。

テンプレートがpostmail.cgiの位置にあるつもりでパスを書く

例えば、https://lpeg.info/postmail/postmail.cgi がCGIのアドレスになるとしましょう。

それに対しテンプレート3種（conf.html、err.html、thanks.html）のファイル位置は以下の様に2つ下の階層です。

例：conf.htmlファイルの位置

https://lpeg.info/postmail/tmpl/conf.html

しかし実際にこのテンプレートは、常にpostmail/postmail.cgiのURLで表示される訳です。

ですのでtmplの中に入っている事は無視して、postmail.cgiと同じ位置のつもりでパスを書きましょう。

いくつかの注意事項

著作権について

このCGIはKent-web様のフリーソフトで、著作権を放棄されている訳ではありません。

ですので利用者はプログラムの著作権表示を削除する事はできません。

詳細はフリーソフト利用規定をご覧下さい。

URLについて

先述しましたが表示URLの末尾はpostmail.cgiのままで、送信完了画面までずっと変わりません。

エラーが出ている時もpostmail.cgiのままです。

完了画面専用のURLが存在しないので、トラッキングコードを入れる時は注意が必要です。

入力内容確認画面のボタンに設置されたタグ例

<input type="submit" value="送信する >" onClick="ga('send', 'event', 'form', 'click', 'postmail');" class="button" />

このようにクリック時イベントを発生させて、送信完了画面が表示されたことをアナリティクスに記録させるなどの工夫が必要です。

メールについて

管理者に届くメールは、ユーザーが入力したメールアドレスから送信されます。

逆にユーザーに届く控えメールは、管理者の受信メールアドレスから送信されます。

自身の持つメールアドレスでお互いに送りあう形になる訳ですね。

ですので「送信元メールアドレス」というのは固定されておらず、毎回ユーザーの入力したメールアドレスを使う事になります。

控えメールが届かない

たまに控えメールが届かない事があります。

これはフォームのメールアドレス入力欄のname値が「email」ではなく、「メールアドレス」などの日本語にしている場合に起こりやすいです。

見出しの名前をきちんとしたいがための措置と思いますが、ユーザーに控えメールが届かないのは問題です。

ここはきちんとname="email"としておきましょう。

一押し人気コーナー紹介