メールフォームプロ https://www.synck.com/contents/download/cgi-perl/mailformpro.html
無料でクレジット表記不要、高機能なメールフォーム「メールフォームプロ」。説明書PDFの作者からの言葉がとても熱くて好きです。最高
HTMLとCSSしか知らない自分がexample_simple.htmlをカスタマイズしていきます。
なので、真似すると危険かも知れません。最低。
基本的にBootstrapをつけて
mfp.statics>mailformpro.css
にあるCSSを変更していきました。
汎用性のあるように、不必要な部分はdisplay:noneを使って消していきました。なんかプログラムで自動的に出現しているタグがあるので、すごく頭悪いやり方なんですけど、仕方ありません。。。。
スポンサードリンク
設置
メール設定
ダウンロードしたらmeilformpro>mailformpro.cgiの１行目のPerlパスを変更
meilformpro > config.cgi12行目くらいにある
|
1 2 3 |
フォームの送信先 <span class="hljs-keyword">push</span> <span class="hljs-variable">@mailto</span>,<span class="hljs-string">'user@example.com'</span>; |
を自分のアドレスにします。複数の場合はコピペして二行でOK。
-
宛先の変更
123<span class="hljs-preprocessor">## 自動返信メールの差出人名</span><span class="hljs-variable">$config</span>{<span class="hljs-string">'fromname'</span>} = <span class="hljs-string">'差出人名'</span><span class="hljs-comment">;</span>
差出人名を会社名などに変える。
-
その下にある
1234<span class="hljs-preprocessor">## 念のためBCC送信宛先 (解除する場合は下記1行をコメントアウト)</span><span class="hljs-preprocessor">## 以下をコメントアウトしていない場合は自動返信メールの控えが届きます。</span><span class="hljs-variable">$config</span>{<span class="hljs-string">'bcc'</span>} = <span class="hljs-variable">$mailto[0]</span><span class="hljs-comment">;</span>
言われたようにコメントアウトする。
-
69行目あたりの
123456<span class="hljs-preprocessor">## ※※※！！！※※※！！！※※※！！！※※※！！！※※※！！！※※※</span><span class="hljs-preprocessor">## 自動返信メールの件名 (有効にする場合は下記の行頭#を外してください。)</span><span class="hljs-preprocessor">## ※※※！！！※※※！！！※※※！！！※※※！！！※※※！！！※※※</span>$config{<span class="hljs-string">"ReturnSubject"</span>} = <span class="hljs-string">'[ %s ] お問い合せありがとうございました'</span>;
言われたようにコメントアウトを外す。
住所変更
|
1 2 |
この署名はサンプルです。必ず変更してください※ |
という項目が２箇所あるので変更する。
.htaccess設定
説明書PDF20ページに「このファイルはこの設定で！」みたいな感じで記載されているのでその通りにする。
動作チェックが完了したら。
config.cgiを「アドオン」で検索
|
1 2 3 4 |
<span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">#### ## アドオン(Javascriptの追加機能) ###</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">######</span><span class="hljs-comment">#</span> |
以下の部分で使用しないものをコメントアウトしていく。「動作チェック」と「CGI動作環境チェック」はいらないでしょう。
項目の変更
電話番号の追加
example_simple.htmlを変更していきます。このままでは変なのでリネームしておきましょう。
ダウンロードしたデモページのコードをコピーすれば簡単です。
まず電話番号を追加します。
|
1 2 3 |
<span class="hljs-tag"><<span class="hljs-title">dt</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mfp"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"must"</span>></span>必須<span class="hljs-tag"></<span class="hljs-title">span</span>></span>電話番号<span class="hljs-tag"></<span class="hljs-title">dt</span>></span> <span class="hljs-tag"><<span class="hljs-title">dd</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mfp"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">”tel”</span> <span class="hljs-attribute">data-type</span>=<span class="hljs-value">”tel”</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"電話番号"</span> <span class="hljs-attribute">size</span>=<span class="hljs-value">"40"</span> <span class="hljs-attribute">required</span>=<span class="hljs-value">"required"</span> /></span><span class="hljs-tag"></<span class="hljs-title">dd</span>></span> |
住所の追加
次、住所を追加したいですね。
https://www.synck.com/contents/download/cgi-perl/mailformpro/feature_1361268679.html
ここに書かれている通りにコピペしましょう。
|
1 2 3 4 5 |
<dt <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"mfp"</span>><span <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"must"</span>>必須</span>住所</dt> <dd <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"mfp"</span>><input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span> name=<span class="hljs-string">"郵便番号"</span> data-address=<span class="hljs-string">"都道府県,市区町村,市区町村"</span> /><br> <input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span> name=<span class="hljs-string">"都道府県"</span> required=<span class="hljs-string">"required"</span> size=<span class="hljs-string">"50"</span> /><br> <input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span> name=<span class="hljs-string">"市区町村"</span> required=<span class="hljs-string">"required"</span> size=<span class="hljs-string">"50"</span> /></dd> |
こんな感じかな？郵便番号から自動で入力される住所欄ができました。
他の項目を追加
これ、結構悩みました。CGI側もHTMLの項目と合わせないといけないかと思っていたんです。
でもFAQを読んで「すごい！」って思いました。
|
1 2 3 |
<dt <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"mfp"</span>><span <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"must"</span>>必須</span>追加項目</dt> <dd <span class="hljs-class"><span class="hljs-keyword">class</span>=</span><span class="hljs-string">"mfp"</span>><input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span> name=<span class="hljs-string">"追加項目"</span> size=<span class="hljs-string">"40"</span> required=<span class="hljs-string">"required"</span> /></dd> |
こうするだけ！
ひとまず最強無料メールフォーム、メールフォームプロの設置が完了しました。
デザイン変更編は次回以降。