料金・価格計算機能

選択または入力された値により、料金を計算するための機能です。

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

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された場合に価格計算されるようになります。

コメント欄