iscle [イズクル] - あなたの生活に役立つネタを!

金額が自動計算される見積フォームの作り方(無料!)

竹中文人
執筆者:
[最終更新日]2015/02/26
[カテゴリ]Wordpress

自動計算できる見積フォーム作成

Webサイトで商品やサービスの購入を検討する際、事前にだいたいの見積額が計算できるとユーザーにとって安心です。実際に商品の注文をするにしても、単純にメールフォームで商品数を記入して申し込むより、支払うべき価格が表示された方が分かりやすいでしょう。

しかし普通のメールフォームで、金額が自動計算される見積フォームを作るのは難しいです。少なくともプログラムがよく分からない方にとって、計算機能まで実装するのは困難でしょう。ところが、入力する内容に応じて自動計算されるフォームを簡単に作成できるWordPressのプラグインがあります。これを利用すれば立派な見積フォームが楽々作成可能です。

Jazzy Formsで見積フォーム作成

WordPressのプラグインの新規追加から『Jazzy Forms』を検索・インストールしましょう。
mitsumori01

左メニューにFormsという項目が追加されるので選択します。設定画面に入ると左側にパーツがいくつかあると思いますので、必要なものを右側にドラッグして使います。
mitsumori02

今回は『スマホX(16GB/32GB/64GB)』という商品を○個購入した時の見積を表示するフォームを作成します。
mitsumori03
●title:ページ上に表示されるタイトル。
●ID:英数のみで、あとで計算式に利用します。
●Dehuault Title:ページに表示されるテキスト。
●Value:金額計算に使う数字を入れます。(金額や個数)

合計値など計算結果の数値を表示するにはOutputの項目を使います。
mitsumori04

「Formula」の部分にエクセルで利用するような計算式を入れます。今回だと「smart * kazu」です。
mitsumori05
[スマホX で選択したもの]×[個数で選択した数]という計算になります。さらに[*1.08]を入れて消費税も含めた金額で計算させます。

サイトに表示させる

項目の設定が完了したらSaveをクリックして保存します。Generalタブの「Shortcode」をコピーして、フォームを表示させたいページに貼り付けてください。
mitsumori06

このようなフォームが完成します!
mitsumori07

今回はかなりシンプルな内容で作成しましたが、使い方によってはとても便利なフォームを作成することが可能です。Email Buttonを利用すれば、計算させた内容をメールで送信することもできる優れもの!ぜひ色々試してみてください。