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
    【2026年AI最新予測】AIバブルは崩壊する?当事者である生成AIに「あなたの未来」を聞いてみた
    • 6月 10, 2026

    💡 AIへの実際の問いかけ(プロンプト) 「AIバブルについてAIに予想させてみた」 「AI予想(テーマはAIバブル)の記事作成」 もしこんな直球の問いかけを、当事者である生成AI自身に投げ…

    続きを読む
    【Google I/O 2026】Gemini Sparkは何ができる?中小企業が「自律型AI」に振り回されないための導入準備
    • 5月 29, 2026

    Google I/O 2026発表「Gemini Spark」とは?何ができるのか 従来のAI(チャットボット)と自律型AIエージェントの決定的違い 2026年5月のGoogle I/Oで発表された「Gem…

    続きを読む