• Calculated Fields Formで自動見積もり機能を作成。複雑な料金表でもOK。

    Programming

    Calculated Fields Form

    Listen & Subscribe

    「とあるウェブサイトに自動で見積もりを出す機能を追加したいという要望を受け、Calculated Fields Formというプラグインを導入してみたけれど、使い方がよくわからない」

    料金表が非常に複雑で、単純な計算式で処理することができないような状態」

    こんな問題にぶち当たりました。

    例えば下記のようなパターン。

    Calculated Fields Form

    こちらはとあるペット火葬会社さんの料金表。

    各プランとペットの大きさが複雑に交わり、単純にこのプランは幾らで、大きさが何Kg以下なら幾らで、という単純計算では成り立ってない様子。

    よく見ると色々細かい方式があるのかもしれないが、数学が得意じゃないのでパッと見で判断することは不可能。

    つまり、プランと大きさの値段を設定しただけで自動見積もりフォームを実装するのは不可能ということ。

    じゃあどうしよう。

    そうだ。

    苦手な計算は諦めて、プランとペットの大きさを直接紐づけることができればOK。

    「このプランとこの大きさが選択された場合はこの数字が出る」みたいな。

    ボリューム的に長くなりそうだが、苦手な算数で悩んでる時間はない。

    というわけで、こんな時にCalculated Fields Formを使って自動お見積もり機能を作成するにはどうしたらいいのか。

    まずは基本設定の方法から簡単に解説していきます。

    WEB制作の依頼はこちらから

    New FormでFormを作成

    まずはForm作りからです。

    下記入力欄に任意のフォーム名を入れてCreate Formを押します。

    Add Form

    スポンサーリンク

    タイトルを付け、既存のFieldは削除してOK

    すると右側にCalculated Formっていう文字が出てきますが、これはタイトルになる部分なので、さっさと任意のものに変えるといいです。

    下にはすでにいくつかのfieldがありますが、これはまず消しちゃってOKです。

    この部分で項目と値を決めます。

    例えば、スタンダードプラン→ 5,000円、プレミアムプラン→ 10,000円とかこの部分で決めます。

    Calculated Form

    上の画像の左側にあるのが、どんなfieldにするかのタイプを選ぶやつです。

    例えばカレンダーとか、チェックボタンとか、内訳表示とか。

    Hiddenというボタンがあって、それを選ぶとルールは作れるけどサイトに表示させないこともできる。

    この辺はちょい中級者向けという事で、他にもいろんなパターンを生成するボタンがあるのですが、実際どれがどんな使い勝手なのか、私自身も全く把握しきれていません。

    取り急ぎ今回はDropdownを使って上記のような組み合わせ式の料金表の作り方を解説したいと思います。

    fieldnameでプランと値段を設定し合計額を表示する

    まずはAdd a Fieldで、Dropdownボタンを押し、フィールドを作成します。

    画像のように右側にfieldname1と出てきますので、その周辺を適当にクリックします。

    Dropdown

    Fieldを設定する

    fieldname1あたりをクリックすると、左側に下記のような設定フォームが現れます。

    画像内の印をつけてる部分で、ユーザーが選ぶプランや値段などを設定します。

    Calculated Fields Form

     

     

    取り急ぎ、下の画像のようにプラン(テキスト)と値段()を記入してみました。

    ビギナー→ 10000、スタンダード→ 50000、プレミアム→ 100000。

    この(value)部分が、後に各フィールドを紐づけるのに重要になってきます。

    料金案内

    もう一つのfieldを作成する

    その後、同じ手順でもう一つのフィールドを作ってください。

    Dropdown

    すると今度はfieldname1の下に、fieldname2と出てきました。

    fieldname1が「プラン」だった事に対し、fieldname2は年代にしてみます。

    例えばシニアは2000、大人は5000、子供は3000など。

    fieldname

    これでまずは2つのフィールドを作成することができました。

    Dropdown

    この時点でプレビュー画面には2つのセレクトボタンが表示されており、クリックすれば先ほど設定した値を選べるようになっています。

    見積もり合計を表示する

    今回の例では、値(Value)に入力した数値がそのまま値段になるため、それを足し算し、見積もり金額を算出します。

    単純にプランと年代の値を足せばいいわけですね。

    では、そのためにはどうするかというと、再度、左上のAdd a Fieldタブをクリックし、Calculated Fieldをクリックして保存します。

    すると、先ほど作成した二つの セレクトボタンの下に見積もり金額を表示するフォームが現れます。

    プレビュー画面は下記になります。

    Calculated Fields Form

    わかりやすくするために、下記のようにそれぞれのタイトルを変更しました。

    ただし、このままではプランと年代を選んだところで合計見積もり金額が表示されることはなく、下の画像ようにSet Equationのテキストエリアに用途に見合う計算式を記入する必要があります。

    というわけで早速、「プラン」と「年代」の合計見積もり金額を表示するための計算式を入れます。

    Set Equation

    上記は、fieldname1であるプランとfieldname2の年代を単純に足し算してくれる記入の仕方になります。

    保存した時点で下記のように、しっかりとプランと年代で加算された合計値が見積もり金額として表示されました。

    fieldname

    足し算とか掛け算とか、これくらいわかりやすい金額の算出方法であれば上記でも対応できるのですが、中には単純に一定の計算式で成り立ってるものではなく、プランによってベースとなる金額が違っていたりする場合もあるかと思います。

    結論、そういった場合はIF文を使って実装していきます。

    以下で詳しく解説します。

    複雑な料金表の自動見積もり機能実装方

    Calculated Fields Form

    冒頭でも例に挙げましたが例えば上記のような料金表。

    見てみると、「家族立会火葬」「一任火葬」「合同供養」「プレミアム火葬」の4つのプランと、「ペットちゃんの大きさ」という項目でいくつかkg分けされており、プランとペットの大きさで金額が変わってくるシステムということがわかります。

    だとすると足し算引き算では成立しなさそう。

    ではどうするか。

    結論はSet EquationでIF文を使うことです。

    難しそう、エクセル関数とか無理、そんな声が聞こえてきそうですがご安心ください。

    僕もその手の類は苦手ですが、文法さえコピペしちゃえば問題ありません。

    以下、詳しく解説します。

    Set Equationで記入するIF文の文法

    早速文法を記載するので下記をコピペして、適宜、値や合計値を変更し実行してみてください。

    //基本文法
    IF(AND(fieldname1==,fieldname2==),合計値)

    //例
    IF(AND(fieldname1==1,fieldname2==2),10000)

    //複数のパターンを設定する場合
    IF(AND(fieldname1==1,fieldname2==1),1000,
    IF(AND(fieldname1==1,fieldname2==2),2000,
    IF(AND(fieldname1==1,fieldname2==3),3000
    )))

    複数のパターンを設定する場合、つまりは今回の参考事例にある問題のように、プランとペットの大きさで見積もり金額を設定する際に注意すべき点としては、一番下にあるカッコとじの部分。

    「)))」←これですね。

    ついついこのカッコとじをつけ忘れちゃうのですが、パターンが増えるたびに増えていきます。

    これを忘れると表示されなくなるので、おかしいと思った時はまずこのカッコとじをつけ忘れてないか疑ってみるといいです。

    面倒かもしれませんが、ひとつ設定するごとに保存していくのもありかと思います。

    値で紐ずける

    上記の文法でわかるように、紐付くのはです。

    例えば、fieldname1==11という値に割り当てられたプランはスタンダードプランで、2はプレミアムプランだったりします。

    対してfieldname2==11という値に割り当てられたペットの大きさは、500kg以下で2は1kg以下だったりします。

    フィールドを設定する際に、「500kg以下」というテキストに対しどのような値を設定するか、後々わかりずらくならぬよう、意識しておくといいかもしれません。

    例えば、500kg以下というテキストに設定する値は500にするとか、上から01234と連番にしていくとか。

    そうすれば情報の多い料金表でも、混乱することなく設定することができます。

    例に挙げた料金表で実際に記入した文法

    最後に、今回例に挙げた料金表に対して、僕が実際に記入してうまく実装できた文法を記入して終わりにしたいと思います。

    fieldname11がペットの大きさで500、1、3、6、9、12、15、18、21、25、30の値を振っています。

    500Kg以下は500、1Kg以下は1というように、全て「Kg以下」以前の数字を割り当て、わかりやすくしました。

    対して、fieldname12は「家族立会火葬」「一任火葬」「合同供養」「プレミアム火葬」の4つのプランを0123の値で割り振りました。

    5桁の数字がその組み合わせに表示したい金額です。

    fieldname10は出張費ですが後ほど説明します。

    IF(AND(fieldname11==500,fieldname12==0),17600 + fieldname10,
    IF(AND(fieldname11==500,fieldname12==1),15400 + fieldname10,
    IF(AND(fieldname11==500,fieldname12==2),8250 + fieldname10,
    IF(AND(fieldname11==500,fieldname12==3),62700 + fieldname10,
    IF(AND(fieldname11==1,fieldname12==0),18700 + fieldname10,
    IF(AND(fieldname11==1,fieldname12==1),16500 + fieldname10,
    IF(AND(fieldname11==1,fieldname12==2),15400 + fieldname10,
    IF(AND(fieldname11==1,fieldname12==3),63800 + fieldname10,
    IF(AND(fieldname11==3,fieldname12==0),20900 + fieldname10,
    IF(AND(fieldname11==3,fieldname12==1),18700 + fieldname10,
    IF(AND(fieldname11==3,fieldname12==2),17600 + fieldname10,
    IF(AND(fieldname11==3,fieldname12==3),64900 + fieldname10,
    IF(AND(fieldname11==6,fieldname12==0),26400 + fieldname10,
    IF(AND(fieldname11==6,fieldname12==1),24200 + fieldname10,
    IF(AND(fieldname11==6,fieldname12==2),22000 + fieldname10,
    IF(AND(fieldname11==6,fieldname12==3),69300 + fieldname10,
    IF(AND(fieldname11==9,fieldname12==0),29700 + fieldname10,
    IF(AND(fieldname11==9,fieldname12==1),26400 + fieldname10,
    IF(AND(fieldname11==9,fieldname12==2),24200 + fieldname10,
    IF(AND(fieldname11==9,fieldname12==3),72600 + fieldname10,
    IF(AND(fieldname11==12,fieldname12==0),33000 + fieldname10,
    IF(AND(fieldname11==12,fieldname12==1),29700 + fieldname10,
    IF(AND(fieldname11==12,fieldname12==2),27500 + fieldname10,
    IF(AND(fieldname11==12,fieldname12==3),75900 + fieldname10,
    IF(AND(fieldname11==15,fieldname12==0),36300 + fieldname10,
    IF(AND(fieldname11==15,fieldname12==1),33000 + fieldname10,
    IF(AND(fieldname11==15,fieldname12==2),30800 + fieldname10,
    IF(AND(fieldname11==15,fieldname12==3),79200 + fieldname10,
    IF(AND(fieldname11==18,fieldname12==0),40700 + fieldname10,
    IF(AND(fieldname11==18,fieldname12==1),36300 + fieldname10,
    IF(AND(fieldname11==18,fieldname12==2),34100 + fieldname10,
    IF(AND(fieldname11==18,fieldname12==3),83600 + fieldname10,
    IF(AND(fieldname11==21,fieldname12==0),44000 + fieldname10,
    IF(AND(fieldname11==21,fieldname12==1),40700 + fieldname10,
    IF(AND(fieldname11==21,fieldname12==2),38500 + fieldname10,
    IF(AND(fieldname11==21,fieldname12==3),86900 + fieldname10,
    IF(AND(fieldname11==25,fieldname12==0),49500 + fieldname10,
    IF(AND(fieldname11==25,fieldname12==1),46200 + fieldname10,
    IF(AND(fieldname11==25,fieldname12==2),44200 + fieldname10,
    IF(AND(fieldname11==25,fieldname12==3),93500 + fieldname10,
    IF(AND(fieldname11==30,fieldname12==0),55000 + fieldname10,
    IF(AND(fieldname11==30,fieldname12==1),51700 + fieldname10,
    IF(AND(fieldname11==30,fieldname12==2),49500 + fieldname10,
    IF(AND(fieldname11==30,fieldname12==3),99900 + fieldname10
    )))))))))))))))))))))))))))))))))))))))))))) + ‘円’

    fieldname10というのは出張費について。

    fieldname10

    上記のように出張費はエリアによって値段が変更されているのみで、該当値段を加算すればOKだったため最後に + fieldname10 とすればOKでした。

    足し算の書き方として参考にしてください。

    まとめ

    いかがでしたでしょうか?

    今回、Calculated Fields Formを使い、自動見積もり機能を作成する方法から、複雑な料金表でも自動見積もりを表示できる方法をお伝えしました。

    僕自身まだまだ初心者で、こういった基本的な使い方しか把握できていませんが、Dropdown以外にもAdd a Fieldタブで色々な機能が備わってたりするので、深掘りすればもっと色んなことができそうです。

    以上になります。

    Calculated Fields Formを使用して、あなたのサイトに自動見積もり機能を追加しましょう。

    WEB制作の依頼はこちらから