Freelance notes

Contact form7でチェックボックスをラジオボタン風にカスタマイズする

投稿日:2020年1月25日 最終更新:2020年1月25日

Contact form7にチェックボックスの機能がありますが、そのスタイルをカスタマイズしたいと思ったことはありませんか?

今回は以下のような、「機能はチェックボックスでもスタイルはラジオボタン」のカスタマイズ方法をご紹介したいと思います!

20200125gifanimation

まずContact form7の前にHTML(送信機能実装するならPHP)とCSSでカスタマイズをしてみます。

簡単ではありますが以下のようにコードを書きますと上記のようなチェックボックスが出来ます。

元々のチェックボックスをdisplay:none;で消し、contentで○と◉を表示させているだけです。

これをContact form7で実装する際、コードを書き換える必要があります。

以前、私は実務でチェックボックスをカスタマイズしていたのですが、テストとして試しに何も実装されていないWordpressに作ったCSSをそのまま利用してContact form7向けにHTMLを書き換えたところ問題なく表示されましたが、本番用にそのまま適応させようとしたところスタイルが反映されず失敗しました。

本番用ではだいぶ作り込んでおり、プラグインも複数入れていたのでそれが原因なのかもしれません。

そのためCSSはContact form7で元々定義されているクラス名を使用し、新たにスタイルを付けていきました。今回はこちらのパターンをご紹介します。

まずContact form7でのHTMLコードは以下の通りです。

とても簡単にしていますが、必要に応じてclassやidなどを付けて下さい。

次にContact form7用のスタイルは以下の通りです。

とりあえず上記で何とかうまくいきました!

余談ですがこの時、Contact form7用のDatepickerプラグインも有効化していたにも関わらず機能せず、javascriptを使って作ったりと何かと焦りました。

次回はすんなり出来るようにメモメモφ(-ω- )