自動見積もりと、その内容で申し込みできるフォームを作る手順【事例あり】

手ぶらでBBQサービスを提供されている 勝っちゃんの手ぶらでBBQ 様の、自動計算で見積もりとその内容で申し込みできるフォームを設置させていただきました。

既存のWordpressに、プラグインではなくPHPで組んでみました!

全体の仕様

STEP1
プランごとの単価と、入力した人数をかけ算して、プラン合計に出力する
※人数は4人以上じゃなければ申し込み不可
STEP2
オプションごとに単価×数量=金額をだして、オプション合計に合計金額を出力する
STEP3
STEP1とSTEP2の内容をそのまま申し込みするためのフォーム。
フォーム自体は「PHP工房様のMailForm01」と、Googleカレンダーを使用しています。

細かく全部書くと、とっても長くなるので、ある程度の知識があることを前提に書いています(すみません…!)

下準備

今回は、専用の固定ページに設置したい、編集もそのphpファイルで編集していけるように
・「page-○○.php」を作ってアップロード(それに合わせた固定ページも作る)
「PHP工房様のMailForm01」をダウンロードして、設定項目を編集してFTPから「wp-content/themes/テーマフォルダ/keisan(好きなフォルダを作成)」して、ファイルをアップロードしておく

STEP1

<script>
document.addEventListener('change',function(e){
var t=e.target;
if(t.nodeName=="INPUT" ||t.nodeName=="SELECT"){
var num=1;
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="people_plan_total") continue;
if((f[i].type=="number" ||f[i].type=="radio") && f[i].checked ||f[i].type=="number") num*=parseInt(f[i].value);
}
f.elements["people_plan_total"].value=num;
}
});
</script>
<input type="radio" name="plan" value="金額" checked>プラン1
<input type="radio" name="plan" value="金額">プラン2
<input type="radio" name="plan" value="金額">プラン3
人数 <input type="number" name="people" value="0" step="1" min="4" max="500" placeholder="人数" pattern="\d*">
合計 <input type="text" name="people_plan_total" value="0" readonly> 円

名前などはわかりやすいものに変更してください。

STEP2

<script type="text/javascript">
<!--
function keisan(){
	// 設定開始
	// 商品1
	var list1 = document.form1.option1.selectedIndex * 10000; // 単価を設定
	document.form1.option1_price.value = list1; // 小計を表示
	// 商品2
	var list2 = document.form1.option2.selectedIndex * 5000; // 単価を設定
	document.form1.option2_price.value = list2; // 小計を表示
	// 合計を計算
	var total = list1 + list2;
	// 設定終了
	document.form1.option_total.value = total; // 合計を表示
}
</script> 
<select name="option1" onChange="keisan()">
<option value="オプション名前 数量:0">0</option>
<option value="オプション名前 数量:1">1</option>
<option value="オプション名前 数量:2">2</option>
<option value="オプション名前 数量:3">3</option>
<option value="オプション名前 数量:4">4</option>
<option value="オプション名前 数量:5">5</option>
</select>
<select name="option2" onChange="keisan()">
<option value="オプション名前 数量:0">0</option>
<option value="オプション名前 数量:1">1</option>
<option value="オプション名前 数量:2">2</option>
<option value="オプション名前 数量:3">3</option>
<option value="オプション名前 数量:4">4</option>
<option value="オプション名前 数量:5">5</option>
</select>
オプション合計 <input type="text" name="option_total" size="8" value="0"> 円

増やしたいオプションの分だけ、listとoptionを増やしてください。

STEP3

このメールフォームの部分は、先にダウンロードしたMailForm01の設定とあわせて、項目を作ります。

<form method="post" action="<?php echo get_template_directory_uri(); ?>/keisan/mail.php" name="form1">
STEP1、STEP2のHTMLと、STEP3のフォームを記載する
</form>

見積もりだけのプラグイン、注文/申し込みのプラグインそれぞれはあっても、見積もりしてそのまま注文/申し込みできるプラグインがなく(あるにはあったものの、条件が合わず)今回はがっつりと組んで実装してみました。
実際のページは 勝っちゃんの手ぶらでBBQ 様のサイトでご確認ください。

久しぶりにプログラムで頭うんうん捻らせました…!同じことで悩まれてた方はどうぞ参考にしてください。
この記事を書いている人
Picture of WEBデザイナー 小谷 優歌
WEBデザイナー 小谷 優歌
WEBデザイナーとして20年、中小企業を中心に年間80件近くのサイト制作・改善を行う。サイト制作にとどまらず、商工会でのセミナー講師や、中小企業へIT顧問・専門家として技術アドバイスを提供。 デザイン制作だけでなく「WEBやITを使って問題を解決したい」「結果を重視して取り組みたい方」へのウェブ活用のサポートを専門としている。