Web制作 WordPress CSS お問い合わせフォーム

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

Contact Form 7のラジオボタンって画像に出来る?

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

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

参考記事
【WordPress】Contact Form7でラジオボタンのデザインをカスタマイズする方法
【Contact Form 7】ラジオボタンのデザインをカスタマイズする方法

続きを見る

Contact Form 7の基本的な使い方については以下の記事を参照下さい。

参考記事
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

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

コーディングの時給アップにはこちら!


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

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

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

Contact Form 7:編集画面(ラジオボタン作成)

Contact Form 7:編集画面(ラジオボタン作成)

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

Contact Form 7:フォームタグ生成(ラジオボタン)

Contact Form 7:フォームタグ生成(ラジオボタン)

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

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

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

Contact Form 7:ラジオボタン作成完了

Contact Form 7:ラジオボタン作成完了

 

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

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

ラジオボタン(デフォルト)

ラジオボタン(デフォルト)

テーマによってデザインは異なります(これは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;
}

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

ラジオボタン:チェック後の画像変更

ラジオボタン:チェック後の画像変更

以上になります。

関連記事Contact Form 7 関連記事一覧

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, WordPress, CSS, お問い合わせフォーム
-