自動計算フォームや料金シミュレーターを無料で自社サイトに設置できるWordPressプラグイン「Calculated Fields Form」を紹介します。
単純な足し算や掛け算であればだれでも簡単に設置できるほか、エクセルの関数計算ができる人であれば、年利や金利などの複雑な計算式を設置することも可能です。サイトに計算フォームが設置されていることで、ユーザーの離脱率を減らし、満足度を大きく高めることが可能です。
この記事では、Wordpressプラグイン「Calculated Fields Form」の基本的な使い方を解説します。イメージしやすいように、実際に計算フォームを作成しながら解説しますので、参考にしてください。
Calculated Fields Formの特徴
- 自動計算フォームを生成できる
- エクセルの関数を応用して複雑な計算も可能
Calculated Fields Formのデモ計算フォーム
デモとして、「ホテルの宿泊費計算フォーム」を作成してみました。
記事の後半で作成手順を解説しています。
インストール
WordPressの管理画面から「プラグイン」→「新規追加」と進み、「Calculated Fields Form」と検索するか、下記ボタンからダウンロードし、有効化しましょう。有効化後、管理画面の左サイドバーに「Calculated Fields Form」が出現します。
基本的な使い方
Calculated Fields Formの管理画面です。
「1」は最初から設置されている計算フォームです。カスタマイズして使用可能です。
「2」新しく計算フォームを作成する場合は、管理画面の下部にある「Item Name」にフォーム名を記入し、「Add」で作成できます。
計算フォームは「Settings」でカスタマイズ、ショートコードで記事に挿入が可能です。
「Settings」をクリックすると、フォームの作成画面に移行します。
左のコントロールからフィールドを選んでクリックすると、右のスペースの一番下に追加されます。追加したフィールドはドラッグ＆ドロップで入れ替え可能です。該当のフィールドをクリックするか、「Field Settings」のタブをクリックすると、フィールドの細かいカスタマイズ画面に移ります。
こちらで１つ１つのフィールドを設定することができます。
フィールドの用途
それぞれのフィールドの用途を以下に一覧にしてみました。
Single Line ：テキスト入力スペース
Text Currency ：金額入力用
Number ：数字入力フィールド
Slider ：スライドで最小～最大の数値を選べるフィールド
Email ：Email確認用フィールド
Date Time ：日付・時刻入力用フィールド
Text Area ：自由記述エリア
Checkboxes ：チェックボックス（複数選択可）
Radio Buttons ：チェックボックス（１つのみ選択）
Dropdown ：ドロップダウン選択
Upload File ：ファイルのアップロード用フィールド
Password ：パスワード
Phone field ：電話番号の入力用フィールド
Instruct. Text ：補足文章の入力用フィールド
Hidden ：非表示フィールド
Section break ：区切り線
Page break ：フォームを２つに区切る
Summary ：概要のタイトル入力用フィールド
Media ：画像・動画・音声のアップロード用フィールド
Button ：計算確定用ボタン
HTML content ：Html記述用フィールド
Acceptance ：(GDPR) 利用規約のチェック用フィールド
Calculated Field ：計算結果の表示フィールド
Field set ：レイアウト変更用フィールド
div ：レイアウト変更用フィールド
サンプルフォームを使ってみよう
Calculated Fields Formには５つのサンプル計算フォームが最初から用意されています。それぞれ下記のような計算フォームとなっています（元々の表記は英語ですが、画像はわかりやすいように和訳してあります）。あと、機能性は申し分ないですが、そのまま使うのは見た目が微妙なのでCSSでの調整は必須ですね。
1． Simple Operations
シンプルな足し算ができるフォームです。
上のフォームでは２つの数字の合計、下のフォームでは、選択式でアイテムの合計値を算出しています。
2． Calculation with Dates
チェックイン・チェックアウトの日にちからホテルの利用料金を計算するフォーム。
その他、駐車場の利用料金などにも応用できそうですね。
3. Ideal Weight Culculator
身長・性別から理想体重を算出するフォーム。基本は１と同じくシンプルな計算式を使用していますが、「男性」「女性」でif条件を使って計算式を分岐させています。
4. Pregnancy Calculator
最終月経から受胎の日と出産予定日を算出するフォームです。
5. Lease Calculator
ローン残高や金利、支払総額、利息額などを計算するフォーム。年利など難しい計算を使っています。保険やローンなど、様々なサイトに応用できそうです。
自分で計算フォームを生成する
今回は冒頭で使った「ホテルの宿泊費計算フォーム」を1から作る手順を解説します。
サンプル計算フォームにも似たフォームがありますが、新規で作ってみましょう。
必要となるのは以下の6つの項目です。
1. チェックインの日にち
2. チェックアウトの日にち
3. 宿泊人数
4. 部屋のグレード（スタンダード・ハイグレード・プレミアムの3種類）
5. オプションサービス（温泉入り放題・朝食サービスの2種類）
6. 宿泊費総額
基本料金を１泊5000円とします。部屋のグレードがスタンダードの場合は基本料金のみ、ハイグレードの場合は1.5倍、プレミアムの場合は2倍として計算します。
計算式としては、下記のようなものになります。
(((基本料金*部屋のグレード)+オプションサービス)*(チェックアウト日にち-チェックインの日にち))*宿泊人数=宿泊費総額
上記の項目で使用するフィールドは以下の6つです。
1. チェックイン・入力フィールド…「Date Time」
2. チェックアウト・入力フィールド…「Date Time」
3. 宿泊人数入力フィールド…「Number」
4. 部屋のグレード設定フィールド…「Drop Down」
5. オプションサービス入力フィールド…「Checkboxes」
6. 宿泊費総額フィールド…「Calculated Field」
まず、プラグインの管理画面から新しい計算フォームを作成します。
「New Form」の「Item Name」に「ホテル宿泊費計算フォーム」と入力し、「Add」をクリック。新しく計算フォームが追加されるので、「Settings」をクリック。
一番上のタイトル以外の既存フィールドをすべて削除し、今回使うフィールドを挿入します。
一番上から順番に編集していきます。
・タイトルを編集
| Title | 変更前 | 変更後 |
| フォーム名 | Calculated Form | ホテル宿泊費計算フォーム |
| ディスクリプション | Starting form. Basic calculated fields sample. | 基本料金は5000円として計算します。 |
・チェックイン・チェックアウトのフィールドを編集
| Date Time | 変更前 | 変更後 |
| フィールドの名前 | Date | チェックインの日付 チェックアウトの日付 |
| Date Format (年月の表示方法) |
mm/dd/yyyy | yyyy/mm/dd （チェックイン・アウト共通） |
| Default Date (未入力状態の日付) |
– | 2020/1/1 （チェックイン・アウト共通） |
| Show Dropdown Year and Month (カレンダー選択を表示するか) |
– | チェックあり （チェックイン・アウト共通） |
・宿泊人数の編集
| Number | 変更前 | 変更後 |
| フィールド名 | Number | 宿泊人数 |
・部屋のグレード設定の編集
| フィールドの名前 | Select a choice | 部屋のグレード |
| Choice1(Text) | First choice | スタンダード |
| Choice1(Value) | First choice | 1 |
| Choice2(Text) | Second choice | ハイグレード |
| Choice2(Value) | Second choice | 1.5 |
| Choice3(Text) | Third choice | プレミアム |
| Choice3(Value) | Third choice | 2 |
「Text」が選択時の文字列を、「Value」が計算時の値を返します。宿泊費の計算時に、「スタンダード」を選択した場合は「1」を、「ハイグレード」を選択した場合は「1.5」を、「プレミアム」を選択した場合は「2」を返すように設定しました。
・オプションサービスの編集
| フィールドの名前 | Check All That Apply | オプションサービス |
| Choice1(Text) | First choice | 温泉入り放題 |
| Choice1(Value) | First choice | 1000 |
| Choice2(Text) | Second choice | 朝食サービス |
| Choice2(Value) | Second choice | 800 |
| Choice3(Text) | Third choice | 【削除】 |
| Choice3(Value) | Third choice | 【削除】 |
「Text」が選択時の文字列を、「Value」が計算時の値を返します。「Checkboxes」のフィールドは、「Dropdown」と違い、複数選択可能です。宿泊費の計算時に、「温泉入り放題」を選択した場合は「1000円」を、「朝食サービス」を選択した場合は「800円」を「500円」を計上するように設定しました。「Third Choice」は、右側の「－」のアイコンで削除しました。
・宿泊費総額の編集
| フィールドの名前 | Untitled | 宿泊費総額 |
| Set Equation | – | 下記参照 |
「Set Equation」内に計算式を記入します。各フィールドには「fieldname*」という値で登録されているため、これを計算式にあてはめていきます。関数も用意されていますが、知識がある人は手動で入力してもOKです。
各フィールドはそれぞれ、
fieldname1=チェックインの日付
fieldname2=チェックアウトの日付
fieldname3=宿泊人数
fieldname4=部屋のグレード
fieldname5=オプションサービス
となっています。
今回は最初に紹介した計算式にfieldnameをあてはめ、下記のような計算式を入力しました。
(((基本料金*部屋のグレード)+オプションサービス)*(チェックアウト日にち-チェックインの日にち))*宿泊人数=宿泊費総額
(((5000*fieldname4)+fieldname5)*(fieldname2-fieldname1))*fieldname3
全てのフィールドの設定が完了したら、一番下にある「Save Changes」をクリックします。
きちんと動作するか、「Save Changes」の隣にある「Preview」で確かめてみます。
まとめ
計算フォームや料金シミュレーターなどを設置できるプラグイン「Calculated Fields Form」を紹介しました。if関数を利用した計算式など、無料版でもかなり高度な計算フォームを作成できます。フォームの見た目が微妙なのでCSSで余白調整などが必要にはなりますが、機能性は捨てがたいものがあるので、よろしければご検討ください。
