メールフォームプロ 4.x系の設置方法について

1 メールフォームプロとは
2 ゴール
3 メールフォームプロ設置の準備
4 レンタルサーバーについて
5 メールフォームプロの設置
6 フォームの設定をしましょう
7 うまく設置できた場合
- 7.1 動作確認後にアドオン・モジュールをOFFにしましょう
- 7.2 最低限動かすための設定

メールフォームプロとは

ユーザビリティに優れたフォームを、簡単に設置できるフォームのソフトです。
お問い合わせフォームはもちろん、資料請求フォームやアンケートフォームとしても使えます。

サンプルが公式サイトにあるので、チェックしてみてください。
http://www.synck.com/contents/download/cgi-perl/demo/mailformpro/index.html

すごく高機能ですよね。郵便番号を入力したら、住所が自動入力されたりと至れりつくせりのフォームだと思います。
この記事では、基本的なHTMLとCSSの知識がある方を対象に具体的な設置方法をご紹介させていただきます。

ゴール

非常に高機能なので、使いこなすにはマニュアルの熟読とテストが必要です。
今回は、目的を絞って下記の機能を実現するフォームをサンプルを利用して勉強していきたいと思います。

簡単なお問い合わせフォームの設置
- 名前、住所、電話番号、メールアドレス、備考
- 高度な設定はまた機会があれば
ユーザーが問い合わせすると
- (ユーザーへ)お礼メール(お問い合わせ内容の控え)が届く
- (設置者へ)問い合わせ内容が届く

メールフォームプロ設置の準備

CGI(perl)とSendmailが使えるWEBサーバーを用意(後述に詳しく)
UTF-8N（BOM無し）・改行コードLFが扱えるテキストエディタ
公式マニュアルに明記されていますがOS標準の「メモ帳」や「テキストエディット」などのソフトでCGIファイルを扱うことはNGです。
下記のソフトをダウンロードして使用するようにしましょう。
- Windowsの場合はTeraPad
  http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
- MacOSの場合はミミカキエディット
  http://www.mimikaki.net/
参考までにwindows環境の「Sublime Text 3」「Brackets」で試してみましたが、問題なく動くようです。
しかしながら、公式のおすすめを利用するのが安心だと思います。HTMLやCSSの編集は、普段使っているソフトで問題ありません。
FTPクライアント
こちらも普段しようしているFTPソフトを利用すればOKです。
- Windowsの場合はFFFTPなど
- Macの場合はFilezillaなど

レンタルサーバーについて

メールフォームプロを利用するには、CGI(Perl)とsendmailという機能が利用できるサーバーが必要です。

初心者におすすめのレンタルサーバーは、ロリポップです。
やめておいた方がいいのは「お名前.comレンタルサーバー」です。非常に使いずらかったです。

レンタルサーバーのアカウントを持ってないという方は、勉強を兼ねてアカウントの取得をおすすめします。

とりあえず練習という方は広告が入るけど無料のサーバー
XREA.com(GMOデジロック)
※広告なしで、CGI・sendmailが使えるサーバーを探しましたがいいのが見当たりませんでした。ご存知の方いらっしゃいましたら、ぜひ教えてください。
商用OKで初心者が使いやすいおすすめサーバー
ロリポップ(GMOペパボ)、月額108円～、初期費用810円(半額キャンペーン時)
※私もロリポップを利用しています。ブログシステム(WordPress)を使う場合は、ロリポプラン(月額270円のやつ)がいいです。
使ったことはないが有名なレンタルサーバー
さくらインターネット、月額129円～、初期費用1,029円

目的と予算によってレンタルサーバーを選ぶとよいと思います。
ほかに、おすすめなどご存知の方は共有してください。

メールフォームプロの設置

メールフォームプロのダウンロード

作者(シンクグラフィカ様)のサイトでダウンロードできます。

ダウンロードしたzipファイルを解凍します。

Windows(FFFTP)ユーザーはソフトの設定をしましょう

パーミッションの設定を先に済ませましょう。そうすることで、アップロード作業が楽になります。

CGIをアップロードする場所について

先ほど紹介した、ロリポップなどのサーバーではCGIは任意の場所で動きます。
このようなサーバーでは「cgi-bin」フォルダ内への設置は不要ですが、動かないサーバーは下記の指示に従います。

動的ファイル群はCGIをcgi-binフォルダ内に設置しなければならないサーバではcgi-binフォルダにアップします。

