WordPress お問い合わせフォーム

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

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

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

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

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

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

続きを見る

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

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

続きを見る

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

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


Contact Form 7でラジオボタンを設置

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

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

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

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

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

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

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

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

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

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

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

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

 

Contact Form 7のラジオボタンのデザインをCSSでカスタマイズ

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

Contact Form 7:デフォルトのラジオボタン

Contact Form 7:デフォルトのラジオボタン

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

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

Contact Form 7:CSSでカスタマイズしたラジオボタン

Contact Form 7:CSSでカスタマイズしたラジオボタン

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

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

 

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

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

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


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

じゅんぺい

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

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