ホームページ設計・制作
MW WP Formのラジオボタンで親要素のlabelをスタイライズして素敵に見せる覚書
こんにちはデザイナーの野尻です。
wordpressでサイト構築する際に手放せないプラグインMW WP Form。
国産のプラグインでフォームのwordpressのフォームに確認画面やエラー画面などをURLで作成でき、フォームバリデーションもお手軽と、高機能でいつも非常に助かっております
しかしこちらのプラグインでラジオボタンを作成するとき、ショートコードで作成すると自動的にinputを内包したlabelが出力されてしまう！
そうすると、CSSだけでlabelをスタイライズするのが、若干難しいんです。。
結論scriptを併用することで対応が可能になりましたので備忘録を。
例えばこんなショートコードを書くとき
[mwform_radio name=”お問い合わせ種別” class=”radio_b” children=”お問い合わせ,ご質問,その他” value=”お問い合わせ”]
↓のようなscriptを併用すると吉！
【script】
要はjqueryでチェックの入ったinputの親要素であるlabelのスタイルを無理やりかえるということなんですが、これを利用するとラジオボタンを表示せず、labelで自由にスタイライズしていくことができます。
メールフォームはどの案件にもほぼ使用する重要なコンテンツですので、以後の制作のクオリティアップにつながればと思います。
