料金・価格計算機能／メールフォームプロCGI

料金・価格計算機能

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

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

＜div id="mfp_price"＞＜/div＞

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

＜input type="hidden" name="お支払い金額" id="mfp_price_element" /＞

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

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

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

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

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

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

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

例えば

＜select name="商品" id="item01" data-price="980" data-qty-element="hoge"＞

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

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

v4.3.2から各アイテムに税率を指定できるようになりました。

税込金額内の税率を指定する場合、data-priceのほかにdata-taxという属性を指定してください。data-taxで指定する値は税率です。8%の商品の場合はdata-tax="8"となります。

税額は税率毎に自動的に計算・集計されますが、誤差がでる場合は手動で税抜価格を設定することもできます。その場合はdata-net-priceを指定し、値を税抜価格としてください。

税額を表示する場合、表示したいオブジェクトのクラス名をmfp_tax_税率とすることで税額が表示されます。税率が8％の税額を表示したい場合、クラス名はmfp_tax_8となります。

税抜支払合計金額を表示させたい場合はオブジェクトのクラス名をmfp_tax_netとしてください。

inputタグに上記クラス名を付与することで、確認画面やメールに記載することができます。確認画面に表示させる場合はinputのtypeをtextにして、styleで非表示にするなどしてください。

詳細はデモ画面をご参照ください。