ビッグバナー広告

WordPressで見積や送料の自動計算フォームを作成 Calculated Fields Formの使い方

自動計算 Calculated Fields Form

見積や送料の自動計算フォームを作成できるWordPressプラグイン「Calculated Fields Form」を紹介します。

自動計算フォームを作成する場合は、通常ならJavascriptを使いますが、サイトに組み込んで動作させるまでが一苦労です。Calculated Fields Form はWordPressプラグインなので、面倒なJavascriptの設定は不要、WordPress上であれば確実に動作します。

入力する項目と計算式を設定すると、見積や価格、送料などを自動計算して表示するフォームが作成できます。また、計算式は加減乗除だけでなく論理演算や関数も利用できるので、工夫次第で高等数学等のデモにも使えます。

英語のプラグインですが、必要最低限の設定項目さえわかれば後は何とかなります。企業サイトの簡単な見積作成や、物販サイトの送料計算に使うと便利ですよ。

スポンサーリンク
PC用

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」を開いて下さい。

Calculated Fields Form サンプル

左側がフォームの編集エリアで、右側がプレビューエリアです。このサンプルは「First Number」と「Second Number」を足したものが「Sum」に表示されます。その下の「Select/un-select some items」では、チェックを入れるとその数値がプラスされて「Sum of selected items」に表示されます。

Calculated Fields Form サンプル編集

左側フォームの下にある「Preview」をクリックすると、別ウィンドウでサンプルが動作します。上のフォームは単純な足し算で、下のフォームはチェックを入れた数字が追加されていますね。

Calculated Fields Form サンプル動作

Calculated Fields Form 各フィールドについて

次に右側の各フィールドを見ていきます。このサンプルはフィールドが合計9つあって、タイトルやテキストエリア、数値、計算式、チェックボックスのフィールドが並んでいます。

上から3つ目の「First Number」をクリックします。このフィールドタイプは「Number」で、数値を入力するためのフィールドです。

Calculated Fields Form フィールド

続いて5つ目の「Sum」をクリックします。ここで上に2つある「Number」フィールドの数値を計算します。

Calculated Fields Form sumフィールド

左側の「Set Equation」に計算式が表示されていますね。右のフォーム上にある計算可能フィールドを下の「Operands」から選択して、計算式はその下の「Operators」で作成します。

Calculated Fields Form 計算式

Calculated Fields Form ラジオボタンのフィールド追加

では、このサンプルにラジオボタンのフィールドを追加して、増えたフィールドに合った計算式を作り直してみましょう。とりあえず動作に必要な項目だけを設定していきます。

まずは右側のプレビューで場所を選び、左の「Add a Field」で「Radio Buttons」をクリックすると、選択した場所の下にラジオボタンのフィールドが追加されます。

Calculated Fields Form フィールド追加

場所の変更は、フィールドを摘んで上下させてください。不要なら右下のゴミ箱ボタンをクリックすると消えます。

Calculated Fields Form フィールド消去

追加したラジオボタンを上から設定していきます。「Field Label」はこのフィールドのタイトル、「Field Layout」は一段当たりのボタン表示数、「Required」にチェックを入れると必須項目になります。

ラジオボタン「Choices」の「Text」は選択肢名、「Value」は数値またはテキストを入力します。ここで設定した「Value」が計算式に代入されます。選択肢を移動させる場合は右側の上下矢印で、その右のプラスマイナスは選択肢の追加と消去です。

今回は選択肢に数値を入れるので、「Value to Submit」は「Choice Value」に変更します。「Instructions for User」に文章を入れると、項目の説明文を下に追加できます。

Calculated Fields Form ラジオボタン設定

Calculated Fields Form 計算式の設定

次に「Set Equation」の計算式を消去して、新しい計算式を作成します。まず「Operands」からフィールドを選択します。計算式で使えるフィールドが全て表示されているので、一つ選択します。

Calculated Fields Form 計算式作成

フィールドの右にあるプラスボタンを押すと、オペランドが計算式に追加されます。

Calculated Fields Form 計算式作成

今度は演算子を選んでクリックします。加減乗除の四則演算だけでなく、四捨五入(ROUND)や切り上げ切り捨て(FLOOR,CEIL)平方根(SQRT)、最大値最小値(MAX,MIN)などを求める関数も充実しています。

Calculated Fields Form 演算子

さらに「Logical Operators」を選択すると、IF文や論理積や論理和などを使った論理演算も可能になります。

Calculated Fields Form 論理演算

サンプルとして、全ての数値を掛け算する計算式を作ってみました。下の青いボタン「Save Changes」で一度セーブしてから「Preview」で動作させてみましょう。

Calculated Fields Form 計算式作成

Calculated Fields Form のメイン画面に戻って、Form List の右側にあるショートコードを表示させたいページに貼り付けます。Form Name を変更する場合は、名前を変えてから右の「Update」をクリックしてください。

Calculated Fields Form ショートコード

各フィールドの数値を掛け算しています。8×4×8の答え、256が計算結果として表示されていますね。

Calculated Fields Form 計算プレビュー

以上、これでCalculated Fields Formの使い方がわかったかと思います。英語のプラグインですが、最低限の設定項目さえわかれば何とかなりますよ。他の細かい設定も興味があれば試してみてください。

次回は自動計算フォームの使用例、送料や見積を自動計算するサンプルを作ってみます。

スポンサーリンク
PC用
PC用

フォローする