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

こんにちは。

ゆうや（@yuyaphotograph）です！

Contact Form 7のラジオボタンの見た目をカスタマイズする方法が分からず困っていませんか？

実は、この記事で紹介するカスタマイズ方法を実践すると思いのままに見た目をカスタマイズできるようになります。

なぜなら、ぼくも実案件で使用して思ったようにカスタマイズすることができたからです。

この記事では、Contact Form 7のラジオボタンカスタマイズでポイントになる箇所を紹介した後、具体的なカスタマイズのCSSをご紹介します。

記事を読み終えると、今後Contact Form 7のラジオボタンのカスタマイズ方法で悩むことは一切なくなり快適なWordPressライフを送ることができます。

Contact Form 7のラジオボタンってどうやって表示するの？
Contact Form 7のラジオボタンのHTML構造はどんな感じ？
Contact Form 7のラジオボタンカスタマイズ
まとめ
Contact Form 7記事まとめ

Contact Form 7のラジオボタンってどうやって表示するの？

そもそも本記事でカスタマイズしていくラジオボタンはContact Form 7でどうやって表示させるかを簡単に紹介しますね。

Contact Form 7をインストールしたら管理画面左メニューに「お問い合わせ」が追加されます。

「新規追加」を押してお問い合わせフォームを作成していきます。

Contact Form 7の編集画面には「テキスト」や「メールアドレス」、「電話番号」など様々な項目が用意されています。

ラジオボタンを生成するにはその中の「ラジオボタン」を押します。

押すとポップアップでラジオボタンの項目名を入力する「オプション」フォームなどが出てきます。

「オプション」に任意の項目を入力して、「個々の項目をlabel要素で囲む」にチェックを入れ「タグを挿入」ボタンを押せば表示できるようになります。

Contact Form 7のラジオボタンのHTML構造はどんな感じ？

実際にラジオボタンを以下のような入力内容で挿入した場合、どういったHTML構造で出力されるか見ていきます。

名前	radio-content
オプション	項目１、項目２

出力されるHTMLはこちら。

page-contact.php

<span class="wpcf7-form-control-wrap radio-content">
  <span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
      <label><input type="radio" name="radio-content" value="項目１" checked="checked">
        <span class="wpcf7-list-item-label">項目１</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label><input type="radio" name="radio-content" value="項目２">
        <span class="wpcf7-list-item-label">項目２</span>
      </label>
    </span>
  </span>
</span>

無数のspanタグで囲われていることがわかります笑

「wpcf7-form-control-wrap」などのContact Form 7独自のクラスに対してカスタマイズのCSSをあてていく形になります。

Contact Form 7のラジオボタンカスタマイズ

完成イメージ

これから紹介するCSSでラジオボタンをカスタマイズすると添付画像のような見た目になります。

カスタマイズポイント

ラジオボタンカスタマイズのポイントは、

input[type=”radio”]を非表示にする
.wpcf7-list-item-label:beforeで円を表現する
ラジオボタンにチェックが入った時のスタイルをinput[type=”radio”]:checked + .wpcf7-list-item-label:beforeで指定する
.wpcf7-form-control.wpcf7-radioにdisplay:flexを指定して横並びにする

となります。

カスタマイズサンプルコード

実際にカスタマイズに使用するCSSがこちらとなります。

contact.css

.wpcf7-form-control-wrap
  display: block;
.wpcf7-form-control.wpcf7-radio
  display: flex;

span.wpcf7-list-item
  position: relative;
  flex-basis: 50%;
  width: 100%;
  &.first
    margin: 0!important

.wpcf7-list-item-label
  color: #333;
  cursor: pointer;
  font-size: 13px

input[type="radio"]
  position: absolute;
  opacity: 0;

.wpcf7-list-item-label:before
  content: '';
  background: #fff;
  border-radius: 100%;
  border: 1px solid #888888;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 14px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;

input[type="radio"]:checked + .wpcf7-list-item-label:before
  background-color: #FFDBAA;
  box-shadow: inset 0 0 0 2px #fff;