投稿日：2024/10/25
ContactForm7に自動計算機能付きのお問い合わせフォームを実装する依頼を対応したので、備忘録として残しておきます。
自動計算機能付きのお問い合わせフォームとは下記のサイトのような、商品注文フォームで商品の個数を入力すると、個数とそれに付随した金額を計算して、合計金額を表示させるものです。
参考：https://www.wa-ogino.com/bento_form
合計金額と個数を入力した商品名は送信メール内に記述されます。
実装手順
各商品の入力欄を設置
商品の数だけ下記のような形でContactForm7のnumberで入力項目を追加します。
個数 [number bento1_1 class:bento_count]<span class="price" style="display: none;">2100</span> 個フォームのhtmlに合わせて、上記を入れてください。
[number bento1_1 class:bento_count]
nameとclassは任意です。
今回はお弁当のフォームなので、bento1_1やbento_countのようにしていますが、自由に変えて大丈夫です。
ただ、注意点として、nameは他の商品の同項目とは異なる値にしてください。
参考のように、連番にするといいです。
<span class="price" style="display: none;">2100</span>
上記spanは、合計金額の計算の際に使うので、フィールドの後ろに設置して、display: noneで消しておいてください。
spanタグの中には対象商品の金額を入れます。
注意点としては、ここに入れる金額はカンマ無しでいれてください。
フォーム内に合計金額項目の追加
フォーム内に合計金額の項目を追加します。
ここに合計金額が自動で表示されます。
下記のような項目をフォーム内に追加します。
<dt class="col span_4">お弁当注文合計金額</dt>
<dd class="col span_8">
[text* total-amount id:total_amount]
</dd>また、この合計金額フォームは入力不可にしたい（あくまで合計金額を表示するためのinput）ので、CSSで入力不可にしてください。
input[id="total_amount"] {
pointer-events: none;
}合計金額計算のスクリプト追加
フォームの下あたりに下記のスクリプトを追記します。
<script>
$(function() {
const total_amount = $("#total_amount");
$(".bento_count").on("change", function(e) {
let total = 0;
if($(this).val() < 0) {
$(this).val(0);
}
$(".bento_count").each(function() {
const count = $(this).val();
const price = Number($(this).parent().next(".price").text());
console.log(price);
if (!isNaN(count)) {
total += count * price;
}
});
total_amount.val(total.toLocaleString());
})
})
</script>bento_countの箇所などは適宜変更してください。
送信メールに注文した商品名と合計金額が表示されるようにする
送信メール内に例えば下記のように個数を入力した商品が表示されるようにする。
【ご注文商品】
弁当１[bento1]個
弁当２[bento2]個
弁当２[bento3]個
弁当２[bento4]個
お弁当注文合計金額
[total-amount]この際、メールの「空のメールタグを含む行を出力から除外する」にチェックを入れると、個数入力の無い商品はメールに表示されません。
同じように、合計金額もメールに表示されるようにしてください。