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

2025年10月31日 最終更新日時 : 2026年8月14日 login_user
目次

Contact Form 7で注文フォームや簡易見積もりフォームを作るとき、「数量 × 単価」を自動計算して合計金額を表示したいことがあります。この記事では、Contact Form 7 と Calculation For Contact Form 7 を組み合わせて、りんご・みかんの注文数量から税込合計金額をリアルタイムで計算する方法を紹介します。

今回の例では、通常の飲食料品として販売する「りんご」「みかん」を使用するため、消費税は軽減税率の8％で計算します。また、数量が両方とも0のまま送信されないよう、Contact Form 7のカスタムバリデーションも追加します。

1 使用するプラグイン

  • Contact Form 7：フォーム本体を作成
  • Calculation For Contact Form 7：フォーム内の数値を使った自動計算を追加

Calculation For Contact Form 7では、フォーム内の入力値を使って、足し算・引き算・掛け算・割り算などの計算式を設定できます。数量を変更すると、ページを再読み込みせずに計算結果を更新できます。

2 今回作る計算フォーム

次の2商品を注文する例で作成します。

  • りんご1箱 10kg：税抜5,000円
  • みかん1箱 3kg：税抜4,500円

通常の飲食料品として販売する場合は軽減税率8％の対象になるため、税込価格はそれぞれ次のようになります。

  • りんご：5,400円（税込）
  • みかん：4,860円（税込）

計算式は次のようになります。

（5,000円 × りんごの数量 ＋ 4,500円 × みかんの数量）× 1.08

3 Contact Form 7のフォームコード

Contact Form 7の「フォーム」欄に、次のように入力します。

<p>
◆ご注文内容
<span class="required waku10">いずれか1箱以上</span>
</p>

<p>
<strong>A りんご 1箱 10kg</strong><br>
5,400円（税込）／税抜5,000円<br>
[number apple_qty min:0 step:1 class:number-short "0"] 箱
</p>

<p>
<strong>B みかん 1箱 3kg</strong><br>
4,860円（税込）／税抜4,500円<br>
[number orange_qty min:0 step:1 class:number-short "0"] 箱
</p>

<div class="waku1_ccc">
<p>
<strong>消費税込み合計</strong><br>
[calculator total_amount "(5000*apple_qty+4500*orange_qty)*1.08"] 円
<br>
<span class="color-f00">消費税8％込み</span>
</p>
</div>

4 数値入力欄の意味

りんごの数量入力欄は次の部分です。

[number apple_qty min:0 step:1 class:number-short "0"]

それぞれの指定には次の意味があります。

  • number：数値入力フィールド
  • apple_qty：フィールド名
  • min:0：0未満を入力不可にする
  • step:1：1箱単位で入力する
  • class:number-short：CSS用のクラス名
  • "0"：初期値を0にする

みかんも同じ考え方で、フィールド名だけ orange_qty にしています。

5 number*を使わない理由

Contact Form 7では、必須の数値入力欄を作る場合は number* を使用できます。

[number* apple_qty]

しかし今回の注文フォームでは、「りんごだけ注文」「みかんだけ注文」「両方注文」のすべてを許可したいため、両方を必須項目にはできません。

そこで各入力欄は通常の number にして、2商品の合計数量が1箱以上になっているかを別途バリデーションで確認します。

6 0箱のまま送信されないようにする

フォームコードだけでは、次の状態でも数値としては有効です。

りんご：0箱
みかん：0箱

これでは注文内容がないままフォームを送信できてしまいます。そこでContact Form 7のカスタムバリデーションを追加し、どちらか1商品以上が入力されていることをサーバー側でも確認します。

7 functions.phpにバリデーションを追加

Lightningなどの子テーマを使用している場合は、子テーマの functions.php に次のコードを追加します。

/**
 * Contact Form 7
 * りんご・みかんのどちらか1箱以上を必須にする
 */
add_filter(
	'wpcf7_validate_number',
	'wpt_validate_fruit_order_quantity',
	20,
	2
);

function wpt_validate_fruit_order_quantity( $result, $tag ) {

	/*
	 * apple_qty の検証時だけ、
	 * 2項目をまとめて確認する。
	 */
	if ( 'apple_qty' !== $tag->name ) {
		return $result;
	}

	$apple_qty = isset( $_POST['apple_qty'] )
		? (int) wp_unslash( $_POST['apple_qty'] )
		: 0;

	$orange_qty = isset( $_POST['orange_qty'] )
		? (int) wp_unslash( $_POST['orange_qty'] )
		: 0;

	if ( $apple_qty + $orange_qty < 1 ) {
		$result->invalidate(
			$tag,
			'りんご・みかんのいずれかを1箱以上入力してください。'
		);
	}

	return $result;
}

