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

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

  • Related Posts

    不景気に負けるな!停滞は次のステージで成長するための準備期間!
    • 6月 30, 2025

    唐沢農機サービス・ビーズクリエイトのNakanoです。長野県の、そして日本の未来をその両肩で支えておられる経営者の皆様、いつもお疲れ様でございます。このブログを読んでくださっている今も、会社の未来、従業員の…

    続きを読む
    初心者向け!Googleビジネスプロフィール登録サポート
    • 6月 27, 2025

    「お店の名前で検索しても、マップに出てこない」 「Googleマップにお店の表示がされていない?」 もしかしたら、それは「Googleビジネスプロフィール」の登録をしていないからかもしれません。 Googl…

    続きを読む