フォームを使って自動で合計金額を計算する方法【Contact Form 7、Calculation for Contact Form 7】

この記事では、Contact Form 7 と Calculation for Contact Form 7 を使って、フォーム内で「りんご」「みかん」などの購入数量を入力し、自動で合計金額を計算する方法を紹介します。
プラグインを組み合わせることで、見積もり・注文フォームを簡単に作成できます。

1 実装のポイント

• Contact Form 7 で通常の入力フォームを作成
• Calculation for Contact Form 7 プラグインで自動計算を実現
• 税金や数量など、任意の数式を設定可能

2 フォームHTMLコード

<p>◆ご注文内容<span class="required waku10">必須</span><br>
A りんご１箱 10kg<br class="hidden spBlock">（税別）5,000円<br>
[number number-1 min:0 class:number-short ""] 箱<br>

B みかん１箱 3kg<br class="hidden spBlock">（税別）4,500円<br>
[number number-2 min:0 class:number-short ""] 箱</p>

<div class="waku1_ccc">
<p>消費税込み合計<br>
[calculator calculator-1 "(5000*number-1+4500*number-2)*1.1"] 円（<span class="color-f00">消費税込</span>）<br>
※こちらの金額をお振込みください。</p>
</div>

3 汎用CSS

/* -----------------------------------
 * Contact Form 7 数値入力＋計算フォーム用
 * ----------------------------------- */

/* 数値入力欄の横幅を調整 */
.number-short { /* フィールドの幅を狭く設定 */
  width: 80px; /* 横幅80px */
  text-align: right; /* 右寄せで数字を見やすく */
}

/* 合計金額枠 */
.waku1_ccc { /* 合計金額全体のボックス */
  border: 1px solid #ccc; /* 枠線を薄いグレーに */
  padding: 10px; /* 内側余白を確保 */
  margin-top: 15px; /* 上余白を設定 */
  background: #fafafa; /* 薄いグレー背景 */
}

/* 強調テキスト */
.color-f00 { /* 赤文字強調 */
  color: #e60000; /* 濃い赤で注意を引く */
}

4 完成イメージ

5 代用プラグイン

Calculation for Contact Form 7 は便利ですが、もし動作が不安定な場合は次の代替も検討できます。

• Cost Calculator Builder – ビジュアル計算フォームを構築可能
• Cost Calculator for Contact Form 7 - Price Calculation – Calculation for Contact Form 7と同様の機能
• CF7 Smart Grid Design Extension – レイアウトを見やすく整える

6 まとめ

Contact Form 7 に Calculation for Contact Form 7 を追加することで、
商品数 × 単価 × 消費税などのリアルタイム計算フォームを手軽に実装できます。
プラグイン不要で実装したい場合も、JavaScriptで同様の構成を再現可能です。
有料版にすると複数個の数値入力フィールド（Number Input Field）が設置できたり、数字にカンマを付けられます。
無料の計算プラグインを複数使うと、複数個の複数個の数値入力フィールド（Number Input Field）が設置可能です。