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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

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

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

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

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

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

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

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

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

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

contact form 7ラジオボタンカスタマイズ

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

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

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

名前 radio-content
オプション 項目1、項目2

出力される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="項目1" checked="checked">
        <span class="wpcf7-list-item-label">項目1</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label><input type="radio" name="radio-content" value="項目2">
        <span class="wpcf7-list-item-label">項目2</span>
      </label>
    </span>
  </span>
</span>

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

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

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

完成イメージ

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

contact form 7ラジオボタンカスタマイズ完成イメージ

カスタマイズポイント

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

  • 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;

まとめ

以上、Contact Form 7のラジオボタンをカスタマイズする方法をご紹介しました。

ラジオボタンカスタマイズが苦手だったあなたも今回紹介した方法で克服していただけたら嬉しいです。

最後までご高覧いただきありがとうございました!

あわせて読みたい

Contact Form 7 選択肢ごとに返信メール内容を分岐させる方法【Conditional Fields】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です