フォームに入力された値の計算結果を表示できるプラグイン「Calculated Fields Form」

何かの見積もりなどサイト上で訪問者に数字を入力してもらい、それを元に計算結果を表示したい。サイトを作っていて必要だと感じる機能の１つですね。

【Calculated Fields Form】はページ内に計算式が含まれたフィールド、入力するフィールドを設置し、入力値に応じて自動的に計算結果を表示してくれるプラグイン。よくある入力して何かのボタンをクリックすると別ページで結果を表示という動作ではなく、入力してフォーカスが外れたらすぐに結果が表示されるのが魅力のプラグインです。

【Calculated Fields Form】プラグインの基本的な機能・できること

1. フロントエンドに入力された値を計算して結果を表示
2. フォームは無制限に作成可能
3. 関数なども使用できる

・・・と簡単に書きましたが、本当に何でもできる計算用フォームになっています。ちなみに公式ページの機能一覧を翻訳すると

1. 複数のフィールドと書式設定オプションを持つビジュアルフォームビルダ
2. 任意の数の計算フィールドを追加することができます
3. 簡単でビジュアルな電卓インタフェース
4. この電卓は、3進演算子や一般的な数学関数を含む簡単操作と高度操作の両方をサポートしています
5. ドロップダウン、チェックボックス、ラジオボタン、日付、数字などの複数のフィールドタイプをサポート
6. 日付の操作を受け入れる（例：2つの日付の間の日数）
7. フィールド値へのスマート自動番号と価格の識別
8. フォームセパレータとコメントセクションをサポートし、フォームをよりフレンドリーな方法でレイアウトします。
9. 複数の計算されたフォームを管理する
10. フォームを複製するための「クローン」ボタン
11. 予め組み込まれた5つの実用サンプルが含まれています
12. 複数ページのフォームをサポート
13. 条件付きルールがサポートされています。ウィザードの作成に役立ちます
14. 直感的でインタラクティブなフォームビルダーインターフェース
15. 定義済みフォームテンプレート

と書かれており、計算フィールドを作るプラグインの決定版では？と感じるほど高機能です。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

• テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
  ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
• プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
• このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
• プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【Calculated Fields Form】プラグインの設定画面や表示の日本語化と翻訳

【Calculated Fields Form】プラグインは日本語化が可能な言語ファイルが同梱されていますので、翻訳を行えば日本語での使用が可能ですが、肝心の詳細設定項目が翻訳対応になっていないので適用しても意味がありません（途中まで翻訳しましたが意味がないことに気づき断念しました）。

簡単な単語なので使い慣れれば特に英語でも問題ないと思いますが、関数など高度な計算を行う場合には作者サイトの解説などについてGoogle Chromeなどの翻訳ツールが備わっているブラウザで自動翻訳させるようにした方がいいと思います。

【Calculated Fields Form】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

【Calculated Fields Form】プラグインの基本的な使い方

とてもすべての機能を紹介できないので、簡単な計算フォームの作り方のみ紹介しておきます。

基本的には計算式などを入れたフォームを作って、固定ページや投稿へショートコードで埋め込みます

フォームの作成と管理は管理画面から「設定」→「Calculated Fields Form」で行います

画面の中ほどにある「New Form」に名前を入れて「Add」をクリックします

上のフォームリストに作成したフォーム名が表示されるので「Settings」をクリックして編集します

出てきたページには３つのタブがあります

1. Add a Field／入力フィールドや文字列などフォームに表示する項目を追加します
2. Field Setting／各フィールドの設定（計算式や表示／非表示など）を設定します
3. Form Setting／フォームの外観や内容についての設定をします

１でフォームに表示する項目を作り、２でフォーム内の計算などを設定したり順番を並び替えたりします。必要であれば３でフォーム全般の設定を行います。

各画面はこんな感じです

フィールドを選択して「Set Equation」欄に計算式を入力していくことで、この計算式に基づいた結果がすぐに表示されるようになります。

フィールドのオプションとして

1. Required／必須入力にするかどうか？
2. Read Only／書き込み不可（編集不可）にするかどうか？
3. Hide Field From Public Page／フロントエンドで非表示にするかどうか？

の他、代替入力（あらかじめ設定された値をセットする）などといったいろいろなオプションがそれぞれのフィールドに設定できます。

これらを使ってフォームを作ったら「Save Settings」をクリックして作成（編集）完了です。

あとは一覧に表示されているショートコードを挿入すれば計算フォームの出来上がりです。

より複雑な機能や設定の方法については公式サイト（英語）をご確認ください。

【Calculated Fields Form】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

空欄の計算で結果が表示されないときは

どんなパターンがあるかはじっくりと調べていませんが、このフォームを使って空欄の除算（フォームが空欄のものを割り算する）で結果が表示されない現象がありました。

例えば
「フィールド１」／２＋「フィールド２」／２＝「フィールド３」
という式で、両方のフィールドに数字が何か入っていればフィールド３には結果が表示されるが、どちらかが空欄もしくは両方空欄（こっちは当たり前ですけど）の場合には結果が表示されないという現象です。

これを解決するには各式の結果を一旦別々のフィールドに表示させてから足し算をするという方法で回避できます

上の例であれば
「フィールド１」／２＝「フィールド４」
「フィールド２」／２＝「フィールド５」
「フィールド４」＋「フィールド５」＝「フィールド３」
とすると結果がきちんと表示されるようになります。

このときの「フィールド４」と「フィールド５」はフォーム上に表示する必要がありませんから、各フィールドのオプションにある「Hide Field From Public Page」にチェックを入れることでフロントエンドでは非表示になります。

空欄が絡むと結果がうまく表示されない・・・という方は試してみてください。

プラグインのテスト環境＆個人的評価

最後に【Calculated Fields Form】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

• テストサーバー：カラフルボックス
• WordPressのバージョン：4.9.6
• PHPのバージョン：7.0
• テーマ：Simplicity2 バージョン2.3.0g
• プラグインのバージョン：本記事で紹介しているバージョン 1.0.231／最新バージョン 5.2.35
• 公式サイト（wordpress.org上）：https://wordpress.org/plugins/calculated-fields-form/
• 公式サイト（作者サイト）：

個人的な評価・感想ほか

1. 設定のしやすさ：★★★★★
2. 使いやすさ：★★★★★
3. おすすめ度：★★★★★

多機能すきで何ができるのかをすべて網羅できない程高機能なプラグインです。