WordPressで見積や送料の自動計算フォームを作成できるプラグイン「Calculated Fields Form」を紹介します。
自動計算フォームを作成する場合は、通常ならJavascriptを使いますが、サイトに組み込んで動作させるまでが一苦労です。Calculated Fields Form はプラグインなので、面倒なJavascriptの設定は不要、WordPress上であれば確実に動作します。
入力する項目と計算式を設定すると、見積や価格、送料などを自動計算して表示するフォームが作成できます。また、計算式は加減乗除だけでなく論理演算や関数も利用できるので、工夫次第で高等数学等のデモにも使えます。
英語のプラグインですが、必要最低限の設定項目さえわかれば後は何とかなります。企業サイトの簡単な見積作成や、物販サイトの送料計算に使うと便利ですよ。
Calculated Fields Form インストール
まずはCalculated Fields Form をインストールしましょう。WordPressのダッシュボードから、プラグイン → 新規追加 → 右上の検索窓で「Calculated Fields Form」と検索します。
「今すぐインストール」→「有効化」すると、左側のメニューにCalculated Fields Formの項目が追加されるので、設定画面を開いて下さい。全て英語ですが、必要最低限の設定項目だけ説明するのでご安心を。
Calculated Fields Form サンプルフォームとデモ
Calculated Fields Formの設定画面には、サンプルフォームが5つ用意されています。まずはこのサンプルを使って、Calculated Fields Formの仕組みを理解しましょう。
一番簡単な足し算フォーム「Simple Operations」の「Settings」を開いて下さい。
左側が各フィールドの設定エリアで、右側がフォームのプレビューエリアです。
このサンプルは「First Number」と「Second Number」を足したものが「Sum」に表示されます。その下の「Select/un-select some items」では、チェックを入れるとその数値がプラスされて「Sum of selected items」に表示されます。
左側フォームの下にある「Preview」をクリックすると、別ウィンドウでデモが動作します。
実際の動作を見てみましょう。上のフォームは単純な足し算で「Sum」に合計が表示され、下のフォームはチェックした数字が合算されて「Sum of selected items」に表示されています。
計算結果が即時に反映され、リアルタイムに数字が変動しているのがわかるでしょうか。
サンプルをもう一つ見てみましょう。「Lease Calculator」では、リース対象価格と残価設定、リース料率、リース期間を入力すると、月間リース料、支払総額、料率総額を即時に計算します。
Calculated Fields Formのサンプルフォームでは、それぞれ以下の計算ができます。かなり複雑な計算もこなせるので、サンプルの動作を見ながら使い方を理解してください。
- Simple Operations： 単純な合算
- Calculation with Dates： 滞在期間に応じてホテルの宿泊費を計算
- Ideal Weight Calculator： 身長と性別から標準体重を計算
- Pregnancy Calculator： 最後の生理日をもとに受胎日と出産予定日を計算
- Lease Calculator： 価格や料率、期間を入力してリースの支払総額を計算
以下からデモページに飛んで、サンプルフォームを実際に触ってみることができます。デモページ内の上メニューから各サンプルを選んでください。
Calculated Fields Form フォーム設定
では、Calculated Fields Formのフォームを設定してみましょう。右側は実際に表示されるフォームで、左側はフィールドを追加したり、フィールドごとの計算式や条件分岐を設定します。
右側の各項目はフィールドと呼ばれ、数値の入力、計算、結果表示や、説明、注釈の表示を行うフィールドを追加しながらフォームを作成します。
左側のForm Controlsにはタブが3つあります。左から順に説明します。
「Add a Field」からフィールドを選んで追加します。入力方法の項目は様々で、テキストやボタンなどから選べます。日時やパスワードの入力にも対応しています。
「Field Settings」では、各フィールドの計算式や条件分岐を設定します。単純な足し算や引き算だけでなく、計算式で指数や関数を使うこともできます。
「Form Settings」は、フォーム全体の設定です。フォームのタイトルや説明を表示したり、テンプレートやCSSでフォームデザインをカスタマイズすることができます。
Calculated Fields Form フィールドの設定
サンプルフォーム「Simple Operations」にはフィールドが合計9つあって、タイトルやテキストエリア、数値、計算式、チェックボックスのフィールドが並んでいます。
各項目をクリックすると、左側でフィールドを設定することができます。全て説明すると大変なので、主要なフィールドの設定方法だけをご紹介します。
まずは上から3つ目の「First Number」をクリックしてみましょう。このフィールドタイプは「Number」で、数値を入力するために使います。
「Number」フィールドの主要な設定項目です。設定後は「Save Changes」をお忘れなく。
Field Label： フィールド上部に表示される名称です。日本語も入力できます。
Field name： 計算式に使うフィールド名です。作成時に自動付番されます。
Min , Max： 入力値の上限と下限を設定できます。
Required： チェックを入れると入力必須項目になります。
Read Only： チェックを入れると入力不可になり、読み取りのみになります。
Predefined Value： 初期値を設定できます。
Instructions for User： フィールド下に説明を追加できます。
続いて5つ目の「Sum」をクリックします。このフィールドタイプは「Calculated Field」で、上の「Number」フィールドの数値を計算します。
左側の「Set Equation」に計算式が表示されていますね。右のフォーム上にある計算可能フィールドを下の「Operands」から選択して、計算式はその下の「Operators」で作成します。
Calculated Fields Form ラジオボタンのフィールド追加
では、このサンプルにラジオボタンのフィールドを追加して、増えたフィールドに合った計算式を作り直してみましょう。とりあえず動作に必要な項目だけを設定していきます。
まずは右側のプレビューで場所を選び、左の「Add a Field」で「Radio Buttons」をクリックすると、選択した場所の下にラジオボタンのフィールドが追加されます。
場所の変更は、フィールドを摘んで上下させてください。不要なら右下のゴミ箱ボタンをクリックすると消えます。
追加したラジオボタンを上から設定していきます。「Field Label」はこのフィールドのタイトル、「Field Layout」は一段当たりのボタン表示数、「Required」にチェックを入れると必須項目になります。
ラジオボタン「Choices」の「Text」は選択肢名、「Value」は数値またはテキストを入力します。ここで設定した「Value」が計算式に代入されます。選択肢を移動させる場合は右側の上下矢印で、その右のプラスマイナスは選択肢の追加と消去です。
今回は選択肢に数値を入れるので、「Value to Submit」は「Choice Value」に変更します。「Instructions for User」に文章を入れると、項目の説明文を下に追加できます。
Calculated Fields Form 計算式の設定
次に「Set Equation」の計算式を消去して、新しい計算式を作成します。まず「Operands」からフィールドを選択します。計算式で使えるフィールドが全て表示されているので、一つ選択します。
フィールドの右にあるプラスボタンを押すと、オペランドが計算式に追加されます。
今度は演算子を選んでクリックします。加減乗除の四則演算だけでなく、四捨五入(ROUND)や切り上げ切り捨て(FLOOR,CEIL)平方根(SQRT)、最大値最小値(MAX,MIN)などを求める関数も充実しています。
さらに「Logical Operators」を選択すると、IF文や論理積や論理和などを使った論理演算も可能になります。
サンプルとして、全ての数値を掛け算する計算式を作ってみました。下の青いボタン「Save Changes」で一度セーブしてから「Preview」で動作させてみましょう。
Calculated Fields Form のメイン画面に戻って、Form List の右側にあるショートコードを表示させたいページに貼り付けます。Form Name を変更する場合は、名前を変えてから右の「Update」をクリックしてください。
各フィールドの数値を掛け算しています。8×4×8の答え、256が計算結果として表示されていますね。
計算フォームの設置
作成した計算フォームを固定ページや投稿に設置してみましょう。フォームリストの右側にショートコードが表示されているので、設置したいフォームのコードをコピーします。
あとは設置したいページにショートコードを貼り付けてください。
Calculated Fields Formをインストールすると、編集ページにショートコード入力用のタグボタンが追加されるので、こちらも利用しましょう。
計算フォームが複数ある場合は、リストの一番上にあるフォームが追加されます。右側のタグボタンはJavascriptのvarを併用する際に用いるもので、コードに変数を追加できます。
Calculated Fields Form 有料版
Calculated Fields Formは無料版と有料版があり、フォームの計算結果をメールで送信したり、決済機能を追加する場合は、有料版プラグインを購入する必要があります。
有料版は3種類あり、DeveloperやPlatinumになるとWooCommerceやPayPalと連携する各種アドオンが使えるので、かなり高度なシステムをこのプラグインだけで構築することが可能です。
有料版の購入は、ダッシュボード左の「Calculated Fields Form」→「Upgrade」から、プラグインの種類を選んで「GET THE PLUGIN」でカード番号を入力します。価格はユーロ表記です。
有料版をインストールする際は、まず無料版のCalculated Fields Formを削除してください。そのまま上書きすると、作成した計算フォームが消えてしまいます。
以上、これでCalculated Fields Formの使い方がわかったかと思います。
英語のプラグインですが、最低限の設定項目さえわかれば何とかなりますよ。他の細かい設定も興味があれば試してみてください。
