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

自動計算できる見積フォーム作成
(YouTube, AdSense, Play 公認エキスパート)
2015年02月26日 in Wordpress
記事内にPR・広告が含まれる場合があります

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を利用すれば、計算させた内容をメールで送信することもできる優れもの!ぜひ色々試してみてください。

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。