ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

フォームの設置が簡単！
メールフォームプロの基本とカスタマイズ

メールフォームお問い合わせページ等でフォームを導入する際、毎回のように使わせていただいているシンクグラフィカ様のメールフォームプロCGIですが、利用している方も多いかと思います。また、フォームの導入を考えているけど、システム関係の知識は無いから…。と敬遠してしまっている方も中にはいるでしょう。
今回は、初めてメールフォームプロを導入する方や、まだ使い慣れていない方向けに、基本的な設置方法とカスタマイズについて覚書も兼ねて解説しようと思います。

ダウンロード

ダウンロードシンクグラフィカ様のダウンロードページのボタンから最新版のファイルをダウンロードします。(最新バージョン 4.2.5:2019109月3現在)
特に理由がない場合は最新バージョンをダウンロードしましょう。

  • サーバーの環境によっては不具合を起こす可能性もあります。導入は自己責任でお願いします。
  • 導入する場合は、企業ごとのセキュリティポリシーに従って検討しましょう。

設置方法

ダウンロードした「mailformpro4.2.5.zip」を解凍し、含まれているpdf以外を設置したいディレクトリにアップロードし、パーミッションの設定をします。下図を参考にしながら設定して下さい。

パーミッション

パーミッションの設定ができたら、サーバー上の「example.html」のURLにブラウザでアクセスし、動作確認を行います。「mailformpro.cgiは 正常に動作しています。」と表示されていればパーミッションの設定は完了です。
※一部のディレクトリでしかCGIが動作しないサーバの場合は、該当のディレクトリに「mailformpro」のフォルダを設置し、html内のCGIを読み込む記述のパスを環境に合わせて書き直して下さい。

設定ファイルの編集

mailformproフォルダ内の「config.cgi」ファイルを編集し、各設定を行います。

  • 編集するエディタによってファイル内の改行コードや文字コードが変わってしまい、プログラムが正常に動作しなくなってしまう場合があるので注意が必要です。
  • 行頭に「#」がついている行はコメントアウトされ、無効になります。
  • 目安として現在の最新バージョンでの行番号を記述していますが、バージョンによって前後する可能性があります。

送信先や自動返信メールの設定

フォームの送信先(12行目)※必須

push @mailto,'任意のメールアドレス';

と記述することで、フォームに入力された内容が届きます。
行を複製し、宛先を複数指定することもできます。その場合、先頭で指定されたメールアドレスが自動返信メールの差出人に設定されます(初期値)。

自動返信メールの差出人名(15行目)※自動返信メールを有効にする場合は必須

$config{'fromname'} = '任意の名前';

と記述することで、自動返信メールの差出人名を変更できます。

自動返信メールの有効化(73行目)

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

の行頭の「#」を削除することで自動返信メールが有効になります。

各メールの内容 必要に応じて内容を編集できます。

設置者に届くメール(44~67行目)

  • <_mfp_jssemantics_>：JavaScriptが正常に動作したかどうかの判定が表示されます。 ※必要に応じて削除できます。
  • <_mfp_date_>：フォームから送信された日時が表示されます。 ※必要に応じて削除できます。
  • <_resbody_>：フォームで入力された内容(氏名、連絡先等)が表示されます。 ※削除すると内容が確認できませんのでご注意ください。
  • <_mfp_env_>：フォームを送信した閲覧者が使用したブラウザ、入力にかかった時間等が表示されます。 ※必要に応じて削除できます。

※署名は必ず編集して下さい。

自動返信メール(76~102行目)

  • <_姓_> 様：姓をフォームで名前を入力してもらう項目の「name属性」に変更してください。
  • <_都道府県_北海道_>：項目の入力内容によって、自動返信メールの文章を変更することができます。例えばフォームの都道府県を選択するフルダウンメニューで北海道を選択した人にだけ特定の文章を表示する等の使い方ができます。こちら少し応用的な部分なので、今回は割愛させていただきます。
    詳しく知りたい方はこちらを参照してください。 ※必要に応じて削除できます。

※自動返信メール部分の署名も必ず編集してください。

動作チェック(155,214行目)

push @AddOns,'OperationCheck.js';
push @Modules,'check';

本番ではコメントアウトもしくは削除し、無効にしてください。

その他アドオン、モジュールは任意で有効無効を切り替えてください。

HTMLの編集

HTMLの最低限必要な記述は以下です。

外部ファイルの読み込み

<link href="mfp.statics/mailformpro.css" rel="stylesheet">
<script src="mailformpro/mailformpro.cgi" id="mfpjs"></script>

 

任意の場所-フォーム本体

<form id="mailformpro" action="mailformpro/mailformpro.cgi" name="form" method="POST">
任意の項目、確認ボタン等
</form>

 

フォームの項目の設定(必須項目、エラー文)

基本的にinput等の「name属性」、「type属性」は項目の内容に合わせて指定すれば大丈夫ですが、何点か注意する点があります。

入力内容の結合

「姓と名」や「生年月日」のように、いくつかの欄に分けて入力させ、最終的に一つの項目として扱いたい場合は、以下のように設定します。
※確認画面でのみ連結させる場合は「data-unjoin」、送信結果でも連結させる場合は「data-join」を使用します。

<input type="hidden" name="お名前" data-join="姓+ +名">
<input type="text" name="姓"><input type="text" name="名">

 

メールアドレス入力欄の設定

メールアドレスのみ、「name属性」を「email」とします。こうすることで入力されたメールアドレスに自動返信メールが届くようになります。
メールアドレス確認用の欄を作る場合は上記を複製し、「name属性」を「confirm_email」とします。

<input type="email" name="email" >
<input type="email" name="confirm_email">

 

必須項目の設定

必須項目は「required属性」を指定します。これで項目に不備がある場合にエラーメッセージが表示されるようになります。「required」単体でも動作しますが「required=”required”」、とした方が確実に動きます。

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

 

エラー文の設定

ラジオボタンやチェックボタンを使った項目を必須項目にすると、エラー文が表示されたときに項目内の最初のボタンの下に表示され、崩れたように見えていしまいます。項目の枠の最下部に表示させるためには表示させたい位置にエラー文の枠をあらかじめ記述しておきます。

<div id="errormsg_項目のname属性" class="mfp_err"></div>

 

cssの編集

css私は項目ごとにdl,dt,ddタグを使って分けているのですが、mailformpro.cssを読み込んでいると、この3つのタグへのスタイルが記述されているのでかなり崩れてしまいます。他にも影響が出てしまう要素があるので注意が必要です。ですが、このcssファイルを読み込まないとエラー文や確認画面が余計に崩れてしまうので、自分好みにカスタムしたいという事でなければ、読み込んでからcssを編集していく方がよさそうです。cssを編集する際は、下の方にレスポンシブ対応用のメディアクエリの記述もあるので忘れずに編集しましょう。

これで最低限の設定は完了

ショッピングカートこの他にも、商品購入のカートやクレジット決済など、豊富な機能が備わっていて比較的簡単に導入できるツールなので、使ってみてはいかがでしょうか。

  • サーバーの環境によっては不具合を起こす可能性もあります。導入は自己責任でお願いします。
  • 導入する場合は、企業ごとのセキュリティポリシーに従って検討しましょう。

WEBプログラマー ／ I.S

WEBサイト制作に関するお問合せはこちら