WordPress で計算フォームを実装する

WordPress のサイト上で、テキストフィールドに数値を入力すると自動計算ができる仕組みを実装したくなった。

これには、「Calculated Fields Form」というプラグインを用いればいい。

Calculated Fields Form – WordPress プラグイン | WordPress.org 日本語
https://ja.wordpress.org/plugins/calculated-fields-form/

プラグインをインストールすると、「Calculated Fields Form」というメニューができるのでクリック。「New Form」で新規フォームを作成する。

「Add a Field」で新規フィールドを追加。追加されたフィールドをクリックすることで、フィールドの詳細を編集できる。例えば、Number フィールドの場合、Number Format を number にし、Symbol for grouping thousands に ,（コンマ）を入力し、Format Dynamically にチェックを入れると、入力時に 1000 単位で , が自動で入るようになる。

Calculated Field が計算結果用のフィールドだ。Set Equation に計算式を入力する。

この際、各フィールドはフィールドに設定した名前ではなく、Calculated Field＞Field Settings＞Operands にある、field2、field3・・・などを用いる。つまり、field2に３を掛けるなら field2*3 と Set Equation 欄に記入する。

四捨五入したい場合は PREC 関数を用いる。PREC([計算式],2) とすれば、小数点第３位以下を四捨五入し、小数点第２位まで表示されるようになる。

フィールドを入力し終えたうえで、計算結果を表示させたい場合は以下のようにする。

（１）Form Settings で Eval dynamically the equations associated to the calculated fields のチェックを外す。

（２）Button フィールドを追加。Select button type を calculate とする。

これでボタンを押したタイミングで計算結果が表示されるようになる。

作成した計算フォームはショートコードを設置したい場所に書けばいい。

参考：
WordPressサイトに自動計算フォームやシミュレーターを設置できるプラグイン 「Calculated Fields Form」 | ワードプレステーマTCD
https://design-plus1.com/tcd-w/2020/02/calculated-fields-form.html

WordPressのフォーム上で計算【Calculated Fields Form】の 使い方と小数点以下の処理方法 | 羊たちの沈黙
https://morifuji.me/wp/archives/15114

Calculated Fields Form で使える数式について。ROUND→PRECで代用 | nujonoa_blog
https://nujonoa.com/calculated-fields-form-formula/