ホームページでお客様からの問い合わせを受け付けるには、問い合わせフォームが必要となりますが、何か難しそう･･･と敬遠していまっている方も多いと思います。
Wordpressを導入するホームページだと、プラグインを使って比較的簡単に設置が可能ですが、HTMLだけのホームページだとプラグインを使用できません。
そこで今回は、無料で使えて高機能な「メールフォームプロ」の設置方法とカスタマイズについて解説します。
目次
メールフォームプロの設置方法
引用元：札幌Web制作のシンクグラフィカ: ホームページ制作と無料メールフォームCGI
メールフォームプロCGIは『シンクグラフィカ様』が提供しているメールフォームです。
初めてフォームを設置する人には、難しく感じる部分もあるかもしれませんが、メールフォームプロは設置の簡単さと高いカスタマイズ性、自動返信機能などが評価されており、業務効率化に役立つツールとして多くの企業で利用されています。
ダウンロード
まずは、シンカグラフィカ様の公式ページ(リンク先の最新版を無料ダウンロードをクリックしてください)から、メールフォームプロのCGIプログラムをダウンロードしてください。
フォルダ
examples(フォームの設置例)
iplogs(IPログ機能用フォルダ)
mailformpro(メールフォームプログラムのフォルダ)
mfp.statics(CSS・画像フォルダ)
HTMLファイル
example.html(動作確認用フォーム)
thanks.html(動作確認用送信完了ページ)
PDFファイル
mailformpro4.3.1.pdf(マニュアル)
サーバーにアップロード
ダウンロードしたファイルからPDFファイル以外をサーバーの設置したいディレクトリにFileZilla等のFTPソフトを使用してアップロードします。
パーミッションを設定
次に、パーミッションの設定をしていきます。
以下の表通りにパーミッションを設定してください。
以下の例では、FileZillaを使用して「mailformpro」フォルダのパーミッションを「755」に変更しています。
他のファイルも、マニュアルに記載されたパーミッションに同様に変更してください。
- mailformproフォルダ(755)
- mailform.pro.cgi(755)
- dataフォルダ(777)
- iplogsフォルダ(755)
- iplogs.cgi(755)
- iplogs.dat.cgi(777)
example.htmlにアクセス
パーミッションの設定が終わったら、example.htmlにアクセスして設定に問題が無いか確認します。
Google Chrome等のブラウザを使用して、アップロードしたexample.htmlにアクセスしましょう。
ドメイン直下にアップロードした場合：http://契約中のドメイン/example.html
アップロードとパーミッションの変更に問題が無ければ、以下のような画面で「正常に動作しています。」のメッセージが表示されます。
以下の画面が表示されない場合は、パーミッションの設定を見直し、ファイルが全てアップロードされているか再確認してください。
動作確認が終わったら、example.htmlとexampleフォルダは不要です。
サーバーから削除しておきましょう。
フォームの送り先・件名等を設定
mailformproフォルダ内の「config.cgi」ファイルを編集し、各種設定を行います。
ファイルの場所：mailformpro > config.cgi
config.cgi編集ソフト
プログラムは文字コードUTF-8で作られており、メモ帳等で編集すると、BOMという特殊な目に見えないデータが加えられ、サーバ上でプログラムが動作しなくなることがあります。
以下のソフトを使用して編集しましょう。
Windowsの場合はTeraPad
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
MacOSの場合はミミカキエディット
http://www.mimikaki.net/
を使いUTF-8N（BOM無し）・改行コードLFで保存しましょう。
フォームの宛先の編集(12行目)※必須
## フォームの宛先
push @mailto,'support@synck.com';12行目のpush @mailto,’任意のメールアドレス’;
を受け取りたいメールアドレスに変更します。
自動返信メールの差出人名(23行目)※自動返信する場合は必須
## 自動返信メールの差出人名
$config{'fromname'} = 'シンクグラフィカ';自動返信メールを送る場合、23行目に差出人名をいれます。
サンクスページのURLを編集(45行目)
## サンクスページのURL(URLかsend.cgiから見た相対パス)
$config{'ThanksPage'} = '../thanks.html?no=%s';サンクスページのURLを変更したい場合は、編集してください。
何もしないと、サンプルの完了画面が表示されます。
メールの件名(管理者宛)(49行目)を編集
## 設置者に届くメールの件名
$config{'subject'} = '[ %s ] お問い合せフォームから';管理者宛のメールの件名を編集してください。
メールの本文(管理者宛)(52行目)を編集
## 設置者に届くメールの本文整形
$_TEXT{'posted'} = <<'__posted_body__';
<_mfp_jssemantics_>
<_mfp_date_>
お問い合せフォームより以下のメールを受付ました。
──────────────────────────
受付番号：<_mfp_serial_>
入力時間：<_mfp_input_time_>
確認時間：<_mfp_confirm_time_>
送信元：<_mfp_referrer_>
支払金額：<_mfp_cartprice_>
待ち時間確認用URL
<_mfp_numticket_uri_>
予想待ち時間：<_mfp_numticket_wait_> 分程度
予想時間：<_mfp_numticket_datetime_>（実際の状況により前後します）
順番：<_mfp_numticket_qty_> 番目
受付番号：<_mfp_numticket_number_>
照会番号：<_mfp_numticket_code_>
<_resbody_>
──────────────────────────
<_mfp_env_>
━━━━━━━━━━━━━━━━━━━━━━━━━━
※この署名はサンプルです。必ず変更してください※
シンクグラフィカ / SYNCKGRAPHICA
〒003-0021 札幌市白石区栄通17丁目4-1
TEL / 050-3390-0450 FAX / 011-887-0450
http://www.synck.com
━━━━━━━━━━━━━━━━━━━━━━━━━━管理者宛のメールの本文を編集してください。
不要な項目を削除し、署名を変更してください。
自動返信メールの件名(89行目)を編集
$config{"ReturnSubject"} = '[ %s ] お問い合せありがとうございました';ユーザー宛のメールの件名を編集してください。
自動返信メールの本文(92行目)を編集
## 自動返信メールの本文
$_TEXT{'responder'} = <<'__return_body__';
<_姓_> 様
──────────────────────────
おすしのみ：<_ごはん_おすし_>
焼肉のみ：<_ごはん_焼肉_>
おすし＆焼肉：<_ごはん_おすし_焼肉_>
<_決済方法_銀行振込_><_決済方法_クレジット決済_>
この度はお問い合せ頂き誠にありがとうございました。
改めて担当者よりご連絡をさせていただきます。
─ご送信内容の確認─────────────────
受付番号：<_mfp_serial_>
<_resbody_>
──────────────────────────
このメールに心当たりの無い場合は、お手数ですが
下記連絡先までお問い合わせください。
この度はお問い合わせ重ねてお礼申し上げます。
━━━━━━━━━━━━━━━━━━━━━━━━━━
※この署名はサンプルです。必ず変更してください※
シンクグラフィカ / SYNCKGRAPHICA
〒003-0021 札幌市白石区栄通17丁目4-1
TEL / 050-3390-0450 FAX / 011-887-0450
http://www.synck.com
━━━━━━━━━━━━━━━━━━━━━━━━━━ユーザー宛のメールの本文を編集してください。
不要な項目を削除し、署名を変更してください。
<_項目名(name値)_>を使用することで、メールにフォームに入力されたお名前等を入れることが出来ます。
動作チェックをコメントアウト(174行目)
push @AddOns,'OperationCheck.js'; ## 動作チェック ※本番では消してください先頭に「#」を入れて、動作確認用の表示をコメントアウトしてください。
HTMLまたはPHPの編集
フォームの下準備が完了したので、いよいよ実際に動作する入力フォームを作成していきます。
まずは、フォームを設置したいページの<header>にCSSの読み込みを追加します。
<link href="mfp.statics/mailformpro.css" rel="stylesheet">次に<body>の閉じタグ直前にcgiの読み込みを追加します。
<script src="mailformpro/mailformpro.cgi" id="mfpjs"></script><form>タグを以下のように置き換えます。
<form id="mailformpro" action="mailformpro/mailformpro.cgi" name="form" method="POST">ページの階層やメールフォームプロの設置場所によって、パスは変更する必要があります。
例：メールフォームプロを直下に設置、お問い合わせページが「contact」ディレクトリ内の場合
<link href="../mfp.statics/mailformpro.css" rel="stylesheet">一階層上のフォルダから読み込む
フォームの項目設定
基本的にinputタグ等の「name属性」「type属性」を項目の内容に合わせて指定していきます。
「example.html」や「examplesフォルダ」のHTMLから、テキストやチェックボックス、ラジオボタン、送信ボタン等の部分をコピペして作成すると楽に実装出来ます。
メールアドレスのみ、「name属性」を「email」とします。
こうしないと、自動返信メールが届きません。
<input type="email" name="email" >必須項目は「required属性」を指定します。
<input type="text" name="お名前" required>
全体のサンプル
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Mailform Pro</title>
<link rel="stylesheet" href="mfp.statics/mailformpro.css" type="text/css">
</head>
<body>
<div id="wrapper">
<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
<dl class="mailform">
<input type="hidden" name="お名前" data-unjoin="姓+ +名+（+セイ+ +メイ+）" value="">
<dt class="mfp"><span class="must">必須</span>お名前</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col5">
<input type="text" name="姓" data-kana="セイ" size="15" required="required">
</div>
<div class="mfp_col5">
<input type="text" name="名" data-kana="メイ" size="15" required="required">
</div>
</div>
</dd>
<dt class="mfp">フリガナ</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col5">
<input type="text" name="セイ" size="15" data-charcheck="zenkaku">
</div>
<div class="mfp_col5">
<input type="text" name="メイ" size="15" data-charcheck="kana">
</div>
</div>
</dd>
<dt class="mfp"><span class="must">必須</span>メールアドレス</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col10">
<input type="email" data-type="email" name="email" size="40" required="required">
</div>
</div>
</dd>
<dt class="mfp"><span class="must">必須</span>確認のためもう一度</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col10">
<input type="email" data-type="email" name="confirm_email" data-post-disable="1" size="40" required="required">
</div>
</div>
</dd>
<dt class="mfp">電話番号</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col10">
<input type="tel" data-type="tel" name="電話番号" size="16" data-min="9">
</div>
</div>
</dd>
<dt class="mfp">お問い合わせ内容</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col10">
<textarea name="お問い合わせ内容" rows="60" cols="60"></textarea>
</div>
</div>
</dd>
<dt class="mfp"><span class="must">必須</span>送信確認</dt>
<dd class="mfp">
<div class="mfp_rows">
<div class="mfp_col10">
<label><input type="checkbox" required="required" data-exc="1" name="送信確認" value="送信チェック済み"> 上記送信内容を確認したらチェックを入れてください</label>
</div>
</div>
</dd>
</dl>
<div class="mfp_buttons">
<button type="submit">確認画面へ</button>
</div>
</form>
<script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>
</div>
</body>
</html>動作確認
項目が編集出来たら、動作確認してみましょう。
問題なく設定出来ていれば、必須項目に何も入力せずに送信ボタンを押すと以下のようにエラーメッセージが表示されます。
上記のように表示されない場合は、正常に動作しません。
「要素を検証」で「コンソール」を確認しましょう。
404エラー
CSSやcgiを読み込めていません。ページの階層やフォームの設置場所によってパスが変わってきますので、確認してください。
500系エラー
example.htmlで「動作確認OK」になっている場合は、ファイルのパーミッションには問題ありません。
<form>タグの指定やCGIの読み込み部分に問題が無いか確認してください。
「”(ダブルクォーテーション)」が全角になっていたり、全角スペースが入っていると動きません。
CSSの編集
上記の方法だと、デフォルトのCSS(mailformpro.css)が読み込まれます。
自分が作りたいデザインと違う場合は、表示が崩れてしまいますが、このCSSファイルを読み込まないとエラー文や確認画面が正常に表示されないので、読み込んだ状態で自分のスタイルを上書きしていくほうが結果的に楽になります。
資料請求