出典： Mailform Pro Reference

アップロードするフォルダについて

ローカル側は、解凍したフォルダ「mailformpro4.x.x」を開きます。
サーバー側ですが、今回はhttp://example.com/contact/にフォームを設置したいので、サーバーに「contact」フォルダを作成し必要ファイルをアップします。
公開フォルダが「public_html」のサーバーはそのフォルダの中に「contact」フォルダを作成します。

.pdfファイルはマニュアルなのでアップロードする必要はありません。
それ以外のファイルをサーバーにアップロードします。

パーミッションの設定

Windowsユーザーは、とりあえずこれで動きます。

Macユーザーは、「cgiファイル」のパーミッションを「755」に変更します。
FileZillaをご利用の方は一括でパーミッション設定をする方法があるようですので外部サイトを参照してください。

CGIが動いているか確認しましょう

アップロードしたフォルダの中にある、「example_simple.html」にアクセスしてみてください。

「example.com」というドメインで「contact」というディレクトリ(フォルダ)を作成してアップロードした場合のURLは以下の通りです。
自分のドメインやディレクトリに置き換えて入力してください。

http://example.com/contact/example_simple.html

赤背景で「mailformpro.cgi は正常に動作しています。」と表示された方は設置が順調に進んでいます。

Perlのパスの設定

「正常に動作しています。」と表示された方は、読み飛ばしてください。
表示されなかったかたは、パーミッションの設定が間違っている、またはPerlのパスが違っている可能性があります。

Perlの代表的なパスは

/usr/bin/perl

/usr/local/bin/perl

です。

TeraPadまたはミミカキエディットでmailformpro.cgiを開き、1行目のPerlのパスを

#!//usr/local/bin/perl

に書き換えてみてください。
それでも動かない場合は、サーバーのヘルプページやサポートページでperlのパスを調べてください。

フォームの設定をしましょう

ここでは、最低限動作させるために必要な設定をご案内しています。

TeraPadまたはミミカキエディットで「mailformpro」フォルダの中にある「config.cgi」を開いて、以下の項目を編集します。
上から順に記載していますが、行の番号は前後する場合があるので参考にして該当項目を探してください。

12行目付近

## フォームの送信先
push @mailto,'user@example.com';

「user@example.com」の部分を自分(設置者)のアドレスに書き換えてください。
アドレスなので半角英数字にしてください。複数の担当者に送信したい場合は、行を複製します。

先頭の行のアドレスが差出人になります。下記の場合「info@example.com」

push @mailto,'info@example.com';
push @mailto,'user@example.com';

15行目付近

## 自動返信メールの差出人名
$config{'fromname'} = '差出人名';

「差出人名」の所に会社名などを設定します。

21行目付近

## 念のためBCC送信宛先 (解除する場合は下記1行をコメントアウト)
#$config{'bcc'} = $mailto[0];

ユーザーへのメールをBCCで設置者にも届くようにするオプションです。
先頭に「#」を追加してコメントアウトしましょう。

とりあえず、これで動くはずです！

サーバー上の「example_simple.html」にブラウザでアクセスしてみましょう。
(例) http://example.com/contact/example_simple.html

メールアドレスの欄は、自分が受け取ることのできるアドレスにし、その他項目を適当に入力して送信してみてください。

テストで送信してみて、メールは届きましたでしょうか？
届いていない場合は念のため「迷惑メールフォルダ」や「ゴミ箱」も確認してみてください。

それでも届かない場合は、設定が間違っている可能性が高いので見直してみてください。

うまく設置できた場合

設定の仕上げです。

36行目付近

## 設置者に届くメールの件名
$config{'subject'} = '[ %s ] お問い合せフォームから';

設置者(自分たち)に届くメールの件名を修正したい場合は「[ %s ] お問い合せフォームから」の部分を修正します。

39行目付近

## 設置者に届くメールの本文整形
  $_TEXT{'posted'} = <<'__posted_body__';
  <_mfp_jssemantics_>
  <_mfp_date_>
  お問い合せフォームより以下のメールを受付ました。
  ──────────────────────────
  受付番号：<_mfp_serial_>
  入力時間：<_mfp_input_time_>
  確認時間：<_mfp_confirm_time_>
  　送信元：<_mfp_referrer_>
  支払金額：<_mfp_cartprice_>
  
  <_resbody_>
  ──────────────────────────
  
  <_mfp_env_>
  
  ━━━━━━━━━━━━━━━━━━━━━━━━━━
  署名は必ず変更
  ━━━━━━━━━━━━━━━━━━━━━━━━━━
