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

<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> 円

<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"> 円

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