これで、りんご・みかんの両方が0箱の場合は送信できず、エラーメッセージが表示されます。

8 なぜJavaScriptだけでなくサーバー側でも確認するの？

ブラウザ上の入力チェックだけでは、HTMLやJavaScriptを書き換えて送信される可能性があります。Contact Form 7のカスタムバリデーションを使用すると、フォーム送信時にWordPress側でも数量を確認できます。

今回のコードでは「どちらか1箱以上」という注文条件をサーバー側で確認しています。

9 Calculation For Contact Form 7の計算式

合計金額を表示しているのは次の部分です。

[calculator total_amount "(5000*apple_qty+4500*orange_qty)*1.08"]

この式では、まず税抜価格の合計を計算します。

5,000 × りんご数量
＋
4,500 × みかん数量

その合計へ 1.08 を掛けて、消費税8％込みの金額を表示しています。

10 計算例

たとえば、りんご2箱・みかん1箱を注文するとします。

りんご
5,000円 × 2箱
＝ 10,000円

みかん
4,500円 × 1箱
＝ 4,500円

税抜合計
14,500円

税込合計
14,500円 × 1.08
＝ 15,660円

フォーム上の合計金額にも 15,660円 と表示されます。

11 りんご・みかんはなぜ消費税8％？

日本の消費税では標準税率10％とは別に軽減税率8％があり、酒類や外食を除く飲食料品の販売などが軽減税率の対象です。そのため、今回のように通常の商品としてりんご・みかんを販売する例では8％で計算しています。

一方、計算フォームで扱う商品やサービスが標準税率10％の対象であれば、計算式は次のようになります。

[calculator total_amount "(単価×数量)*1.1"]

実際に使用する際は、販売する商品・サービスに適用される税率を確認して設定してください。

12 消費税の端数が発生する場合

今回の5,000円・4,500円という価格では8％を掛けても1円未満の端数は発生しません。しかし商品価格によっては税込計算時に小数が発生する場合があります。

Calculation For Contact Form 7では、ROUND、FLOOR、CEIL などの計算関数も利用できます。

たとえば四捨五入する場合は、次のような計算式を使用できます。

[calculator total_amount "ROUND((5000*apple_qty+4500*orange_qty)*1.08)"]

ただし、実際の請求書・インボイスなどに使用する場合は、自社の端数処理方法に合わせて設定してください。適格請求書に記載する消費税額等に1円未満の端数が発生する場合は、税率ごとに1回の端数処理を行います。

13 消費者向け価格は税込価格も分かるようにする

今回のフォームでは、商品価格を次のように表示しています。

5,400円（税込）／税抜5,000円

消費者向けに価格をあらかじめ表示する場合は、税込価格が分かる表示にしておくことが重要です。税抜価格も併記できますが、税込価格を確認できるようにしておきましょう。

14 計算結果はリアルタイムで更新される

Calculation For Contact Form 7を利用すると、数量入力欄の値に応じて計算フィールドが更新されます。Contact Form 7標準には「確認画面」はないため、「確認画面で計算される」のではなく、フォーム上で数量を変更すると計算結果が更新されると考えると分かりやすいです。

15 CSSで数値入力欄と合計金額を整える

数値入力欄をコンパクトにし、合計金額を見やすくする場合は次のCSSを使用できます。

/* =========================================================
	Contact Form 7
	数量入力・計算フォーム
========================================================= */

.wpcf7 .number-short {
	width: 80px;
	max-width: 100%;
	text-align: right;
	box-sizing: border-box;
}

.wpcf7 .waku1_ccc {
	margin-top: 15px;
	padding: 15px;
	border: 1px solid #ccc;
	background: #fafafa;
}

.wpcf7 .waku1_ccc p {
	margin: 0;
}

.wpcf7 .color-f00 {
	color: #e60000;
}

.wpcf7 .required {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: 3px;
	background: #e60000;
	color: #fff;
	font-size: 0.8em;
}

.wpcf7 の中だけに適用することで、サイト内の他の数値入力欄やボックスへ影響しにくくしています。

16 CSSが効かないとき

CSSが反映されないからといって、最初から !important を付ける必要はありません。まずブラウザの開発者ツールで、どのCSSが適用されているか確認します。

たとえば、テーマ側のCSSに詳細度で負けている場合は、次のようにContact Form 7内へ対象を限定することで上書きできる場合があります。

.wpcf7 input.number-short {
	width: 80px;
}

それでもテーマ側に !important が指定されているなど、通常のCSSでは上書きできないことを確認した場合だけ、必要なプロパティへ限定して !important を使用します。

17 Number Input Fieldは無料版でも複数設置できる

Contact Form 7の number フィールドは、Calculation For Contact Form 7の有料版専用機能ではありません。Contact Form 7標準の数値入力フィールドなので、次のように複数設置できます。

[number product_1]
[number product_2]
[number product_3]
[number product_4]

したがって、「有料版にしないと複数のNumber Input Fieldを使えない」ということではありません。

18 Calculation For Contact Form 7のPro機能について

Calculation For Contact Form 7のPro版には、複数のTotalフィールドや表示用のPrefix、数値フォーマット、桁区切りなど、無料版にはない追加機能があります。

数値入力欄そのものを複数設置するためにPro版が必要なわけではないため、必要な機能を確認してからFree版・Pro版を選びましょう。

19 無料の計算プラグインを複数入れる必要はない

数値入力欄を増やす目的で、複数の計算系プラグインを同時にインストールする必要はありません。Contact Form 7では数値フィールドを複数作成できます。

似た機能を持つアドオンを複数有効にすると、JavaScriptやフォームタグなどの競合が発生した場合に原因を特定しにくくなります。現在使用している計算プラグインで必要な機能を実現できるのであれば、構成を増やさない方が管理しやすくなります。

20 実際の注文・請求に利用する場合の注意

今回の計算フォームは、ブラウザ上で数量に応じた金額を表示するには便利です。ただし、ブラウザ上に表示された計算結果だけを最終的な請求金額として無条件に信用するのは避けた方が安全です。

利用者側ではブラウザのHTMLやJavaScript、送信値などを変更できる可能性があります。高額な注文、オンライン決済、在庫管理などを伴う本格的な販売システムでは、サーバー側でも商品単価と数量から金額を再計算し、正式な請求金額を決定する仕組みを使用してください。

Contact Form 7と計算アドオンは、簡易見積もりや注文受付には便利ですが、WooCommerceなどのECシステムと同じような決済・注文管理機能を持つものではありません。

21 「この金額をお振込みください」と表示する場合

フォーム上に、

※こちらの金額をお振込みください。

と表示する場合は特に注意が必要です。実際の振込金額として利用するのであれば、送信された数量と商品単価から管理者側でも金額を確認し、フォーム上の計算結果と一致していることを確認する運用が安全です。

22 代替プラグイン

Calculation For Contact Form 7以外の方法を検討したい場合は、現在も次のような計算フォーム用プラグインがあります。

  • Cost Calculator for Contact Form 7 – Price Calculator Free：Contact Form 7へ計算フィールドを追加できるアドオン
  • Cost Calculator Builder：Contact Form 7とは別に、ドラッグ＆ドロップで見積もり・料金計算フォームを作成できるプラグイン

「現在のプラグインが不安定だから変更する」という意味ではなく、必要な計算方法や管理画面の使いやすさなどに応じた代替候補として比較するとよいでしょう。

23 まとめ

Contact Form 7とCalculation For Contact Form 7を組み合わせると、数量と単価から合計金額を自動計算する簡易見積もり・注文フォームを作成できます。Calculation For Contact Form 7では、足し算・掛け算などを含む計算式を設定でき、入力内容に応じて計算結果を更新できます。

  • Contact Form 7の number フィールドは複数設置できる
  • min:0 や step:1 で数量入力を制御できる
  • どちらか1商品以上を必須にする場合はカスタムバリデーションを使用する
  • りんご・みかんなど通常の飲食料品販売では軽減税率8％を確認する
  • Calculation For Contact Form 7で数量×単価×税率を計算できる
  • 端数が発生する場合は実際の端数処理ルールに合わせる
  • CSSはContact Form 7内へ適用範囲を限定する
  • 複数のNumber Input Fieldを使うためにPro版は必須ではない
  • 似た計算プラグインを複数入れる必要はない
  • 正式な請求・決済ではサーバー側でも金額を確認する

簡易的な見積もりフォームとしては便利な方法ですが、実際の商品販売に使用する場合は、適用税率・端数処理・最終請求金額の確認まで含めて運用してください。

23.1 関連記事

この記事を読んだ人はこちらも読んでいます

カテゴリー
Contact Form 7、おすすめプラグイン
タグ
前の記事
ul・liタグで美しいリストデザインを作る方法
2025年10月30日
次の記事
WordPressでCookie同意バナーを自作する方法｜GA4を同意後に読み込む安全な実装例
2025年11月1日