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

続きを見る

 

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

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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
-