18 9月 Contact Form 7 Cost Calculator とconditional Fieldの組み合わせで躓いた話。（first_as_label”選択してください”をいれたいのにできないし、条件分岐もうまくいかない！）
非プログラマ・グラフィックデザイナーが、ワードプレスのカスタマイズを行いながら出会う躓きを記録するシリーズ。
思考過程（試行錯誤）を含め自分のメモのために記します。
※非プログラマのメモなので、プロの魔法使い様方からみると幼稚な悩みが主です。
もっとよい解決法があるのかもしれませんが、少なくともググっても即解決、とはいかなかった躓きが主です。
select_custom（ドロップダウンメニュー）の最初の項目について
contactForm7で、COST CALCULATORを使って計算式を作ろうとしたときのこと。
COST CALCULATORのドロップダウンは「 slect_custom 」で設定を行う。
このselect_customを選択必須にしたい時、設定のウィンドウで「空白を入れる」をクリックすると、挿入されるショートコードに
“include_blank”と入り、フロントで見ると「—」と表示される。
fontactform7デフォルトの「 Select 」の場合、これをinclude_blankの代わりに、FIRST_AS_LABEL”選択してください” と記載することで、
フロントで「選択してください」と表示されることを知り、ユーザーがわかりやすくなるので、「select_custom 」でも実装してみようとした。
参考：http://proclass.jp/blog/?p=3462
参考2：contact7 プラグイン公式 https://contactform7.com/ja/checkboxes-radio-buttons-and-menus/
ところが、ショートコードに
FIRST_AS_LABEL”選択してください”
と記載しても、実際のサイトの表示をみても空欄のまま。
試しにフォームを送信してみても、未選択でもエラーがでず、選択必須の機能も働いていないことが分かった。
どうしよう。という記事。
解決
以下が、うまくいかなかったコード。
[select_custom* select_custom-235 first_as_label”選択してください” “100|りんご” “70|みかん” “300|もも”]
選択必須のアスタリスク（*）も入っているのに、必須にならない。
参考通りに、first_as_label”選択してください”をnameの後に置いているんだけどなぁ。
100|りんご など、各果物の前の数字は、COST CALCULATORを使って合計金額を計算するときのため、設定する数値だ。
例えば
[calculated calculated-928 id:total “select_custom-235*number-???”]円
など計算式を記入することで、
「select_custom-235」で選択した果物の価格（例りんご：100円）と、
「number-???」に記載した個数を掛け算することができる。
（number-???が３、なら100×3で、計算結果が300になる）
以下が上手くいったコード
[select_custom* select_custom-235 first_as_label”|選択してください” “100|りんご” “70|みかん” “300|もも”]
ぱっとみわからないヤツですが、
「 “|選択してください” 」 の、最初の”のあとに「｜」が入っています。
100 | りんご → value|label など、COST CALCULATORの側で判定してフロントに表示をしているのだと思うですが（非プログラマ的精一杯の推理）
first_as_labelにおいても、空欄でよいので「｜」を記載する必要があった、というお話でした。
追記 今度は条件分岐が絡んだらまた躓いた
contact7の追加アドオン、conditional fieldを使って、選択肢に応じてフォームを表示・非表示を切り替えたい案件が発生。
条件分岐したうえで、計算までしたい。のに…
上記の「 “|選択してください” 」 でうまくいったように、選択肢に「｜」が必要なのでは！とピコンとひらめいて、
「｜」入れてみたものの、
トリガーにしている選択肢を選んでも、選んだ時に出て欲しい記入欄が表示されない！
条件分岐の参考はこちらを見ました
https://funtre-blog.com/wordpress/conditional-fields-for-contact-form-7/
↑プラグイン公式はこちら
conditional Fieldsの設定（コードの記載）には問題がなく、いったいなぜ、と思ったら、
やはりCOST CALCULATOR のselect_custom、の「｜」前後の値が問題だった。
条件分岐を絡めたかたちで使うのならば
「 | 」 の前後両方に値を入れる必要がある。
空白じゃだめ。
first_as_labelではいいのに。条件分岐ではだめ。
conditiona field 側は、「｜」の前方の値を条件分岐のトリガーにしているのでしょう（非プログラマ的精一杯の推理２）
一応、あとで振り返ったときに役立つかもしれないので、
やりたかったことの詳細も以下にmemoしておきます。
COST CALCULATORとConditinal Fieldでやりたかったこと詳細
100円りんご
８0円のみかん
300円のもも
100グラム300円のぶどう
の選択肢があったとき、
りんご、みかん、ももを選んだ方には、個数を記入する欄を表示し、
「100グラム300円ぶどう」、を選択した方には希望のグラム数を記入してもらう欄を表示、
選んだグラム数×300円、という計算をするフォームを作るとき。
同じ記入欄を用意して、100グラムなら100、とユーザーに書いてもらえばよいのでしょうが、
102とか、適さない数字を書かれると面倒だから、
ドロップダウンで100 200 300・・・など選択制にして、個数売りのくだものとは分けておきたい、という設定。
あくまでも設定。現実的ではないかもしれないことは、横に置いて進む。
contact form7の編集画面で書くといい感じのコードはこちら↓
[select_custom* select_custom-??? first_as_label”|選択してください” “100|りんご” “70|みかん” “300|もも” “ぶどう|ぶどう”]
[text* number-XXX] ←りんご・みかん・ももの個数を記入する欄
[group group-grape]
[select* menu-???] ←ぶどうのグラムを選択する欄
[/groupe]
つぎに同じフォーム編集画面でconditilal Fields Groupのグループを作る。
ここでは例として[group group-grape]を作る。
ここで一度、「保存」を忘れずに。
保存をすると、次の工程で「show:」のところに、ドロップダウンで選択肢に「group-grape]が表示されるようになる。
次に、conditional fieldsの設定で、show:「groupーgrape」を選ぶ。
そして、ifのところに表示させる条件とするフォームの項目（ここではselect_custom-235）を選択し、
さらにそこで何が選択されていたら表示するかの値を選ぶ。ここでは「ぶどう」
show:group group-grape if select_custom-235 equal ぶどう
こうすると、
select_custom-???で、ぶどうが選ばれたときに、
group-grapeで囲まれた領域（ [select* menu-???] ぶどうのグラム数をドロップダウンから選択する欄 ）
が表示される、という条件分岐を作ることができます。
後記
キャプチャとかつけてもっとわかりやすく書いた方がいいのかもしれませんが、
とりあえずmemo。とにかくmemo。
やっぱりこんなことしている暇ないや、とくじける前に、とにかくmemo。
普段、諸先輩方・諸魔法使いみたいなプログラマさん方の、
わかりやすくキャプチャもつけた、たくさんのtip記事に助けられていて、マジ感謝です。
こんところでつぶやいても、感謝は伝わらないのですが、
せめて同じように困っている方にペイフォワードします。
日々躓きにはことかかないので、自分の復習と次に同じことで躓いたときに見返せるように、できる限り更新がんばります。
あ、P.S
4年ぶりの新着記事でした。おどろき（Σ（・□・；））