Contact form7にチェックボックスの機能がありますが、そのスタイルをカスタマイズしたいと思ったことはありませんか?
今回は以下のような、「機能はチェックボックスでもスタイルはラジオボタン」のカスタマイズ方法をご紹介したいと思います!
まずContact form7の前にHTML(送信機能実装するならPHP)とCSSでカスタマイズをしてみます。
簡単ではありますが以下のようにコードを書きますと上記のようなチェックボックスが出来ます。
元々のチェックボックスをdisplay:none;で消し、contentで○と◉を表示させているだけです。
1 2 3 4 5 6 |
<dl class="check"> <dt>チェックしてね↓</dt> <dd> <label><input type="checkbox" class="" name="" value=""><span>チェック1</span></label> </dd> </dl> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.check input{ display: none; } .check input + .check span{ position: relative; vertical-align: middle; } .check input + span:before{ content: "○"; color: #ff0000; font-size: 20px; padding-right: 5px; } .check input:checked + span:before{ content: "◉"; color: #ff0000; } |
これをContact form7で実装する際、コードを書き換える必要があります。
以前、私は実務でチェックボックスをカスタマイズしていたのですが、テストとして試しに何も実装されていないWordpressに作ったCSSをそのまま利用してContact form7向けにHTMLを書き換えたところ問題なく表示されましたが、本番用にそのまま適応させようとしたところスタイルが反映されず失敗しました。
本番用ではだいぶ作り込んでおり、プラグインも複数入れていたのでそれが原因なのかもしれません。
そのためCSSはContact form7で元々定義されているクラス名を使用し、新たにスタイルを付けていきました。今回はこちらのパターンをご紹介します。
まずContact form7でのHTMLコードは以下の通りです。
1 |
[checkbox checkbox-839 use_label_element exclusive "チェック1"] |
とても簡単にしていますが、必要に応じてclassやidなどを付けて下さい。
次にContact form7用のスタイルは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
input[type=checkbox]{ display: none; } .wpcf7-list-item label{ display: inline-block; } span.wpcf7-list-item-label::before{ position: absolute; display: block; content: "○"; color: #ff0000; } span.wpcf7-list-item-label::after{ position: static; display: block; content: ""; } .wpcf7-list-item-label { position: relative; padding: 0 0px 0px 20px; } input[type=checkbox]:checked + .wpcf7-list-item-label:before { opacity: 1; content: "◉"; color: #ff0000; } input[type=checkbox]:checked + .wpcf7-list-item-label:after { opacity: 1; border-color: #ff0000; content: "" } span.wpcf7-list-item{ margin: 15px 0 0 0; } |
とりあえず上記で何とかうまくいきました!
余談ですがこの時、Contact form7用のDatepickerプラグインも有効化していたにも関わらず機能せず、javascriptを使って作ったりと何かと焦りました。
次回はすんなり出来るようにメモメモφ(-ω- )