ワードプレスのプラグインCalculated Field Formを使って動的な(リアルタイムで値が変わる)料金シミュレーターを作ってみました。このページで次のようなフォームの作成方法を一から解説します。
テーマファイルから編集してもできると思いますが、こちらの方がプラグインだけで完結するので初心者にはこの方法がおすすめです。なお、本記事はブロックエディターを使っていることが前提です。

次のような、シミュレーターを例に作り方を説明します。

今回例として作っているのは、デバイスごとによる保護シートの料金を算出するシミュレーターです。シートは標準と、ブルーライトカットがあると想定し料金設定は以下のようにしていますこれと枚数の組み合わせで計算すると言ったような感じですね。

それでは要件が分かったところで、早速作っていきます。
作成の大まかな流れは次のようになります。

まずはプラグインCalculated Field Formをインストールしましょう。普通にプラグイン→新規追加→”Calculated Field Form“　で検索で一番上に出てくると思いますので、インストールしてください。

シミュレーターフォームの作成

まずは大まかな”型”を作っていきます。Fom List / Item List には既に最初からサンプルの型が存在しています。今回は ID3 Ideal Weight Calculator を流用しますのでこれのCloneを押して複製してください。複製したらID6　ができていると思います。名前はなんでもいいのですが、分かりやすい名前にしておきましょう。

フィールド(フォーム内の行)の作成

型(フォーム)ができたので、次に中身のフィールドを作成していきます。先ほどのフォームのSettingsを押してください。

そしてfieldを作っていきますが、既にあるフィールドも使います。まずは fieldname3 を複製しましょう。field3をクリックして右下のアイコンをクリックすると複製できます。
その後fieldname3 ,6 ,2, 4 の順にし（ドラッグで移動)、5は削除しましょう。削除は先程のコピーボタンの隣にあります。下の写真のようになっていればOKです。

Formタイトルの設定

FormSettngを押して、フォームの題名を写真のように設定していきます。
Fotm Templateではデザインが変わるのですが、好きなものでOKです。

Filedname3_機種

ここからはFIeld個々の設定です。Field3は機種(スマホ,タブレット,PC)を設定していきます。
プルダウンで選ぶことができるフィールドです。FIeld Lebelを機種に設定し、Choices Text
を次のように設定します。具体的にはText , Value をそれぞれ設定します。

Filedname6_保護シートのタイプ

field3と同じように設定します。Field6はシートのタイプ(標準,ブルーライトカット)を設定していきます。FIeld Lebelを保護シートのタイプに設定し、Choices Textを次のように設定します。

Filedname2_枚数

Field2はシートの枚数を設定していきます。FIeld Lebelを枚数に設定し、Min と　Predefined Value(下の方にあります)　の二つを次のように設定してください。

Filedname4_税込料金(計算結果)

最後は料金の計算方法を設定していきます。FIeld Lebelを税込料金[¥]に設定します。Set Equation　で計算方法をphp(もどき?)で書いていきます。詳しい式の使い方はこちらを参考にしましょう。ざっくり説明すると、それぞれ６種類全てで場合分けして計算方法を変えています。
return値のfieldname2は枚数ですので、それをかけているだけです。
規則性のある料金表ならばもっとスッキリ書けるのですが、今回はあえて全て場合分けが必要な値段表にしました。これで設定はOKです。

(function(){
if(fieldname3 == 'sp' && fieldname6=='standard') return fieldname2*980;
if(fieldname3 == 'sp' && fieldname6=='blue_cut') return fieldname2*1980;

if(fieldname3 == 'tablet' && fieldname6=='standard') return fieldname2*1580;
if(fieldname3 == 'tablet' && fieldname6=='blue_cut') return fieldname2*2580;

if(fieldname3 == 'pc' && fieldname6=='standard') return fieldname2*2980;
if(fieldname3 == 'pc' && fieldname6=='blue_cut') return fieldname2*3980;
})();

ここまでくればあとは簡単です。このフォームを使いたい記事でショートコードを埋め込めば良いだけです。ショートコードの名前はCalcutlated Field Formのトップから見れます。
念の為参考までにですが、このページでは次のような感じで埋め込んでいます。あとは更新すれば完成です！公開して確認してみましょう。