フォーム管理プラグイン
このプラグインについて
入力項目を追加できるメール送信フォームを、複数設置することができます。送信された内容を、管理画面で確認することもできます。
広告
ダウンロード
以下のリンクからプラグインをダウンロードできます。(GitHubに遷移します。)
GitHubの緑ボタン「Code」内にある「Download ZIP」からすべてのプラグインをダウンロードできるので、解凍後に作成されるフォルダの中から form
フォルダを入手してください。
導入方法
準備
あらかじめ管理者ページにログインしておきます。
ファイルのアップロード
form/
内の configs/
と css/
と files/
と js/
と libs/
と templates/
を、freo設置ディレクトリ内にアスキーモードで上書きアップロードします。
パーミッションの設定
ブラウザソフトで freo/index.php/setup
にアクセスすると、必要なパーミッションが自動設定されます。
ただし、設置時に「ご利用のサーバーは、PHPから直接パーミッションを設定することができない環境のようです。」と表示された環境の場合は自動設定されないので、FTPソフトで以下のファイルのパーミッションを設定してください。
対象 | パーミッション |
---|---|
configs/plugins/form.ini |
606 に設定 |
files/plugins/form_files/ |
707 に設定 |
files/temporaries/plugins/form_files/ |
707 に設定 |
テンプレートの編集
templates/header.html
にある
<link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />
の直後に以下のコードを追加します。
<link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}jquery.subwindow.css" type="text/css" media="all" />
さらに
<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.js"></script>
の直後に以下のコードを追加します。
<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.subwindow.js"></script>
データベースの設定
ブラウザソフトで freo/index.php/form/setup
にアクセスします。セットアップ画面が表示されるのでセットアップを実行します。
完了
ブラウザソフトで freo/index.php/form
にアクセスし、エラーが表示されなければ完了です。
管理者ページにログイン後、管理メニューから「システム」→「設定管理」→「プラグインの設定」→「フォーム管理」を選択すると、各種設定を行えます。
また、管理メニューから「プラグイン」→「フォーム管理」を選択すると、フォームの管理ができます。
機能解説
目次
- フォームを登録する
- 送信メールの本文を変更する
- 送信内容を記録する
- 受付番号を記録&表示する
- 入力画面を編集する
- 入力項目を追加する
- 入力項目IDに使用できる文字
- 代替文字
- 添付ファイルを送信する
- 自動返信メールを送信する
- 入力を必須にする
- 入力内容の書式をチェックする
- 複数の入力ボックスで一つの入力項目をつくる
- 特定の語句の入力を強制する
- 2つの入力内容が等しいか確認する
- 入力エラーをフォーム画面に表示する
- 入力エラーを個別にフォーム画面に表示する
- 送信内容の前後に文字を追加する
- 料金を自動計算して表示する
- 郵便番号から住所を自動表示する
- SSLを使用する
- 携帯からのアクセス
フォームを登録する
まずはプラグインの管理画面にある「フォームを登録する」から、必要なフォームを作成します。入力項目の意味は以下のとおりです。
- フォームID
- システム上でフォームを区別するための値です。フォームのURLにも使用されます。この値は変更できません。(例:contact)
- フォームの名前
- 自分にとって判りやすい名前を付けておきます。(例:お問い合わせ)
- 送信完了時のリダイレクト先
- 送信完了時に表示されるページのURLを
http://
から設定できます。空欄にすると、デフォルトの送信完了画面が表示されます。 - 送信済み回数
- このフォームから送信された回数です。基本的に、変更する必要はありません。
- 添付ファイル
- フォームに添付ファイルを送信する項目を追加する場合、「許可する」にしておきます。そうしないと、ファイルは受け付けません。
- メールの送信
- 「送信する」にすると、メールの件名や送信元アドレスなどを設定できます。
- メールの送信:送信先
- メールの送信先を入力します。改行区切りで複数指定できます。
- メールの送信:Cc
- Ccメールの送信先を入力します。改行区切りで複数指定できます。
- メールの送信:Bcc
- Bccメールの送信先を入力します。改行区切りで複数指定できます。
- メールの送信:本文
- 送信されるメールの本文です。
[$message]
の部分には、訪問者が入力した内容がまとめて代入されます。[$input.subject]
や[$input.name]
のように書けば、入力内容を個別に取得することもできます。詳細は送信メールの本文を変更するを参照してください。 - メールの自動返信
- 「送信する」にすると、メールの件名や送信元アドレスなどを設定できます。本文には、
[$message]
や[$input.subject]
などの値を使用できます。 - 送信内容の記録
- 「記録する」にすると、フォーム管理画面の「表示」リンクから送信内容を表示できます。
- フォームの説明
- 必要なら、自分にとって判りやすい説明を書いておきます。
- 状態
- 「非公開」にすると、フォームを利用できなくなります。
作成したフォームは、管理画面のフォーム一欄にある「確認」リンクからアクセスできます。また、送信内容を記録する設定にしていると「表示」リンクから送信内容を確認できます。
送信メールの本文を変更する
本文は、初期状態では以下の内容で登録されています。
以下のメッセージが送信されました。
[$message]
- - - - -
このメールは自動で配信されています。
そして、例えば
- 件名
- テスト
- 名前
- 山田太郎
- メールアドレス
- taro@example.com
- メッセージ
- テスト。
これはテストメールです。
という内容が入力された場合、送信メールの内容は以下のようになります。
以下のメッセージが送信されました。
■件名
テスト
■名前
山田太郎
■メールアドレス
taro@example.com
■メッセージ
テスト。
これはテストメールです。
- - - - -
このメールは自動で配信されています。
つまり、[$message]
の部分に入力内容がまとめて表示されます。これを例えば
以下のメッセージが送信されました。
件名:[$input.subject]
名前:[$input.name]
メールアドレス:[$input.mail]
メッセージ:[$input.message]
- - - - -
このメールは自動で配信されています。
このようにして登録しておくと、送信メールの内容は以下のようになります。
以下のメッセージが送信されました。
件名:テスト
名前:山田太郎
メールアドレス:taro@example.com
メッセージ:テスト。
これはテストメールです。
- - - - -
このメールは自動で配信されています。
つまり、[$input.入力項目ID]
とすると、入力内容を個別に表示されます。(name属性が plugin_form[subject]
の場合、入力項目IDは subject
です。)
また、[$datetime]
と書くとメールの送信日時が、[$ip]
と書くと送信者のIPアドレスが表示されます。
送信内容を記録する
送信内容の記録を「記録する」にすると、そのフォームから送信された内容はデータベースに記録されます。そして、フォーム管理画面の「表示」リンクから送信内容を表示できます。
SSLを使用する場合、入力された内容を送信メールの本文には記載せず、管理画面で確認することを推奨します。
受付番号を記録&表示する
送信されるメールの本文&自動返信されるメールの本文に、一例ですが
受付番号:[$count]
と書くと、[$count]
の部分にはメールが送信された順に1~の番号が表示されるようになります。これを、メールの問い合わせ番号などに利用することができます。この番号をリセットしたい場合、各フォームの編集画面にある「送信済み回数」の項目を編集してください。
また、templates/plugins/form/complete.html
に一例ですが
<li>受付番号は <em>{$plugin_form_count}</em> です。</li>
と書くと、完了画面にもこの番号が表示されるようになります。
入力画面を編集する
入力画面のテンプレートは templates/plugins/form/form.html
です。このファイルを編集することにより、入力項目の追加などができます。
templates/plugins/form/form.html
を直接編集すると作成したフォーム全てに変更が反映されますが、templates/plugins/form/form/
内にフォームIDをファイル名としたHTMLファイルを作成すると、それが優先的に読み込まれます。
具体的には、フォームIDが sample
のフォームを作成した場合、templates/plugins/form/form/sample.html
があるとそれが優先的に読み込まれます。sample.html
は templates/plugins/form/form.html
をコピーして作成し、それから編集すると楽です。
入力項目を追加する
送信画面のformタグ内に
<input type="hidden" name="plugin_form[__label][subject]" value="件名" />
<dt>件名</dt>
<dd><input type="text" name="plugin_form[subject]" size="30" value="" /></dd>
と書かれていると、メールの件名として認識されます。
<input type="hidden" name="plugin_form[__label][name]" value="名前" />
<dt>名前</dt>
<dd><input type="text" name="plugin_form[name]" size="30" value="" /></dd>
と書かれていると、メールの送信者名として認識されます。
<input type="hidden" name="plugin_form[__label][mail]" value="メールアドレス" />
<dt>メールアドレス</dt>
<dd><input type="text" name="plugin_form[mail]" size="30" value="" /></dd>
と書かれていると、メールの送信者アドレスとして認識されます。
同じ要領でタグを追加すれば、入力項目を自由に追加できます。以下で具体的な追加方法を紹介します。
まずは、追加したい入力項目のIDと名前を決めます。ここではID address
、名前 住所
としておきます。IDは半角英数字(入力項目IDに使用できる文字)で、名前は何でも大丈夫です。
次にフォームタグ内に以下のタグを追加します。
<input type="hidden" name="plugin_form[__label][address]" value="住所" />
name属性には plugin_form[__label][自分で決めた入力項目ID]
、value属性には自分で決めた名前を設定します。さらに、フォームタグ内に以下のタグを追加します。
住所:<input type="text" name="plugin_form[address]" size="50" value="" />
name属性には plugin_form[__label][自分で決めた入力項目ID]
を設定します。これで住所の入力欄が追加されました。
同じ要領で、いくつでも入力項目を追加できます。以下は追加例です。
テキスト入力
<input type="hidden" name="plugin_form[__label][zipcode]" value="郵便番号" />
<dt>郵便番号</dt>
<dd><input type="text" name="plugin_form[zipcode]" size="10" value="" /></dd>
セレクトボックス
<input type="hidden" name="plugin_form[__label][prefecture]" value="都道府県" />
<dt>都道府県</dt>
<dd>
<select name="plugin_form[prefecture]">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
~略~
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</dd>
ラジオボタン
<input type="hidden" name="plugin_form[__label][age]" value="年齢" />
<dt>年齢</dt>
<dd>
<label><input type="radio" name="plugin_form[age]" value="" checked="checked" /> 無回答</label>
<label><input type="radio" name="plugin_form[age]" value="20代" /> 20代</label>
<label><input type="radio" name="plugin_form[age]" value="30代" /> 30代</label>
<label><input type="radio" name="plugin_form[age]" value="40代" /> 40代</label>
<label><input type="radio" name="plugin_form[age]" value="その他" /> その他</label>
</dd>
チェックボックス
<input type="hidden" name="plugin_form[__label][interest]" value="興味をお持ちの分野" />
<dt>興味をお持ちの分野</dt>
<dd>
<label><input type="checkbox" name="plugin_form[interest][]" value="HTML" /> HTML</label>
<label><input type="checkbox" name="plugin_form[interest][]" value="CSS" /> CSS</label>
<label><input type="checkbox" name="plugin_form[interest][]" value="JavaScript" /> JavaScript</label>
</dd>
複数選択ができる項目の場合、name属性は plugin_form[自分で決めたID][]
のようにする必要があります。([]
が必要です。)また、複数の値が送られてきた場合はすべて連結されて送信されますが、連結する際の文字を指定するには複数の入力ボックスで一つの入力項目をつくるを参考にしてください。
入力項目IDに使用できる文字
入力項目IDは半角英数字で自由に設定できますが、__
からはじまるIDはシステム側で利用するので使わないようにしてください。また、以下のIDは特別なふるまいをするので注意してください。
- id
- 送信先のフォームIDとして認識されます。
- subject
- 送信されるメールの件名として認識されます。
- name
- 送信されるメールの送信者の名前として認識されます。
- 送信されるメールの送信者のアドレスとして認識されます。
- price
- 自動計算された料金が加算されます。
- count
- 料金を自動計算する際、個別の購入数として認識されます。
- set
- 料金を自動計算する際、セット数として認識されます。
- confirm
- 確認入力用の値として認識されます。
代替文字
メールの件名、送信者の名前、送信者のメールアドレスはメール送信の際に必須なので、何も入力されなかった(もしくは入力項目自体設置されなかった)場合には代わりの値が送信されます。例えば件名が無かった場合、代わりに 無題
という値が送信されます。
これらの文字は、管理メニューの「システム」→「設定管理」→「プラグインの設定」→「フォーム管理」の「代替文字」で設定できます。
添付ファイルを送信する
フォームに添付ファイルを送信する項目を追加する場合、フォーム登録時に「添付ファイル」を「許可する」にしておきます。これにより、フォームタグに enctype="multipart/form-data"
属性(ファイルをアップロードする際に必須の属性)が追加され、サーバー側のプログラムもファイルを受け取る仕組みが有効になります。
その後、他の入力欄と同じ手順で
<input type="hidden" name="plugin_form[__label][file1]" value="添付ファイル1" />
<dt>添付ファイル1</dt>
<dd><input type="file" name="plugin_form[file1]" size="30" /></dd>
このようなコードや
<input type="hidden" name="plugin_form[__label][file2]" value="添付ファイル2" />
<dt>添付ファイル2</dt>
<dd><input type="file" name="plugin_form[file2]" size="30" /></dd>
このようなコードを追加します。
自動返信メールを送信する
自動返信メールを送信する場合、フォーム登録時に「自動返信メール」を「送信する」にします。そうするとメールの件名や送信元アドレスなどの設定欄が表示されるので、それらをすべて設定します。
自動返信メールの本文は、[$message]
や [$input.subject]
などの値を使用できます。詳細は送信メールの本文を変更するを参照してください。
入力を必須にする
フォームタグ内に
<input type="hidden" name="plugin_form[__require][必須にしたい項目のID]" value="1" />
と書くと入力必須にできます。例えばメールアドレスの入力を必須にしたい場合、以下のコードを追加します。
<input type="hidden" name="plugin_form[__require][mail]" value="1" />
入力内容の書式をチェックする
フォームタグ内に
<input type="hidden" name="plugin_form[__type][チェックしたい項目のID]" value="line" />
と書くと入力内容の書式をチェックできます。例えば以下のコードを追加すると一行入力とみなされ、200文字以上の入力はできなくなります。
<input type="hidden" name="plugin_form[__type][subject]" value="line" />
value="line"
の値を変更することにより、色々な書式チェックができます。利用できる値は以下のとおりです。
- 指定なし
- 5000文字まで送信可能。
- line
- 一行入力。200文字まで送信可能。
- numeric
- 一行入力。200文字まで送信可能。半角数字のみ送信可能。
- alphabet
- 一行入力。200文字まで送信可能。半角英数字のみ送信可能。
- 一行入力。200文字まで送信可能。メールアドレスのみ送信可能。
複数の入力ボックスで一つの入力項目をつくる
電話番号などのために、複数の入力ボックスで一つの入力項目をつくることができます。
各name属性に plugin_form[自分で決めたID][]
のように []
を追加し、
<input type="hidden" name="plugin_form[__implode][自分で決めたID]" value="連結文字" />
を追加することで、送信された文字が「連結文字」で連結して送信されます。
具体的には以下のようにします。
<input type="hidden" name="plugin_form[__label][tel]" value="電話番号" />
<input type="hidden" name="plugin_form[__implode][tel]" value="-" />
<dt>電話番号</dt>
<dd>
<input type="text" name="plugin_form[tel][]" size="10" value="" /> -
<input type="text" name="plugin_form[tel][]" size="10" value="" /> -
<input type="text" name="plugin_form[tel][]" size="10" value="" />
</dd>
複数の値を送る場合、plugin_form[tel][]
のように []
を追加します。
また <input type="hidden" name="plugin_form[__implode][tel]" value="-" />
により、入力された内容は -
で連結されて送信されます。つまり、3つの入力欄にそれぞれ「123」「456」「789」が入力された場合、123-456-789
が送信されます。
特定の語句の入力を強制する
特定の語句の入力を強制できます。
<input type="hidden" name="plugin_form[__need][自分で決めたID]" value="入力を強制したい文字" />
具体的には以下のようにします。
<input type="hidden" name="plugin_form[__label][password]" value="合言葉" />
<input type="hidden" name="plugin_form[__need][password]" value="秘密の言葉" />
<dt>合言葉</dt>
<dd><input type="text" name="plugin_form[password]" size="10" value="" /></dd>
これで「秘密の言葉」と入力されないと、送信できないフォームになります。HTMLを見れば合言葉はバレるので、本当に簡易な認証やスパムロボット避けとして使用します。
2つの入力内容が等しいか確認する
<dt>メールアドレス(確認入力)</dt>
<dd><input type="text" name="plugin_form[confirm][mail]" size="30" value="" /></dd>
入力項目を追加していますが、送信メールに記載される内容ではないので plugin_form[__label][xxx]
の項目は不要です。
入力エラーをフォーム画面に表示する
入力画面に以下のコードを書いておくと、エラーがあったときエラー内容がそこに表示されます。
<div class="plugin_form_error" id="plugin_form_error"></div>
エラーメッセージの文字色などを指定したい場合、外部CSSファイルなどで .plugin_form_error
に対して指定します。以下は一例です。
.plugin_form_error {
color: #FF0000;
}
入力エラーを個別にフォーム画面に表示する
上のコードに加えて
<div class="plugin_form_error" id="plugin_form_error_subject"></div>
<div class="plugin_form_error" id="plugin_form_error_name"></div>
このように plugin_form_error_エラーを表示したい項目のID
を書いておくと、その場所にエラーが表示されます。
送信内容の前後に文字を追加する
<input type="hidden" name="plugin_form[__begin][price]" value="合計" />
<input type="hidden" name="plugin_form[__end][price]" value="円" />
料金を自動計算して表示する
<input type="hidden" name="plugin_form[__price][order][サンプルコミック1]" value="400" />
<label><input type="checkbox" name="plugin_form[order][]" value="サンプルコミック1" /> サンプルコミック1(400円)</label>
order
や サンプルコミック1
といった値は任意です。
金額は plugin_form[price]
に対して加算されます。(固定)
<em><span id="plugin_form_price">-</span></em>円
と書いておくと、JavaScriptによるリアルタイム計算結果が表示されます。
<select name="plugin_form[count][order][サンプルコミック1]">
<option value="1">1冊</option>
<option value="2">2冊</option>
<option value="3">3冊</option>
<option value="4">4冊</option>
<option value="5">5冊</option>
</select>
個別の購入数を指定できます。
<select name="plugin_form[set]">
<option value="1">1セット</option>
<option value="2">2セット</option>
<option value="3">3セット</option>
<option value="4">4セット</option>
<option value="5">5セット</option>
</select>
セット数を指定できます。
送信される金額は、送信画面のHTMLをいじることにより偽造される可能性があります。参考価格や簡易見積り程度としてなら使えますが、送られてきた金額の確認は必ず行なってください。もっと厳密に管理したい場合、ショッピングカートプラグインの導入をお勧めします。
郵便番号から住所を自動表示する
ajaxzip3などを導入すれば可能です。一例ですが、送信フォーム画面の最後の方にある
<script src="{if $plugin_form.secure == 'yes'}{$freo.core.https_url}{else}{$freo.core.http_url}{/if}{$smarty.const.FREO_JS_DIR}plugins/form.js"></script>
の直後に以下を追加します。
<!--{if $smarty.server.HTTPS and $smarty.server.HTTPS != 'off'}-->
<script type="text/javascript" src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js"></script>
<!--{else}-->
<script type="text/javascript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>
<!--{/if}-->
<script type="text/javascript">
{literal}
//郵便番号から住所を検索
$('#plugin_form_zipcode').keyup(function() {
AjaxZip3.zip2addr(this, '', 'plugin_form[prefecture]', 'plugin_form[address]');
});
{/literal}
</script>
SSLを使用する
SSLに対応したサーバーである必要があります。
freo本体の config.php
にある以下の部分に、https://
からはじまる設置URLを設定しておく必要があります。
//設置URL(SSL用)
define('FREO_HTTPS_URL', '');
そうするとフォームの管理画面に「SSLの使用」という項目が現れるので、「使用する」に設定します。
送信内容はデータベースに記録するようにして、送信メールには最低限の内容しか記載されないようにすることを推奨します。
削除方法
このプラグインは、以下の手順で削除できます。
データベースの削除
データベースから freo_plugin_forms
と freo_plugin_form_records
を削除します。(削除しなくてもfreoの動作には問題ありません。)
ファイルの削除
以下のファイルを削除します。
configs/plugins/form.ini
css/jquery.subwindow.css
files/plugins/form_files/
(ディレクトリごと削除)files/temporaries/plugins/form_files/
(ディレクトリごと削除)js/jquery.subwindow.js
js/plugins/form.js
libs/freo/plugins/config.form.php
libs/freo/plugins/page.form.php
templates/mobiles/plugins/form/
(ディレクトリごと削除)templates/plugins/form/
(ディレクトリごと削除)
更新履歴
- 最新版との差分ファイルを一覧表示できます。
- 使用しているフォーム管理プラグインのバージョンを入力してください。
- 更新内容の詳細は、以下の更新履歴を確認してください。
- 2015/03/21 Ver 1.0.3
-
- メール送信時に同じ名前のファイルを複数添付した場合、エラーにせずにファイル名を変更して送信するように調整。
バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。
- 2013/12/25 Ver 1.0.2
-
- jQuery1.9.1以降で、料金の自動計算が機能しないことがある不具合を修正。
- 「ファイル名が日本語のファイル添付」の設定内容が逆に反映される不具合を修正。
バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。
- 2013/09/27 Ver 1.0.1
-
- jQueryのバージョンアップにともなって、サブウインドウを表示できなくなっていた不具合を修正。
バージョンアップは、以下のファイルを最新版付属のものに差し替えてください。
- 2013/05/02 Ver 1.0.0
-
正式版を公開しました。ベータ版からバージョンアップする場合、
libs/
内のファイルとtemplates/plugins/form/admin_record_form.html
とfiles/plugins/form_files/.htaccess
を上書きアップロードしてください。アルファ版からバージョンアップする場合、すべてのファイルを上書きアップロードしてテーブルも作成しなおしてください。