お問い合わせフォーム WordPress

【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お問い合わせフォームの定番プラグイン】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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 関連記事一覧

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

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