Amazon10/19まで!プライム感謝祭開催中! セール会場へ

Snow Monkey Forms│プライバシーポリシー用チェックボックスの文字にアンカーリンクをつける方法

Snow Monkey Formsでチェックボックスの文字にアンカーリンクをつけたくないでしょうか?

Snow Monkey Formsでチェックボックスの文字にアンカーリンクを設定したい場面。

リンクと同意チェックを別の操作として配置します。ラベル内のHTML置換を避けると、リンクの移動とチェックの切り替えを区別できます。

通常の状態ではチェックボックスにアンカーリンクを設定できない様子。

同意欄の前後に通常の段落ブロックでポリシーへのリンクを置く方法を紹介します。

コードを追加することでチェックボックスの文字にアンカーリンクが設定された状態。

プライバシーポリシーなどの同意で使えるテクニックです。

チェックボックスの同意ラベルを残し、その近くに独立したリンクを置きます。リンクを開く操作と、同意のチェックを切り替える操作を分ける方法です。

Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

Snow Monkey Formsでチェックボックスの文字にアンカーリンクをつける方法│HTMLのみ

簡単な方法を見つけたのでメモしておきます。

HTMLのみでチェックボックスの文字にアンカーリンクをつける設定画面。

項目にprivacy-policyのクラスを追加。

SMFのチェックボックスには「プライバシーポリシーを確認して同意する」という文字を残し、同意を必須にする場合はSMF側の必須設定を有効にします。隣に段落ブロックで自分のポリシーページへのリンクを追加します。空のチェックボックスにせず、リンク先は実際の公開URLを選んでください。

.privacy-policy .wp-block-group.is-row {
    justify-self: center;
}
.privacy-policy .smf-checkboxes-control__control {
    line-height: 1.4;
}

同意欄を必須にする場合は、SMFの必須設定を保存した後、未チェックのまま確認ボタンを押してエラーになることを確認します。CSSだけで必須にはなりません。

CSSなどの調整後に表示を確認している画面。

チェックボックスのラベルを書き換える旧JavaScriptは不要です。追加済みの場合は、enqueue_custom_script関数と対応するadd_actionを削除してください。同じ関数を2回定義しないでください。

Tabでリンクとチェックボックスへ移動し、Spaceでチェックだけを切り替えられることを確認します。見た目の配置だけでは必須の検証は追加されません。実フォームで未同意時のエラーも確認してください。戻す場合は追加段落・グループのクラス・追加CSSを削除します。

実フォームで同意とリンクを別々に確認する

未チェックのまま確認ボタンを押すと、同意欄に必須エラーが表示されました。Spaceでチェックを入れると確認画面へ進め、戻った後も同意のチェックが維持されました。

Tabでチェックボックスから隣のリンクへ移動し、Enterでリンク先を開きます。リンクを開いた操作だけでチェックが変わらないことも確認します。375pxの表示幅でも、リンクと同意欄を別々に操作できました。

確認ボタンのTab枠も見やすくする場合は、フォーム限定のボタンCSSを使います。

Snow Monkey Formsの同意欄と独立したリンク、Tab枠を375pxで確認した実画面
2026年10月2日撮影。WordPress 7.1.2・SWELL 2.19.0・Snow Monkey Forms 13.0.0の隔離環境。375px幅で独立した説明リンクと同意欄を確認した実画面です。実際のサイトでは説明リンクを自分のポリシーページへ変更します。

操作を分けた表示見本

以下は送信しないチェック操作の見本です。リンクはこのページ内の説明へ移動します。実フォームでは自分のプライバシーポリシーへ変更してください。

表示見本の説明を読む

これは操作確認用の見本で、実際の同意の取得・送信・保存は行いません。

よくある質問:同意チェックボックスの近くにプライバシーポリシーのリンクを付ける方法

同意のチェックボックスの文字に、プライバシーポリシーへのリンクを付けられますか?

記事では、チェックボックスのラベル内にHTMLを置換する方法は避け、同意欄の前後に通常の段落ブロックでポリシーへのリンクを置く方法を紹介しています。リンクの移動とチェックの切り替えを区別できるようにします。

設定のやり方を教えてください。

記事では、SMFのチェックボックスには「プライバシーポリシーを確認して同意する」という文字を残し、隣に段落ブロックで自分のポリシーページへのリンクを追加します。項目にprivacy-policyのクラスを追加します。空のチェックボックスにせず、リンク先は実際の公開URLを選んでください。

同意を必須にするには、どうしますか?

記事では、SMF側の必須設定を有効にし、保存した後、未チェックのまま確認ボタンを押してエラーになることを確認します。CSSだけでは必須になりません。

以前のJavaScriptを使っていた場合は、どうしますか?

記事では、チェックボックスのラベルを書き換える旧JavaScriptは不要です。追加済みの場合は、enqueue_custom_script関数と対応するadd_actionを削除してください。同じ関数を2回定義しないでください。

リンクを開くと、チェックが入ってしまいませんか?

記事では、Tabでリンクとチェックボックスへ移動し、Enterでリンク先を開きます。リンクを開いた操作だけでチェックが変わらないことも確認します。375pxの表示幅でも、リンクと同意欄を別々に操作できました。

確認ボタンのフォーカス枠も、見やすくできますか?

記事では、確認ボタンのTab枠も見やすくする場合は、フォーム限定のボタンCSSを使います。

記事の見本は、実際の同意を取得しますか? 確認の範囲は?

記事では、操作を分けた表示見本は送信しないチェック操作の見本で、リンクはこのページ内の説明へ移動します。実際の同意の取得・送信・保存は行いません。実フォームでは自分のプライバシーポリシーへ変更してください。確認は2026年10月2日、WordPress 7.1.2・SWELL 2.19.0・Snow Monkey Forms 13.0.0の隔離環境で、375px幅の実画面を確認しています。最新は公式で確認してください。

  • URLをコピーしました!

プラグインの設定でお困りなら

プラグインの導入・カスタマイズ代行

プラグインの選定から設定、競合の解消、動作に合わせた追加実装まで承ります。1時間 ¥8,000〜(税込)。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次