WordPressで見積もりフォームを作成できるCalculated Fields Formプラグイン
Calculated Fields Formプラグインを使うと、見積もりフォームのような動的なフォームをWordPressで作成することができます。会社で提供しているサービスのコースやオプションを選択すると合計金額が表示される、よく見かけるフォームです。
![見積もりフォームの制作例](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_12-42-32.png)
以下、Calculated Fields Formプラグインを使って見積もりフォームを作成する方法を紹介します。
この記事の内容
Calculated Fields Formプラグインの使い方
「プラグイン」‐「新規追加」メニューからCalculated Fields Formプラグインをインストール、有効化します。
![Calculated Fields Formプラグインのインストール](https://www.nishi2002.com/wp-content/uploads/2020/06/Calculated-Fields-Form.png)
使い方は、「Calculated Fields Form」メニューでフォームを作成し、任意の固定ページにショートコードをコピーペーストする流れです。
![Calculated Fields Formの設定画面](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_12-29-42.png)
すでにサンプルフォームが作成されているので、ショートコードを固定ページにペーストして動作を確認してみましょう。
![サンプルフォームのショートコードをコピー](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_12-34-27.png)
以下はショートコードブロックにコピペした例です。その他の方法でも大丈夫です。
![ショートコードをペースト](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_12-37-57.png)
ページを表示すると、フォームが表示されます。
![サンプルフォームの表示](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_12-40-10.png)
単純な計算フォームの例ですが、選択内容に応じて結果が切り替わり、見積もりフォームとしても機能しそうなイメージを持てると思います。
見積もりフォームの作成
続いて、簡単な見積もりフォームを作成してみましょう。サービスのコースとオプションを選択して料金の合計を表示するフォームです。仕上がりイメージは次のようになります。
![見積もりフォームの仕上がりイメージ](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_15-55-06.png)
新たなフォームを作成するため、「Calculated Fields Form」メニューを開いて「New Form」の「Item Name」にフォーム名(例:見積もりフォーム)を入力して「Add」をクリックします。
![フォームの新規追加](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-31-00.png)
追加されたフォーム一覧から「Settings」をクリックします。
![「Settings」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-33-37.png)
フォーム編集画面が開きます。画面左側のフィールドを選んで画面右側にレイアウトを組み立てる仕組みです。
![フォームの編集画面](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_15-29-15.png)
サンプルでNumberフィールドが配置されているので削除しましょう。
![「Number」を削除](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-40-47.png)
ここからフォーム作成の始まりです。
配置するフィールドは3つです。
- ラジオボタン(コース選択)
- チェックボックス(オプション選択)
- 計算フィールド(合計金額を表示)
コース選択(ラジオボタン)の配置
まずは、コースを選ぶため択一式のラジオボタン(Radio Buttons)をクリックします。クリックすると、画面右側のレイアウトに追加されます。
![コース選択の追加(ラジオボタン)](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-45-34.png)
配置したフィールドはドラッグアンドドロップで位置を移動できるので、上の方に移動しておきましょう。
![コース選択メニューを上に移動](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-50-24.png)
フィールドをクリックすると画面左側に設定画面が開くので、コースを設定しましょう。
![フィールド設定画面を開く](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_14-52-26-710x356.png)
いろいろ設定できますが、ここでは、ラベル・必須設定・コースの内容・項目の説明を設定します。
![コース選択フィールドの設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-33-20-589x710.png)
- ラベル --- 「コース選択」などと入力
- 必須 --- 必須項目の場合はチェック
- コースの内容 --- 左にコース名・右に料金を設定
- 項目の説明 --- 「コースを選択してください。」などと入力
コースの設定部分は次のとおりです。コース名と料金以外は任意です。
![コース料金の設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_15-10-53-710x436.png)
オプション選択(チェックボックス)の配置
続いて、複数選択可のオプションを追加するため、「Add a Field」タブからチェックボックス(Checkboxes)をクリックします。画面右側にチェックボックスが追加されるので、ドラッグアンドドロップしてコース選択の下に移動しておきましょう。
![オプション選択(チェックボックス)の追加](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_16-48-43.png)
追加されたチェックボックスをクリックして、画面左側の設定画面でオプション項目のラベル・オプション名・料金・説明を設定しましょう。
![オプション項目の設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-43-07-626x710.png)
合計金額(計算フィールド)の配置
コース料金とオプション料金の合計を計算フィールド(Calculated Field)に表示します。
「Add a Field」タブからCalculated Fieldを追加しますが、すでにサンプルでCalculated Fieldが含まれる場合は、それを使っても大丈夫です。
![合計金額(Calculated Field)の追加](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-13-14.png)
追加されたCalculated Fieldをクリックして、画面左側でラベル・合計金額(計算式)を設定します。
![合計金額の設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-07-22.png)
合計金額の計算式がわかりづらいので詳しく説明します。
考え方は、各フィールドの金額を合計するので最終的に「fieldname2+fieldname3」になります。
「fieldname2」や「fieldname3」は、ここまでに作成したコース選択(fieldname2)とオプション選択(fieldname3)のフィールド名です。これを使った計算式を入力します。
フィールド名は各フィールドの設定画面を見るとわかります。
たとえば、コース選択のラジオボタンをクリックすると、フィールド名はfieldname2だとわかります。
![フィールド名の確認](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-47-52.png)
同じようにオプション選択のフィールド名はfieldname3だとわかります。
![オプション選択のフィールド名](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-49-59.png)
見積もり金額の合計はコース料金+オプション料金なので計算式はfieldname2+fieldname3になります。
これをCalculated FieldのSet Equationに入力します。
![見積もり金額合計の計算式を入力](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-26-19.png)
フィールド名を調べて入力するのが面倒であれば、下のOperandsからフィールドを選んで「+」をクリックして組み立てることもできます。また、Operatorsから「+」や「-」などの演算子を選ぶこともできます。
![計算式の組み立て](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-52-09.png)
最終的に「fieldname2+fieldname3」を組み立てましょう。
あとは画面を下にスクロールして、金額に付加する「円」や3けたごとのカンマ(,)を設定すれば完成です。
![金額に付加する「円」やカンマを設定](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-59-59.png)
これで完成ですが動作確認の前に、サンプルで入っていたラベルを削除したりラベルを設定して整理しましょう。
![ラベルを整理してフォームが完成](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-44-58-710x380.png)
画面を下にスクロールして「Save Changes」ボタンをクリックすると完了です。
見積もりフォームの動作確認
フォームを動作確認するため、「Calculated Fields Form」メニューで見積もりフォームのショートコードをコピーします。
![フォームのショートコードをコピー](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-48-33.png)
任意の投稿または固定ページのショートコードブロックにペーストします。
![ショートコードをペースト](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_17-55-16.png)
ページを表示すると、見積もりフォームが表示されます。コースやオプションを選択すると、見積もり金額が切り替わります。
![見積もりフォームの表示](https://www.nishi2002.com/wp-content/uploads/2020/06/2020-06-30_21-55-35.png)
これで見積もりフォームのたたき台は完成です。あとは必要に応じてフィールドやデザインのカスタマイズなどに取り組んでください。
見積もりフォームのデザイン
テンプレートを選択する場合
見積もりフォームのデザインは「Form Settings」タブの「Form Template」から選択できます。
![フォームテンプレートの選択](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_12-36-06.png)
表示例は次のようになります。
![テンプレートを切り替えた例](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_12-42-32-436x710.png)
CSSを記述する場合
見積もりフォームにはクラス名が付いているので、CSSを使ってデザインをカスタマイズすることができます。以下、CSSの例を紹介します。
/* フォーム見出し */ #fbuilder .fform h2 { padding: 15px !important; } /* フォーム見出し説明 */ #fbuilder .fform h2 + span { margin-top: 10px; display: block; } /* ラベル */ .fields > label { font-weight: bold; font-size: 26px; color: #000; margin-top: 20px } /* 必須マーク */ span.r { color: red; } /* 項目の説明 */ span.uh { color: red; } /* 計算フィールド */ .cff-calculated-field .dfield input { background: none; color: red; font-size: 26px; font-weight: bold; border: none; box-shadow: none; }
表示結果は次のようになります。
![見積もりフォームのCSSカスタマイズ例](https://www.nishi2002.com/wp-content/uploads/2020/07/2020-07-01_15-55-06.png)
使用中のテーマによっては見た目が異なる場合があります。これはLightningの例です。ご注意ください。
まとめ
以上、Calculated Fields Formプラグインを使って見積もりフォームを作成する方法を説明しました。jQueryなどの難しいコードを書かずに設定画面で組み立てることができます。あとは、あなたのアイデア次第です。興味がある方は、ぜひお試しください。