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



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

【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. 定義済みフォームテンプレート

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

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

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

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

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

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

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

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

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

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

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

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

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

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

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

各画面はこんな感じです

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

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

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

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

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

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

より複雑な機能や設定の方法については公式サイト(英語)

をご確認ください。

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

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

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

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

例えば
「フィールド1」/2+「フィールド2」/2=「フィールド3」
という式で、両方のフィールドに数字が何か入っていればフィールド3には結果が表示されるが、どちらかが空欄もしくは両方空欄(こっちは当たり前ですけど)の場合には結果が表示されないという現象です。

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

上の例であれば
「フィールド1」/2=「フィールド4」
「フィールド2」/2=「フィールド5」
「フィールド4」+「フィールド5」=「フィールド3」
とすると結果がきちんと表示されるようになります。

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

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

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

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

テストした環境

  1. WordPressのバージョン:4.9.6
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity バージョン2.3.0g
  4. プラグインのバージョン:1.0.231
  5. このプラグインの最新バージョンは1.0.258です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

2,894 円 (税込) 送料込
<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

2,570 円 (税込) 送料込
あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る