Contact Form 7 Cost Calculatorプラグインを使用して、エステサロンなどの予約フォームを自動計算する方法を紹介します。このプラグインを使用すると、料金やサービスの選択肢に応じて、自動で合計金額を計算するフォームを簡単に作成できます。
プラグインのインストールと有効化
- WordPressの管理画面にログインします。
- 左側のメニューから「プラグイン」を選択し、「新規追加」をクリックします。
- 検索バーに「Contact Form 7 Cost Calculator」と入力して検索します。
- プラグインが表示されたら「今すぐインストール」をクリックし、インストールを行います。
- インストールが完了したら、「有効化」をクリックしてプラグインを有効化します。
![](https://eguweb.jp/wp-content/uploads/202406062340No-00.jpg)
予約フォームの作成
左側のメニューから「Contact」→「新規追加」を選択します。
checkboxes pricer|radio buttons price|drop-down menu price|Calculator|Number Format
といった項目が追加されています。
必要なフォーム項目を追加します。
![](https://eguweb.jp/wp-content/uploads/202406070008No-00-1024x462.jpg)
例えば、サービスの選択、オプションなどを追加します。
[checkbox_custom checkbox_main "5000|メインプランA: 60分" "7000|メインプランB: 90分" "9000|メインプランC: 120分"]
[checkbox_custom checkbox_option1 "2000|オプション: フェイシャルマッサージ" "3000|オプション: ヘッドスパ"]
[checkbox_custom checkbox_option2 "1000|アフターケア: 保湿ケア" "1500|アフターケア: 美白ケア" "2000|アフターケア: リラックスマッサージ"]
これにより、以下のように3段階の選択肢を顧客に提供できます。
- メインプランA、B、Cから1つ選択
- オプション(フェイシャルマッサージ、ヘッドスパ)を任意で追加
- アフターケア(保湿ケア、美白ケア、リラックスマッサージ)を任意で追加
![](https://eguweb.jp/wp-content/uploads/202406070204No-00.jpg)
Calculator
メニューから「Calculator」を選択します。
![](https://eguweb.jp/wp-content/uploads/202406070155No-00-1024x774.jpg)
必要なフォーム項目を追加します。
例えば、サービスの選択、オプションの入力などを追加します。
![](https://eguweb.jp/wp-content/uploads/202406070157No-00.jpg)
チェックボックスを選択すると、チェックをする毎に、下に各プランの合計金額が表示されます。
![](https://eguweb.jp/wp-content/uploads/202406070205No-00-1024x371.jpg)
このCalculatorフィールドには、Hide Fieldの設定もあるので、例えばメール送信時のみ、自動返信で見積もりの結果をお送りする、といった便利な方法もできそうです。
![](https://eguweb.jp/wp-content/uploads/202406070206No-00.jpg)
まとめ
Contact Form 7プラグインを使用して、エステサロン向けの注文フォームを簡単に作成する方法を紹介しました。この方法で、顧客は自分のニーズに合わせたプランをカスタマイズできます。
この方法を参考にして、自分のサイトに適した注文フォームを作成してみてください。