WordPressで見積りフォームなどの計算フォームを作ろう！となると、Jazzy Formsを利用していた方も多いのでしょうか。そんなJazzy Formsは2018年で開発が止まっており、現在ダウンロードができなくなっています。
一方で、見積り計算向けのプラグインはいろいろとあれど、Jazzy Formsのような柔軟さで計算ができるものは少ない印象で、Jazzy Formsの開発が止まっているとわかっていても継続して利用をせざるを得ないというサイト制作者の方もいらっしゃるのではないでしょうか。
Jazzy Forms亡き今、代替となるようなことができそうなプラグイン「Calculator Builder | CalcHub」を使って複雑な計算が必要な見積りフォームを作ってみましょう。
「Calculator Builder | CalcHub」について
「Calculator Builder | CalcHub」は複雑な処理をさせることができるフォームを作れるプラグインです。
入力フォームをビルダーで作ったあとに、入力→出力の間の処理としてJavaScriptを書けるのが特徴です。
JavaScriptで書ける計算や変換処理であれば大体そのまま利用できるので、なんらかのプラグイン独自の計算式用の言語で書いたりするよりは遥かにいろいろなことができます。
複雑な処理をさせることができる一方、制作する人間がJavaScriptが書ける必要があるのでWeb制作の初心者の方には難しく感じるプラグインかもしれません…。
また、プラグイン自体が日本語化されていないので、適宜わからない表記は翻訳しながら作業を進める必要があります。
Jazzy Formsの代替になるようなプラグインを探している中で、単純に選択肢の項目数と単価を掛け合わせて足し込むような計算フォーム作成プラグインは多かったのですが、例えばボリュームディスカウント（一定の個数を越えたら一定比率のパーセンテージで値引きが入る）や条件によって値引き率が変わる、といった処理が入る場合は利用できないプラグインが多かったです
「Calculator Builder | CalcHub」は入力→出力の間でJavaScriptで処理を自由に書けるので、複雑な処理が必要な見積りフォームでも実装することができました。
（一方で、逆に、単純に足し込むだけの見積りフォームをお探しの方はAFormsなどを使った方がハッピーかもしれません）
実際に使ってみよう！
ここでは簡単に商品を選んで数量を選ぶと計算してくれるフォームを作ってみます。
インストール→有効化をしたら、管理画面内のメニューから「CalcHub」のAdd Newから新しいフォームを作成します
新しいフォームを作成するとこんな画面が表示されます。
「Builder」の下の＋アイコンがあるあたりをクリックして入力フォームを追加しましょう。
ビルダーで追加できる要素には、タイトルや区切り線、スペーサーなどのフォーム項目以外の要素も含まれます。
各項目にはCSSのclassを追加することもできます。
計算ボタン
計算ボタンを押した時に計算させたい場合は、「Button」から計算ボタンを追加します。いちいちボタンを押さずに入力項目の数値や選択項目の変更を行う度に計算させたい場合は、計算ボタンを追加しなくても大丈夫です。
結果表示枠
「Result」から結果表示枠を追加できます。
表示形態はHTML・1行テキストフィールド・複数行テキストフィールドの3つから選べます。
「Builder」の枠の下の「Formula」の枠に計算式を入力していきます。
ここが実はちょっと独特です…！というのも、ビルダーで入力欄や表示欄を作っただけでは何も表示されず、ここに必ず計算式を書く必要があるためです。
今回はこんな感じの簡単な項目になっているので、販売商品×数量の計算式を書いていってみましょう！
ちなみに各フォーム項目の設定はこんな感じ
販売商品
数量
結果
合計
入力された項目の取得はx[n]、出力先の指定はy[n]で取得・指定ができます。
これを踏まえて、販売商品×数量の計算式を書いてみるとこんな感じになります。
y[1] = x[1] * x[2];ボリュームディスカウントのような数量によっての金額や値引き率を変更したい場合は、if文を使ってx[2]（数量）が一定以上の場合の計算を書いてあげれば実装が可能です。
let resultNum;
if(x[2] > 10){
// 11個以上の時10%オフになる
resultNum = x[1] * x[2] * 0.9;
}else{
resultNum = x[1] * x[2]
}
y[1] = resultNum;
表示させたいページに表示用のショートコードを追加して保存すれば見積りフォームの完成です。おつかれさまでした～！
フォームを作る中で注意をしたいこと
計算部分はすごく自由度が高い処理ができるのですが、初見ですぐに扱えるかというとそうではないのがCalcHubの難しいところ…。
以下の点に気をつけながら実装するとうまくいきます。
- 重要結果を表示するにはFormula欄にスクリプトを必ず書く必要がある
-
CalcHubはビルダーで項目を追加するだけでは結果になにも表示されません。
計算内容のみならず入力内容をそのまま表示したいだけでも必ずFormula欄にスクリプトを書く必要があります。// y[1]の結果表示欄にx[3]の項目欄の内容をそのまま表示したい時 y[1] = x[3]; - チェックボックスの場合、選択欄単位ではなく選択項目単位でしか取得ができない
-
ラジオボタンの場合は選択欄単位で
x[1]の構文で取得ができますが、チェックボックスの場合はチェックボックスの項目欄単位ではなく選択項目単位でx[2]x[3]x[4]…と取得項目が膨大になる傾向があります。選択項目が定期的に増減する場合、その度にFormula欄内のつなぎ直しが発生してしまうため注意が必要です。 - 計算のタイミングの設定はFormula欄の下のOption欄で設定できる
-
計算ボタンを追加すると計算できるようになりますが、正直それ以外のタイミングで計算させたい時もありますよね。その場合はOption欄で設定が可能です。
- Obfuscation
- 難読化
- Make a calculation when loading the form
- フォームの読み込み時に計算を実行する
- Hide fields of results when changing calculator parameters
- 計算パラメータを変更する際に結果フィールドを非表示にする
- Perform the calculation only when the button is clicked.
- ボタンがクリックされたときのみ計算を実行する
- Calculate when the parameters are changed.
- パラメータが変更されたときに計算を実行する
全部にチェックを入れるととんでもないことになってしまうので、必要な項目にのみチェックを入れるようにしましょう…！
- Obfuscation
- 計算ボタンをクリックした時のみ計算する場合、結果欄に出てほしいはずの見出しが出っぱなしになってしまう
-
CSSを追加することによってどうにかできます。
計算ボタン以降に追加した見出しに
.result_titleを追加した上で、以下のCSSを追加することで出っぱなしになることを防げます。.is-hidden + .result_title{ display:none; } - 結果欄に3桁カンマが自動では入らない
-
結果欄に出力する前にJavaScriptで加工する必要があります。
// 計算結果に3桁カンマを入れてy[1]に表示する let returnPrice; returnPrice = x[1] * x[2]; y[1] = Number(returnPrice).toLocaleString();
日本語圏のサイトではまだあまり使われているサイトが少ないプラグインではありますが、活用できればとっても便利なプラグインなのでぜひ使ってみてください。