WordPress お問い合わせフォーム

【WordPress】Contact Form 7でラジオボタンを画像にカスタマイズする方法

【WordPress】Contact Form 7でラジオボタンを画像にカスタマイズする方法
Contact Form7のラジオボタンって画像に出来る?

WordPressの定番お問い合わせフォームプラグインのContact Form7ですが、ラジオボタンを画像に変える事も出来ます。

画像ではなくCSSでデザインをカスタマイズする方法は以下の記事を参照下さい。

WordPressContact Form7でラジオボタンのデザインをカスタマイズする方法

Contact Form7の使い方については以下の記事を参照下さい。

WordPressお問い合わせフォームの定番プラグイン Contact Form 7の使い方

効率よくWordPress制作したい人はこちら

Contact Form7でラジオボタンを設置

まずはラジオボタンを作ってみます。

こちらは初期状態の画面で、今回は一番上にラジオボタンを設置してみます。

Contact Form7編集画面(ラジオボタン作成)

ラジオボタンをクリックするとこちらが表示されます。

今回はclassを"radio-dog"と付けました。そして右下のタグを挿入をクリックします(class属性を入力すれば下の欄には自動でclassが挿入されます)

「個々の項目をlabel要素で囲む」はチェックが入ったままでOKです。

そしてこのようになっていれば設置完了です。

 

ラジオボタンのデザインを画像にカスタマイズ

まずはデフォルトのデザインを見てみましょう。

テーマによってデザインは異なります(これはTwenty Twenty-One)

これを以下のようにしたいと思います。

早速ですがコードはこちらになります。

.wpcf7-list-item.first {
  margin: 0;
}
.wpcf7-list-item-label {
  align-items: center;
  cursor: pointer;
  display: flex;
}
/* デフォルトのボタン */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
/* チェック前のボタン */
.radio-dog .wpcf7-list-item .wpcf7-list-item-label::before {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 80px;
  width: 80px;
}
/* 1つ目のボタン */
.radio-dog .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::before {
  background-image: url(画像パス1);
}
/* 2つ目のボタン */
.radio-dog .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label::before {
  background-image: url(画像パス2);
}
/* 3つ目のボタン */
.radio-dog .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label::before {
  background-image: url(画像パス3);
}
/* チェック後のボタン */
input[type="radio"]:checked + .wpcf7-list-item-label::before {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,.7));
}

チェック後のボタンにはチェックがされたと分かるようにborderなど設定しておきましょう(今回はfilterのdrop-shadowを使いました)

もしチェック後の画像を変えたい場合は、以下のコードを追記すればOKです。

input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background-image: url(画像パス) !important;
}

チェック後は以下の真ん中のように画像が変わります。

以上になります。

 


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

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

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

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

👇画像をクリック

  • この記事を書いた人

じゅんぺい

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

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