お久しぶりです、コーダーのKです。
見積もりフォームを作って欲しい！ という要望があったので表題の
Calculated Fields Formをご紹介しようかと。
まず、翻訳されてないので全て英語！ アルファベット恐怖症の人には辛いですが、簡単な英語なのでさして問題にもならないでしょう。
基本無料のプラグインですが、無償版ではフォームの入力内容をメールできないなど一番大事な部分が使えないんですよね。
価格帯はこんな感じ・・・プロフェッショナル版で十分でしょうし、おおよそ5,500円と言ったところですね。
今回は使い方と言うことで説明させてもらいましょう。
インストールするとダッシュボードのサイドバーにCalculated Fields Formが出てくるのでそこから調整する。
■管理画面トップ
初期段階のサンプルいくつも用意されるなどかなり親切。
下部の細かい設定は今回割愛、特に設定しなくても動きます。
■モジュール設置
上部記載の画像にある「Setting」を押すと設定画面が開きます。
左側のパーツをクリックすると、右側にそのパーツが設置されます。
右側に入っているパーツはドラッグアンドドロップで移動可能です。
■詳細設定
上図は数値入力させる場合の一例。
その他にはドロップダウンリストやチェックボックスなど必要なものが一通り揃ってます。
■フォームの設定
Form Name：フォームの上部にタイトルを出す
Label Placement：ラベルの位置。leftを選ぶとinputに対して左側に出る。
Enable autocompletion：自動補完のこと
Enable the browser's persistence：ブラウザにデータを保存するらしい。通常使わない
・Eval dynamically the equations associated to the calculated fields
計算を動的に行うかどうか？ の設定。必ずチェックを入れておくこと。
赤枠は計算のタイミングのこと。
デフォルトでは「keyup」つまり入力キーを叩いて離した瞬間。逆にonchangeにすると、入力した内容が確定したあと、となる。
■レイアウト用
赤枠のFileldsetとDivを選べる。
・Fieldset
fieldsetとして設定され、labelに入力したところはlegendタグで設置される。
カラムを割ることもでき、丁寧な作り込みと仕事に感動を覚えた。
Divも同じような設定ができ、細かいレイアウトを引ける。
■計算フィールド
肝心要、ここで入力された値を集計します。
例は施設利用人数の集計です。
「filedname3」で「大人（中学生以上）」に入力された値を参照します。
今回は1人あたり400円なので「fieldname3*400」としています。
同様に他の入力を拾って、「+」することで合計値を算出します。
複雑な計算も可能なのでいろいろ試してみるといいだろう。
ちなみにIFの使い方は以下
IF(条件式,正の返り値,負の返り値)
となる。
子供が3人以上で一人無料とする場合
IF(fieldname7>=3,fieldname7*200-200,fieldname7*200)
とすれば計算される。
■条件分岐
次に「If value is」を説明する。
この計算フィールドに入力された数値結果によって、別のモジュールの表示非表示が制御できる。
less thanやgreater thanなど条件式で判定できるので、細かい設定が可能だ。
入力値が1000円以上だった場合に表示したい場合は
greater than equal toを選んで、値に1000を設定
その後、If rule is valid showで表示するfieldを選択すればいい。
■javascriptの計算式もできる
(function(){
//ここに式を書ける
})();
上記の様にfunctionでくくるとjavascriptでの計算が可能となる。
例えば
(function(){
let p = 300; //大人料金
let cp = 200; //子供料金
let bp = 100; //幼児料金
if(fieldname7 >= 3){
return fieldname3*p+(fieldname7-1)*cp+fieldname8*bp;
}else{
return fieldname3*p+fieldname7-1*cp+fieldname8*bp;
}
})();
と書くことができる。
これを利用すればチェックボックスやドロップダウンリストなどを利用した器用な分岐も書ける。
かなり難しい部分もありますが、実装すると顧客に喜ばれることもあるので頑張る価値はあるかなと