メールフォームプロ設置（お問い合わせ）
－2015年03月13日－
?まずはダウンロード
こちらから
ファイル内容は下記のようになっている。
?「mailformpro4.x.x」→「mailformpro」→ config.cgiを秀丸で編集する。
変更箇所
(1)自身のメールアドレスを書き込む
▼11行目
2 | push @mailto,’hohori@netnet.co.jp‘; |
(2)自身の名前または会社名を書き込む
▼14行目
2 | $config{‘fromname’} = ‘株式会社ネットネット‘; |
(3)サンクスページのURLを記述する。（下記の7番を参照）
※基本的に変更しない（「thanks」というページを作成する）
▼32行目
1 | ## サンクスページのURL(URLかsend.cgiから見た相対パス) |
2 | $config{‘ThanksPage’} = ‘../thanks.html?no=%s‘; |
(4)設置者に届くメールの本文整形
※<_resbody_>で入力項目をだしてくれる
※管理者サイドに届くメール文の「javascripitは正常に動作しました」を消したい場合は
<_mfp_jssemantics_>を消しましょう。
▼38行目
2 | $_TEXT{‘posted’} = <<'__posted_body__'; |
5 | お問い合せフォームより以下のメールを受付ました。 |
6 | ────────────────────────── |
9 | 確認時間：<_mfp_confirm_time_> |
14 | ────────────────────────── |
18 | ━━━━━━━━━━━━━━━━━━━━━━━━━━ |
19 | ※この署名はサンプルです。必ず変更してください※ |
21 | 〒000-1111111 東京都新宿区早稲田1-1-1 |
22 | TEL / 011-222-3333 FAX / 011-222-3333 |
24 | ━━━━━━━━━━━━━━━━━━━━━━━━━━ |
(5)自動返信メールを有効にする場合は二行目の「＃」を消す
▼64行目
1 | ## 自動返信メールの件名 (有効にする場合は下記の行頭#を外してください。) |
2 | #$config{“ReturnSubject”} = ‘[ %s ] お問い合せありがとうございました’; |
(6)自動返信メール自分（会社）の情報にする
▼67行目
2 | $_TEXT{‘responder’} = <<'__return_body__'; |
4 | ────────────────────────── |
6 | この度はお問い合せ頂き誠にありがとうございました。 |
9 | ─ご送信内容の確認───────────────── |
12 | ────────────────────────── |
14 | このメールに心当たりの無い場合は、お手数ですが |
19 | ━━━━━━━━━━━━━━━━━━━━━━━━━━ |
20 | ※この署名はサンプルです。必ず変更してください※ |
22 | 〒000-1111111 東京都新宿区早稲田1-1-1 |
23 | TEL / 011-222-3333 FAX / 011-222-3333 |
25 | ━━━━━━━━━━━━━━━━━━━━━━━━━━ |
(7)自身のメールアドレスを書き込む
▼11行目
2 | push @mailto,’hohori@netnet.co.jp‘; |
?サーバーへアップロードする。
?パーミッションの確認・変更
下記のファイルやフォルダのパーミッションを青枠の数字に変更する。
?htmlファイルを編集
メールフォームを設置するHTMLファイルに以下を追加（編集）
▼head内
【htmlの記述について】
style.cssの下に下記を記載する
1 | <link rel="stylesheet" href="mfp.statics/mailformpro.css" type="text/css" /> |
formの設定は下記にする
1 | <form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST"> |
のところは下記のする
2 | <script src="mailformpro/mailformpro.cgi" id="mfpjs"></script> |
次はformの中身についてつらつらと書いていきます。
まずはinput type="text"について
で必須入力項目となります。
1 | <span class="must">必須</span> |
で赤枠の表示になります
でこの項目に打ち込んだカタカナ文字をnama指定した場所に自動入力することが出来ます（firefoxだけ不可らしい）
1 | <input type="text" name="氏名" data-kana="ナマエ" required="required"/><span class="must">必須</span> |
カタカナ文字の受け取り方は下記のようにする
1 | <input type="text" name="ナマエ" required="required"/><span class="must">必須</span> |
type=”email” data-type=”email” でアドレスチェック（@あるかそして．があるか）
name="confirm_email" 確認用とするときはこれを記述する
指定要素を確認画面や送信時に表示しない時に使用する。
data-charcheck=”digit_and_alphabet”は英語と数字(記号含まず)以外はエラー表示
data-charcheck=”kana” 全角カタカナ以外であればエラー
data-charcheck=”digit” 数字以外はエラー表示
data-charcheck=”alphabet” 英語以外はエラー表示
required="required" 必須項目にこれを記述する（入力が完了したら）OKボタンが表示される
必須 で必須の表示をすることができる。
1 | <input type="email" data-type="email" name="email" data-charcheck="digit_and_alphabet" required="required"/> |
2 | <input type="email" data-type="email" name="confirm_email" data-charcheck="digit_and_alphabet" required="required"/> |
●参考ページはこちらです。→
Web Folder
SYNCK GRAPHICA
htmlの記述について1
htmlの記述について2
htmlの記述について（スマホ）3
htmlの記述について（ワードプレス）4
config.cgiの下記の二点の#マークを解除することで動作チェックをできる
1 | #push @AddOns,'OperationCheck.js'; ## 動作チェック |
2 | #push @Modules,'check'; ## CGI動作環境チェック |
ここでパーミッションの設定などを確認しよう。
CSVログダウンロード機能
?config.cgiの下記の#マークを解除する
1 | #push @Modules,'CSVExport'; ## CSV保存機能 |
?mailformpro/data/dat.postlog.csv.cgiのパーミッションを『666』に変更する
?テスト送信後にログ情報をFTPから確認する。
?
・CSVデータダウンロードのパスワード設定
CSVExport.cgi
・dat.postlog.csv.cgiの整形
CSVExportTemplate.csv.cgi
?「mailformpro4.x.x」→「mailformpro」→ config.cgiを秀丸で編集する。
変更箇所
(1)自身のメールアドレスを書き込む
▼11行目
?htmlファイルを編集
メールフォームを設置するHTMLファイルに以下を追加（編集）
▼head内
