メールフォームが簡単に設置できるプラグイン「コンタクトフォーム7」
今回、カスタマイズに少々手こずったので備忘録。
原因は、他ページで「タブ」切り替えデザインに「input type=”radio”」を使ってしまったせいでした。
それはそれで苦労して実装したので、こちらも参考ページを載せておきましょう。
【参考】簡単なタブ切り替え機能の実装
ここで、ラジオボタンを非表示にしてしまったが故に、「お問い合わせページで、まずは『用件』を選ばせたい」という要求に、ラジオボタンを使おうにも、肝心のボタンが表示されなくなってしまったのですね。
セレクトかチェックボタンでもいいか？とも思いましたが。
スマホでセレクトは面倒くさいし、項目が最初に見えないので、SEO的にNG。
チェックボタンは、両方選んだり選ばなかったりできるんだから、振り分けにならない。
どっちかにIDかクラスつければCSSで何とかなると軽く考えていたのですが、何故かうまくいかなくて・・・
それどころか、『Contact Form 7』でラジオボタン作るだけでエラー。
デフォルトでエラーって・・・と思ったら、ガッコーで教わったままに＜lavel＞で囲っていたせいでした。
これも、想定外の苦労を強いられたので、載せておきましょう。
【参考】チェックボックス、ラジオボタン、メニュー
「use_label_element」を推奨するわりには、「個々の項目をlavel要素で囲む」にチェック入れて生成しないとそれにならないという罠。
で、今回の、救世主がこちら。
【参考】CSSでラジオボタンをカスタマイズする方法
デフォルトで「use_label_element」つけたラジオボタンに、以下のCSSを当てただけでイケました。
input[type=radio] {display: none;}
.wpcf7-list-item-label {
position: relative;
padding: 0 20px 0 25px;
}
.wpcf7-list-item-label:after, .wpcf7-list-item-label:before {
position: absolute;
content: "";
display: block;
top: 50%;
}
.wpcf7-list-item-label:after {
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 50%;
}
.wpcf7-list-item-label:before {
left: 5px;
margin-top: -5px;
width: 10px;
height: 10px;
background: #2889c2;
border-radius: 50%;
opacity: 0;
}
input[type=radio]:checked + .wpcf7-list-item-label:before {
opacity: 1;
}
.wpcf7-list-item-label:hover:after {
border-color: #2889c2;
}
文字までエリアになってるし、丸の大きさも変えられるので、モバイルファーストにもってこいです。