WordPress お問い合わせフォーム

【WordPress】Contact Form 7のチェックボックスのデザインを画像に変更する方法

【WordPress】Contact Form 7のチェックボックスのデザインを画像に変更する方法
Contact Form 7 のチェックボックスのデザインって画像に変更する方法ない?

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

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

効率よく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の使い方

 


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

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