Contact Form7のチェックボックスの変更

アフィリエイト対策と、基本的なサイトの質向上のため、今まで設置していなかった、お問い合わせフォームを作成することにした。便利なContact Form7のプラグインを活用させていただいた。

そして、基本となるチェックボックスはこちらのようなシンプルなもの。

基本のカスタマイズはこちらを参考に編集。

プラグインによってタグが生成されるので、それをhtmlで置き換えて装飾していく。体裁を整える程度はなんとかことなきを得る。

作っていく中で、プライバシーポリシーの同意のチェックをしないと送信できないようにしたかったが、チェックをしてもしなくても、送信してしまう…。

と思ったら、公式サイトで、要チェックの記述と、「任意」にしないようにすることで、完成。

そしてそのチェックボックスのデザインがデフォルトでは小さいので、変更しようと検索。

inputは装飾できない

cssで調整できるだろうと思っていたら、いかんせんできない。それもそのはず、inputタグは装飾できないということを、初めて知りましたよ。

理想のカスタマイズはこちらを参考にした。

Contact Form7で吐き出されるクラス、wpcf7-list-item-labelを<label>と置き換えれば簡単。満足の出来栄え。