こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- WordPressのコンタクトフォームプラグイン「Contact Form 7」のチェックボックスのデザインをカスタマイズする方法を知りたい
- Contact Form 7のチェックボックスに独自のスタイルをあてたいけどやり方がわからない…
- Contact Form 7さんが自動で挿入してくるspanタグなどと向き合うことを諦めている
という方のお悩みを解決します！
カスタマイズ前のチェックボックスは？
Contact Form 7のデフォルトのチェックボックスのデザインはこちら！
とても味気ないですね、、、
実際のWordPress案件でチェックボックスを実装する際は必ずと言っていいほど、そのデザインに合わせたチェックボックスのデザインを要求されます。
上の添付画像のようなデフォルトの見た目のままだとデザインテイストを損なってしまいますものね。
初めてぼくが案件でチェックボックスのデザインをカスタマイズをした時はそりゃあもう大変でした。
「超絶便利なプラグインなのはいいけどpタグやらspanタグやらで勝手に囲わんといて…!!!」
と何度叫んだことやら笑
Contact Form 7さんに怒っても解決には近づかないのに昔のぼくは愚かでした。
そうしてContact Form 7さんの悪癖と真正面から向き合うことに決めたぼくはついにカスタマイズすることに成功しました！
以下でその方法を紹介しますので絶賛お困り中のあなたのお役に立てれば幸いでありんす！！！
完成イメージ
今回紹介するコードで作れるチェックボックスはこちら！
チェックボックスのカスタマイズ方法
Contact Form 7でチェックボックスを表示させた場合（項目は3つ）、実際に吐き出させるHTMLは以下のようなものです。
じっくり確認して構造を理解しましょう〜
<span class="wpcf7-form-control-wrap checkbox-content">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="checkbox-content[]" value="項目1">
<span class="wpcf7-list-item-label">項目1</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="checkbox-content[]" value="項目2">
<span class="wpcf7-list-item-label">項目2</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="checkbox-content[]" value="項目3">
<span class="wpcf7-list-item-label">項目3</span>
</label>
</span>
</span>
</span>
デザインカスタマイズは以下のCSSを使用します！
CSSのポイントは3つ！
- 既存のチェックボックスはopacity:0で見えなくする
- .wpcf7-list-item-labelのbefore要素でチェックボックスの枠を表現する
- チェックボックスがチェックされた時（:checked）に.wpcf7-list-item-labelのafter要素でチェックアイコンを表示する
所々、解説を入れているので参考にしてくださいまし。
.wpcf7-form-control-wrap {
display: block;
}
.wpcf7-form-control.wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
}
span.wpcf7-list-item {
position: relative;
margin: 0 50px 0 0 !important;/*項目ごとの余白を調整*/
}
.wpcf7-list-item-label {/*項目の色や文字サイズ*/
color: #5bc8ac;
cursor: pointer;
font-size: 16px;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;/*既存のチェックボックスを見えなくする*/
}
.wpcf7-list-item-label:before {/*チェックボックスの枠*/
content: '';
border: 1px solid #5bc8ac;
display: inline-block;
width: 20px;
height: 20px;
position: relative;
top: -3px;
margin-right: 20px;
vertical-align: middle;
cursor: pointer;
text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:after {/*チェックアイコン*/
content: "";
display: block;
position: absolute;
top: -2px;
left: 3px;
width: 20px;
height: 20px;
background: url("省略。チェックアイコン画像のURLを入れる") no-repeat center;
background-size: contain;
}文字色やチェックボックスのデザインはよしなに。
チェックボックスカスタマイズのデモ
上記で紹介したコードのデモです！
以下ではチェックアイコンはFontAwesomeのsvg画像を使用しました！
「項目1」などのラベルをクリックしてチェックアイコンが表示されるか確認してみてくださいまし〜
See the Pen
poJqpBN by 石森裕也 (@yuyaphotograph)
on CodePen.
まとめ
チェックボックスやラジオボタンのデザインカスタマイズがContact Form 7における最大の難関だと個人的には思っています笑
今回の記事で自由自在にチェックボックスの見た目をカスタマイズすることができるようになっていただければ幸いです！
Contact Form 7記事まとめ
Contact Form 7を使うときに役立つ記事まとめ
