WordPress お問い合わせフォーム

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

【WordPress】Contact Form7でラジオボタンのデザインをカスタマイズする方法
Contact Form7のラジオボタンってデザイン変えられる?

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

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

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

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

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

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

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

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

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

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

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にすると全部に色)

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

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

 

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

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

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

今だけ!5大特典あり🎁

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