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

Contact Form7のラジオボタンってデザイン変えられる？

WordPressの定番お問い合わせフォームプラグインのContact Form7ですが、ラジオボタンのデザインを変えたい事があると思います。

今回はContact Form7でラジオボタンのデザインをカスタマイズする方法をご紹介します。

ラジオボランを画像にカスタマイズする方法は以下の記事を参照下さい。

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

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

Contact Form 7の基本的な使い方

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

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

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

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

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

必要に応じてclass名など付けられますが、今回は項目だけ入力して右下のタグを挿入をクリックします。

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

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

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

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

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

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

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

.wpcf7-list-item.first {
  margin: 0;
}
.wpcf7-list-item-label {
  cursor: pointer;
  display: flex;
}
/* デフォルトのボタン */
input[type="radio"] {
  opacity: 0; // デフォルトのボタンを非表示
  position: absolute;
}
/* チェック前のボタン */
.wpcf7-list-item-label::before {
  background: #fff;
  border: 1px solid #333;
  border-radius: 100%; // ラジオボタンっぽく丸くする
  content: "";
  height: 1.2em;
  margin-bottom: auto;
  margin-right: .5em;
  margin-top: auto;
  transition: background-color .5s; // 色をじんわり変化させる
  width: 1.2em;
}
/* チェック後のボタン */
input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background-color: #7fbfff; // チェック後の中心の色
  box-shadow: inset 0 0 0 3px #fff; // 中心の色のスタイル
}

最後のbox-shadowですが、3pxの所を大きくすると色の部分が小さくなります（0にすると全部に色）

ボタンの位置や色などは適宜変更してみて下さい。

ラジオボタンをサイトカラーにしてあるデザインなどもあるので、この記事でラジオボタンのカスタマイズを出来るようになっておきましょう。

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

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

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

累計670部突破

クチコミ約370件
（平均スコア）

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

👇画像をクリック