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で自由にスタイライズしていくことができます。
メールフォームはどの案件にもほぼ使用する重要なコンテンツですので、以後の制作のクオリティアップにつながればと思います。

ビーズクリエイト制作実績はこちら

野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい