料金・価格計算機能

選択または入力された値により、料金を計算するための機能です。メールフォームで価格計算をさせたり、自動見積りっぽいことをさせたり、ショッピング機能的な使い方をしたい場合に便利です。

簡易的な見積もりや注文フォームとしてご利用いただける機能です。
料金計算のデモはデモページをご参照ください。
利用方法は以下のとおりです。

01.価格表示用のタグをセットする

<div id="mfp_price"></div>

上記のタグを価格を表示させたい部分にセットしてください。

02.価格受け渡し用のタグをセットする

<input type="hidden" name="お支払い金額" id="mfp_price_element" />

上記のようなタグを<form>~</form>内の何処かにセットしてください。確認画面で表示される順番にも影響がありますので、お好きな場所にセットしていただいて結構です。お支払い金額の部分はお好きな文字列をセットしてください。

03.商品と価格の設定

商品項目にしたいselectタグ、textタグ、numberタグ、radioタグ、checkboxタグにdata-price="単価"とid属性を指定してください。id属性は商品IDとしても利用されるため、必ず設定してください。

selectタグ、textタグ、numberタグの場合は入力・選択された数値が数量として認識され、checkbox、radioの場合は数量1としてカウントされます。

v4.2.0からoptionタグに対応

メールフォームプロ4.2.0からoptionタグを1つの商品として扱えるようにアップデートしました。

<option value="有償サポート" id="support1" data-price="9800">有償サポート/9,800円</option>

というように記述することで、該当のoptionがselectedされた場合に価格計算されるようになります。

v4.3.0からもう少し複雑な計算ができるようになりました

v4.3.0からさらに任意の数量をかけ合わせるというようなことができるようになりました。

例えば

<select name="商品" id="item01" data-price="980" data-qty-element="hoge">

という商品があったとして、selectで数量を選ぶとします。それとは別に

<input type="number" name="人数" id="hoge">という入力欄があった場合、商品の価格が人数のエレメントで入力された数値で乗算されます。これによりちょっとフォームがスッキリしたり複雑な計算ができるようになります。

コメント欄

2021-01-22 17:32:00るーぷ太郎さん
商品が4点あり商品全体で購入数が2点以上でないと送信できなくなる設定などできますでしょうか。
2021-01-22 19:41:20和田憲幸さん
標準の機能で実現するのは難しいですが、Javascriptでカスタマイズすることである程度そのようなことを行うことはできます。結構Javascriptの知識が必要になります。
2021-03-04 16:39:24セルフさん
入力内容が維持される状態でリロードされた際の挙動なのですが、
価格表示・受け渡しタグの合計値が0になってしまいますが、リロード時に自動で再計算させることは可能でしょうか。
2021-03-05 08:15:33和田憲幸さん
> セルフさま
リロードした際に自動で再計算されない感じなのですね。こちらですがお問合せフォーム的なものから一度ご連絡いただくことは可能でしょうか?
2022-09-06 14:32:50よしおさん
お世話になっております。
合計金額の箇所ですが、円がデフォルトで表示されておりますが、こちらを別の単位に変更したい場合を教
えてください。

2022-09-06 15:30:59和田さん
/mailformpro/configs/lang.ja.js
というファイル内にそれっぽい設定がございます。
2022-09-07 11:27:36よしおさん
和田さん
ありがとうございました。