Contact Form 7をContact Form Seven 7 Cost Calculatorを使って見積りフォームにするメモ

   

ContactForm7に「Contact Form Seven 7 Cost Calculator」を使って
見積もりなどができるように拡張する機能を設けるメモ。

Contact Form Seven 7 Cost Calculatorプラグイン

Contact Form Seven 7 Cost Calculator

Contact Form Seven 7 Cost Calculatorプラグインの特徴

使いやすさとしてプラグイン配布ページでは

すべての数式をサポート
自動的に計算されたフィールドによるフォームの作成
マルチトータルフィールド
ラジオの価格フィールドを追加する
チェックボックスの価格フィールドを追加
選択価格フィールドを追加
クロスブラウザの互換性
カスタムフォーマットの合計フィールド
ファイナンス電卓
見積書計算機
予約コスト計算機
1つまたは複数の計算フィールドを追加する
計算フィールドを非表示にしてメールのみを送信
ワンクリックインポートのデモ

が特徴として挙げられている。

お問い合わせフォーム編集画面ではカスタムボタンが追加されているのが分かる。
「checkboxes Custom」、「radio buttons Custom」、「drop-down menu custom」、「Calculated」
フォームをチェックボタンやラジオボタン、ドロップメニューボタンなどを使って作成する。
Calculatedは最後の計算のフォーム(ラベル)を作る用。

Pro版もある

合計値が複数だせるよ、とかそういうオプションがあるみたい。詳しくはググって。

計算式

https://codecanyon.net/item/contact-form-7-cost-calculator-price-calculation/20085516
四則演算のほかにもいろいろ計算できるようなのでチェックしてみるのがいいかも。

見積の表示の価格は税抜価格にしたいが合計は税込価格で出したい

当記事は見積フォームの表示の価格は税抜価格にしたいが合計金額は税込価格で出したいという相談をもらったのでググったメモ。

画面サンプル


計算サンプルとしてこういう簡易フォームを作ってみた。

商品選択フォーム


コートの例。コートにチェックを入れて数を選択する。数選択の方では最小数、最大数も設定できるのでコートは10着までしか買えない場合などはmax:10とかを入れておくと良い。

計算フォーム

「Calculated」をクリックし作成する。
2018年10月現在、日本の消費税は8%なので、合計金額を税込価格で出す為には、商品の金額×1.08が必要。

Type Inputでテキストフォーム表示にするかしないかを選択できる。
テキストフォーム表示にしない場合はテキストフォームがdisplay:none;で消えて文字として別表示してくれるんだけど説明上手くないから実際に確認してほしい。
またHideFieldで合計金額を出さない(非表示)にすることもできるので必要ならチェックを入れる。

Set Equationの箇所で計算式を設定する。フォームの下に例があるのでそちらも参考になるかも。

[calculated calculated-383 cf7-label id:test class:test "(item1*no1+item2*no2+item3*no3)*1.08"]

(コート×購入数+アウター×購入数+シャツ×購入数)×消費税

結果


こんな感じ。

四捨五入してほしい


スーツのときなんかはもう数字が少数点以下を四捨五入してほしいので(6652円ではなく6653円として表示されてほしい)
四捨五入ができないかといろいろググったところ管理人さんが「できるよ!」と答えているフォーラムには辿りつくものの、やり方が書いてないページが多かったのでなかなか苦労した…。

[calculated calculated-383 cf7-label id:test class:test "(item1*no1+item2*no2+item3*no3)*1.08"]

こういう計算式だったものを

[calculated calculated-383 cf7-label id:test class:test "Math.round((item1*no1+item2*no2+item3*no3)*1.08)"]


上記の計算式のようにMath.round()で囲ってあげることで今回解決した。

Math.round() 関数

Math.round() 関数は、引数として与えた数を四捨五入して、もっとも近似の整数を返します。
Math.round()

ただし上の例では、浮動小数点数の計算に起因する四捨五入の誤差が生じます。1.005 の四捨五入で予測される結果は 1.01 ですが、戻る値は 1 です。
提案された解決策として、よりよい解決策 の章をご覧ください。

誤差が生じるような場合は上記のような解決策などを用いてカスタマイズしてください。

0

 - WordPress