WordPressのプラグイン「Contact Form 7」はショートコードを使用して簡単に
「お問い合わせフォーム」が作れる優れものです！

コードが書けないという方でも簡単に使えて、
普段PHPをそのままさわっている身としてはお茶の子さいさい♪と思っていたのですが...
「なんか、かえってカスタマイズしづらくない？？」と思ってつまずいてしまう部分があったので、
備忘録として残しておこうかな〜と思います！

今回私がつまずいたのは「ラジオボタン」の設置でした！
実装したかったのは、

・単純なデザインのラジオボタンではなくspanタグやlabelタグを使用して、デザインをカスタマイズしたい
・選択項目は2つで最初は未選択の状態
・これらのラジオボタンの項目は必須項目ではない

というUIでした！

最初は自作のHTMLとCSSで見た目を色々とカスタマイズしていたのですが、
spanタグやdivタグで囲ってしまうと、
適切にバリデーションが効かなくなってしまうというジレンマにおちいってしまい…
「ショートコードを使うしかないかな〜、でもその場合、見た目に関して妥協しないといけないから嫌だな〜」と思っていたその矢先！

"use_label_element"

というショートコードを使用すると、カスタマイズしやすいようにHTMLタグを補完してくれるという情報を発見！
こんな感じで使えます：

実装例：[radio test_radio use_label_element "はい" "いいえ"]

labelタグやタグを自動で補完してくれました！
これでCSSを使ってデザインを自由にカスタマイズできるように！✌️

UIの実装で特にやっかいだったのが、

・選択項目は2つで最初は未選択の状態
・これらのラジオボタンの項目は必須項目ではない
この2つの条件を同時に満たすことでした。

なぜかというと、Contact Form 7ではラジオボタンは「いずれか1つを選択する」前提の形式であり、
必須（required）にしていなくても、必ず何かが選択されていないといけない仕様になっているからです。
そのため、必須項目を表す「*」を使わなくても、ラジオボタンはデフォルトで「選択必須」になってしまうんです…！

他のtypeの実装例：[text* test_tel placeholder "例) 000-0000-0000"]


ラジオボタン：[radio test_radio use_label_element "はい" "いいえ"]


↑どちらも必須の入力項目です！

私の使っていたバージョン（6.0.6）ではこうなっていて、
どうにか回避できないかな〜と色々試してみたところ……

キュピーン！！！！！！ひらめいた！！！！！💡💡

「選択肢は2つしかないけど、空の項目を1つ追加してそこにcheckedを入れておけば良いのでは？！」

[radio test_radio use_label_element " " "はい" "いいえ"]

この状態で、最初の「空」の項目をCSSで非表示（display: none;）にすれば…！と思ったのですが、
うまくいかない。空の項目があるとバリデーションが効かなくなってしまうみたいでした。
さすが、世界のWordPress……抜かりなし。

というわけで、空の値が送れないなら、こうしてみました！

[radio test_radio use_label_element default:1 "未選択" "はい" "いいえ"]

「未選択」というラベルの項目をデフォルトで選択状態にして、
それをCSSで非表示にしておくことで、見た目上は未選択状態に見えるようにしました！
これでバリデーションにも引っかからず、希望通りの動きに！やった〜〜〜〜！

ちょっとしたところでつまずいてしまいましたが、
慣れてしまえば本当に簡単にフォームが作れてしまう「Contact Form 7」、やっぱり便利ですね！