お問い合わせフォーム WordPress

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

※ 当サイトではアフィリエイト広告を利用しています

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

続きを見る

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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でラジオボタンのデザインをカスタマイズする方法を解説しました。

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

以上になります。

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

 

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

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