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

    AIエージェントとは?2025年注目の最新AI技術を初心者向けに解説!
    • 5月 8, 2025

    2025年に入り、テクノロジー業界で最も注目されているキーワードのひとつが「AIエージェント」です。これまで、ChatGPTや画像生成AIなどの「生成AI」が急速に普及し、「AIってすごい!」という感覚を多…

    続きを読む
    【徹底解説】データモダナイゼーションって何?今さら聞けない基本と必要性!
    • 5月 8, 2025

    「データモダナイゼーション」って言葉、最近よく聞くけど、一体何のことかイマイチわからない…そんな風に思っている方も多いのではないでしょうか? この記事では、データモダナイゼーションについて、初心者の方にもわ…

    続きを読む