WordPress お問い合わせフォーム

【WordPress】Contact Form 7のチェックボックスのデザインをカスタマイズする方法

Contact Form 7 のチェックボックスのデザインってカスタマイズする方法ない?

Contact Form 7 とはWordPressのプラグインで、定番のお問い合わせフォームですね。

ちょうど今やってる案件でチェックボックスにチェックを入れた時の色を変えたいという依頼があったので、ここでそのやり方を紹介したいと思います。

Contact Form 7のデザインをカスタマイズする方法

今回はチェックボックスの色やチェックアイコンをカスタマイズしていきますが、色を変えるのに単純に color や background-color を使えばいいという訳ではありません。

まずはContact Form 7がデフォルトで表示させるチェックボックスを非表示にして、自作したチェックボックスを表示させるという形になります。

 

デフォルトのチェックボックス

まずはデフォルトのチェックボックスを見てみます。

このようにチェックを入れた時の背景は青になっています。

ただサイトのイメージカラーに変更したいという事があるかと思います。

しかしこの青色は単純に background-color で変更・・・という訳にはいきません。

 

デフォルトのチェックボックスを見えなくして自作する

それではどうするかというと、デフォルトのチェックボックスは見えなくして、希望のデザインを書いて擬似要素で表示させます。

全体のコードを見てみます。

.wpcf7-form-control-wrap {
  display: block;
}
span.wpcf7-list-item {
  margin: 0 30px 0 0; /*項目右側の余白設定と、デフォルトの左側の余白を打ち消す*/
  position: relative;
}
.wpcf7-list-item-label {
  cursor: pointer; /*labelにhoverした時にカーソルを表示させる*/
  font-size: 16px; /*項目のフォントサイズ*/
}
input[type="checkbox"] {
  opacity: 0; /*デフォルトのチェックボックスを見えなくする*/
  position: absolute;
}
.wpcf7-list-item-label::before {
  /*チェックボックスのデザイン*/
  border: 1px solid #333;
  content: "";
  display: inline-block;
  height: 15px;
  margin-right: 10px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  /*チェックアイコン*/
  background: url(アイコン画像のURL) no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  height: 15px;
  left: 1px;
  position: absolute;
  top: 10px;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  /*チェックしたボックスの背景色を設定*/
  background-color: #b30a03;
}

この「wpcf7」という名前のclassは自分で付けた物ではなく、Contact Form 7が付けた物です。

ポイントは以下になります。

  • デフォルトのチェックボックスを見えなくする
  • beforeで自作したチェックボックスを表示
  • checked + afterでチェックされた時のチェックアイコンを表示
  • checked + beforeでチェックされた時のチェックボックスの背景色を設定

そして完成したチェックボックスはこちらです。

ちなみにチェックアイコンはフリー素材サイト「icooon mono」というサイトからDLしたものです。

icooon monoの使い方はこちらの記事を参照下さい。

フリーアイコン素材サイト icooon-monoの使い方

また、今回の記事はこちらの記事を参考にさせて頂きました。

ありがとうございますm(__)m

【Contact Form 7】チェックボックスのデザインをカスタマイズする方法

-WordPress, お問い合わせフォーム