__posted_body__

「__posted_body__」から「__posted_body__」の間に必要事項を自由に編集して記載してください。

最低限<_resbody_>の記述があれば、入力内容はすべて届きます。

72行目付近

#$config{"ReturnSubject"} = '[ %s ] お問い合せありがとうございました';

お問い合わせしたユーザーへも確認メールを送りたい場合は、上記先頭の「#」を削除します。
ユーザーへのメールの件名は「[ %s ] お問い合せありがとうございました」を修正します。
[%s]はお問い合わせ番号が自動で挿入されますが、不要な場合は削除してもいいと思います。

#75行目付近

## 自動返信メールの本文
$_TEXT{'responder'} = <<'__return_body__';
<_姓_> 様
  ──────────────────────────
  
  この度はお問い合せ頂き誠にありがとうございました。
  改めて担当者よりご連絡をさせていただきます。
  
  ─ご送信内容の確認─────────────────
  受付番号：<_mfp_serial_>
  <_resbody_>
  ──────────────────────────
  
  このメールに心当たりの無い場合は、お手数ですが
  下記連絡先までお問い合わせください。
  
  この度はお問い合わせ重ねてお礼申し上げます。
  
  ━━━━━━━━━━━━━━━━━━━━━━━━━━
  署名は必ず変更
  ━━━━━━━━━━━━━━━━━━━━━━━━━━
__return_body__

ユーザーに届くメールですので、必要事項を漏れなく記載しておきましょう。
署名もサンプルのままではなく、必ず変更しましょう。

動作確認後にアドオン・モジュールをOFFにしましょう

「アドオン」の下147行目付近

動作することが確認できたので先頭に「#」をつけてOFFにします。

#push @AddOns,'OperationCheck.js';        ## 動作チェック

150行目付近
段階的入力は項目数が多くなると効果的ですが、今回はOFFにしておきましょう。

push @AddOns,'phase.js';                ## 段階的入力機能

「モジュール」の下194行目付近

動作することが確認できたのでこちらにも先頭に「#」をつけてOFFにします。

#push @Modules,'check';            ## CGI動作環境チェック

以上でCGIの設定が終わりました。

最低限動かすための設定

最低限フォームとして機能させるには、下記をHTML内に記述することで動かすことができます。
赤字のファイルのパスは適宜変更してください。

<head>内に記述する

<link rel="stylesheet" href="mfp.statics/mailformpro.css" type="text/css" />

<body>内に記述する

<form id="mailformpro">
   <input type="text" name="お名前" />
   <button type="submit">送信する</button>
 </form>
 <script src="mailformpro/mailformpro.cgi" id="mfpjs"></script>

次の記事では、HTMLファイルを編集してより実用的なフォームのHTMLコーディングをご紹介します。

メールフォームは多彩な機能があります。
オプションをONにしないと動かない機能もあるので、詳しくは、メールフォームのマニュアルを参照してください。

メールフォームプロ 4の設置方法

メールフォームプロとは

ゴール

メールフォームプロ設置の準備

レンタルサーバーについて

メールフォームプロの設置

メールフォームプロのダウンロード

Windows(FFFTP)ユーザーはソフトの設定をしましょう

CGIをアップロードする場所について

アップロードするフォルダについて

パーミッションの設定

Perlのパスの設定

フォームの設定をしましょう

うまく設置できた場合

動作確認後にアドオン・モジュールをOFFにしましょう

最低限動かすための設定

コメントを残すコメントをキャンセル

メールマガジン

メッセージ

メールフォームプロとは

ゴール

メールフォームプロ設置の準備

レンタルサーバーについて

メールフォームプロの設置

メールフォームプロのダウンロード

Windows(FFFTP)ユーザーはソフトの設定をしましょう

CGIをアップロードする場所について

アップロードするフォルダについて

パーミッションの設定

Perlのパスの設定

フォームの設定をしましょう

うまく設置できた場合

動作確認後にアドオン・モジュールをOFFにしましょう

最低限動かすための設定

コメントを残す コメントをキャンセル

メールマガジン

メッセージ

コメントを残すコメントをキャンセル