WordPressのプラグイン「Contact Form 7」でチェックやラジオボタンを改行させて表示する件

WordPressでフォームを利用するためのお約束のプラグインのContact Form 7！

非常に便利なプラグインです。

しかし、ラジオボタンやチェック項目を設定すると、全ての項目が横並びに表示されてしまいます。
場合によっては、１つづつ下に表示させたい場合もあるかと思います。

通常以下のようなタグを設置するのですが。

[checkbox your-xxxx "apple" "orange" "strawberry"]

これだとレイアウトが

□apple　□orange　□strawberry

と横に表示されてしまいます。

□apple
□orange
□strawberry

↑この様に、下に表示したい場合もありますが、ソースに改行入れれば当然動かなくなるわけで・・・。

そのような場合には、CSSに以下の記述を行います。

span.wpcf7-list-item {
display: block;
}

これで、ブロック要素に変わるので、項目ごとに改行されて表示されます。 基本、CSSで細かなレイアウトを行うことが想定されているそうなので、深く見ていくと色々と閃きが出てくるかもですね！