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

公開日: コンテンツ追加
Knowledge Base Wordpress プラグイン
何かの見積もりなどサイト上で訪問者に数字を入力してもらい、それを元に計算結果を表示したい。サイトを作っていて必要だと感じる機能の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. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressでユーザーごとの投稿数やアクセス数、コメント数などを表示するプラグイン「Author and Post Statistic Widgets」

WordPressでタグの一覧を本文の下やウィジェットに表示させるプラグイン「Minimalist Tag Cloud」

WordPressで自動計算機能を備えたテーブルを作成できるプラグイン「Data Tables Generator by Supsystic」


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

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

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

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

インストール方法

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

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

を参照ください

【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」をクリックして作成(編集)完了です。

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

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

https://cff.dwbooster.com/documentation#mathematical-module

をご確認ください。

【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.335です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

799 円 (税込)
著者:プライム・ストラテジー株式会社出版社:SBクリエイティブサイズ:大型本ISBN-10:4797370963ISBN-13:9784797370966■こちらの商品もオススメです ● 20歳の自分に受けさせたい文章講義 / 古賀 史健 / 講談社 [新書] ■通常24時間以内に出荷可能です。■メール便は、1冊..
【中古】 できる100ワザWordPress 必ず集客できる実践・サイト運営術 /ホシナカズキ(著者),できるシリーズ編集部(著者) 【中古】afb

【中古】 できる100ワザWordPress 必ず集客できる実践・サイト運営術 /ホシナカズキ(著者),できるシリーズ編集部(著者) 【中古】afb

498 円 (税込)
ホシナカズキ(著者),できるシリーズ編集部(著者)販売会社/発売会社:インプレス発売年月日:2014/11/29JAN:9784844337164
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報