MW WP Form｜プラポリのチェック項目を一部だけリンクにする（プライバシーポリシーに同意する）

お問い合わせフォームの「プライバシーポリシーに同意する」のチェック項目で、このようなデザインだったことってないですか？
MW WP Formの場合ショートコードなのでタグやクラスが当てられないため、ちょっと工夫が必要です🥺

このデザインに直面するたびに「どうやってたっけな・・・」となるので、記事に残しておくことにしました。

MW WP Formでチェック項目の「プライバシーポリシー」にのみリンクをつけるコード（おすすめ）

標準の機能だと今のところ方法がないので、私は Java Scriptでどうにか対応してます。

手順① ショートコードを.js-mw-checkboxで囲む

<div class="js-mw-checkbox">
  [mwform_checkbox name="consent" class="consent" children="プライバシーポリシーに同意の上、送信する。" separator=","]
</div>

手順② JSコードを記述

jQueryでHTMLの内容を書き換える。

.u-link でリンクに下線のスタイルをあてています。

  jQuery('.js-mw-checkbox .mwform-checkbox-field-text').html('<a href="/privacypolicy" target="_blank" rel="noopener noreferrer" class="u-link">プライバシーポリシー</a>に同意の上、送信する。');

JavaScript以外でチェック項目にリンクをつける方法

JavaScriptあまり使いたくない・使えない・CSSめっちゃ得意！みたいな人は、こんなやり方をしているパターンも見たことがあるので参考にしてみてください。

<a href="/privacypolicy" target="_blank" rel="noopener noreferrer" class="u-link">プライバシーポリシー</a>[mwform_checkbox name="consent" class="consent" children="に同意の上、送信する。" separator=","]

チェックボックスとリンク部分以外はショートコードで表示させて、リンク部分はHTMLで実装する方法です。↓みたいな並び順で出力されるので、CSSで調整する必要があります。

プライバシーポリシー[チェックボックス]に同意の上、送信する。

個人的にはレスポンシブのことも考えるとちょっと手間だなと思うのでJavaScript派です。