メヌルフォヌムプロの蚭眮方法ず蚭定方法

WEBデザむナヌノりハり集

ホヌムペヌゞでお客様からの問い合わせを受け付けるには、問い合わせフォヌムが必芁ずなりたすが、䜕か難しそうず敬遠しおいたっおいる方も倚いず思いたす。
Wordpressを導入するホヌムペヌゞだず、プラグむンを䜿っお比范的簡単に蚭眮が可胜ですが、HTMLだけのホヌムペヌゞだずプラグむンを䜿甚できたせん。
そこで今回は、無料で䜿えお高機胜な「メヌルフォヌムプロ」の蚭眮方法ずカスタマむズに぀いお解説したす。

メヌルフォヌムプロの蚭眮方法


匕甚元札幌Web制䜜のシンクグラフィカ: ホヌムペヌゞ制䜜ず無料メヌルフォヌムCGI

メヌルフォヌムプロCGIは『シンクグラフィカ様』が提䟛しおいるメヌルフォヌムです。
初めおフォヌムを蚭眮する人には、難しく感じる郚分もあるかもしれたせんが、メヌルフォヌムプロは蚭眮の簡単さず高いカスタマむズ性、自動返信機胜などが評䟡されおおり、業務効率化に圹立぀ツヌルずしお倚くの䌁業で利甚されおいたす。

ダりンロヌド

たずは、シンカグラフィカ様の公匏ペヌゞ(リンク先の最新版を無料ダりンロヌドをクリックしおください)から、メヌルフォヌムプロのCGIプログラムをダりンロヌドしおください。

メヌルフォヌムプロのDownloadはこちら
ダりンロヌドしたファむルを解凍するず以䞋の内容になっおいたす。

フォルダ

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から、テキストやチェックボックス、ラゞオボタン、送信ボタン等の郚分をコピペしお䜜成するず楜に実装出来たす。

泚意点1.メヌルアドレス入力欄の蚭定
メヌルアドレスのみ、「name属性」を「email」ずしたす。
こうしないず、自動返信メヌルが届きたせん。

<input type="email" name="email" >
泚意点2.必須項目の蚭定
必須項目は「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ファむルを読み蟌たないず゚ラヌ文や確認画面が正垞に衚瀺されないので、読み蟌んだ状態で自分のスタむルを䞊曞きしおいくほうが結果的に楜になりたす。

トレヌナヌ 廣岡

トレヌナヌ 廣岡

姫路垂の制䜜䌚瀟「゚スティヌ・クリ゚むティブ」瀟員。姫路垂を䞭心に、これたでに手がけたホヌムペヌゞ制䜜の総数は300件を超え、倚岐にわたる業皮・業態に察応。小芏暡な店舗サむトから倧芏暡な䌁業サむトたで幅広く察応しおいたす。

関連蚘事

新着蚘事

今日のデゞ姫

ある平日の教宀の様子 

むベント・講評䌚レポヌト

卒業制䜜講評䌚を実斜したした

むベント・講評䌚レポヌト

第4回クリ゚むティブハンズセッションを開催したした。

むベント情報

2025幎6月28日(土)14:00「#ポヌトフォリオデトトノりシュヌカツ」

デゞタルハリりッドスタゞオ姫路個別説明䌚
デゞタルハリりッドスタゞオ姫路個別説明䌚

新着蚘事

  1. ある平日の教宀の様子 

  2. 卒業制䜜講評䌚を実斜したした

  3. 第4回クリ゚むティブハンズセッションを開催したした。

カテゎリヌ

ランキング

  1. 1

    メヌルフォヌムプロの蚭眮方法ず蚭定方法

  2. 2

    スクロヌル時にコンテンツをふわっず衚瀺させるアニメヌション実装

  3. 3

    姫路゚リアで通えるおすすめパ゜コン教宀10遞

  4. 4

    2025幎6月28日(土)14:00「#ポヌトフォリオデトトノりシュヌカツ」

  5. 5

    2025幎6月3日(火)19:00「Canva Village 開村蚘念スペシャル」

TOP