ホームページ制作関連の技術ネタを備忘録的にまとめています

はじめに

WordPressのフォームプラグインとして長年愛用されてきた「MW WP Form」の開発が終了し、確認画面付きフォームの移行先として「Snow Monkey Forms」を採用するケースが増えています。

Snow Monkey Formsは非常に使い勝手の良いプラグインですが、実務でよくある「『プライバシーポリシーに同意する』の『プライバシーポリシー』の文字部分だけにアンカーリンクを貼る」というカスタマイズは、標準機能では設定できません。

さらに、JavaScriptを使って無理やりリンクを挿入しても、Snow Monkey Forms特有の画面遷移（Ajax）によって、「必須項目の入力エラーなどでフォームが再描画されると、せっかく貼ったリンクが消えてしまう」という問題が発生します。

本記事では、この問題を解決し、エラー時にもリンクが消えず、セキュリティも考慮した最も堅牢なカスタマイズ方法を解説します。

解決策の全体像

このカスタマイズは、以下の3つの手順で実現します。

1. Snow Monkey Formsの設定: フォームに識別用のクラス名を付与する。

2. PHP（functions.php）: 特定のページでのみスクリプトを実行する。

3. JavaScript（MutationObserver）: フォームの変更を監視し、エラー等でHTMLが書き換わっても即座にアンカーリンクを再適用する。

ステップ 1: Snow Monkey Forms側の設定

まず、フォームの編集画面（ブロックエディタ）で下準備を行います。

1-1. チェックボックスの作成

1. フォームに「チェックボックス」ブロックを追加し、設定で必須にします。

2. 「OPTIONS」に、リンクにする前のプレーンテキストを入力します。

   • 入力例: プライバシーポリシーに同意する

1-2. 親ブロックへのクラス名設定

JavaScriptでフォームを特定するため、チェックボックスのブロックにクラス名を付けます。

1. Snow Monkey Formsのチェックボックス全体のブロックを選択し、右側のサイドバーで「高度な設定」を開きます。

2. ラベルを非表示にして、チェックボックスだけ表示するようにします。

3. 「追加CSSクラス」に以下を入力します。

   • クラス名: privacy-policy-consent

ステップ 2: コードの設置（functions.php）

以下のコードを、テーマの functions.php またはプラグイン「Code Snippets」に追加してください。

このコードは以下の処理を自動で行います。

• お問い合わせページ（contact）でのみ実行し、パフォーマンスを維持。

• 指定したテキストをアンカーリンク付きのHTMLに置換。

• MutationObserver を使い、フォームの再描画後もリンクを維持。

• rel="noopener noreferrer" を付与し、セキュリティとパフォーマンスを確保。

<?php
/**
* Snow Monkey FormsのチェックボックスラベルをJavaScriptで書き換えてリンクを挿入する
* – 特定のページでのみ実行
* – エラー表示時のリンク消失に対応（MutationObserver使用）
* – セキュリティ対策（noopener noreferrer）済み
*/
function smf_add_privacy_policy_link() {
// 【重要】フォームが設置されているページのスラッグに合わせて修正してください
if ( ! is_page(‘contact’) ) {
return;
}

// jQueryが読み込まれていることを確認
wp_enqueue_script(‘jquery’);

// JavaScriptコードを定義
$script = <<<EOT
(function($) {
function applyPrivacyPolicyLink() {
// ステップ1で設定したCSSクラスを持つ要素を検索
let consentField = $(“.privacy-policy-consent”);

if (consentField.length) {
// その要素内のチェックボックスのラベルを全て取得
consentField.find(“.smf-checkbox-control__label”).each(function() {
let label = $(this);

// 無限ループ防止：既にリンク適用済みなら何もしない
if (label.find(‘a’).length > 0) {
return;
}

// ラベルのテキストが「プライバシーポリシーに同意する」と完全に一致するか確認
if ($.trim(label.text()) === “プライバシーポリシーに同意する”) {

// アンカーリンク付きの新しいHTMLに置換
// 【重要】URLは実際のプライバシーポリシーページのパスに合わせてください
// target=”_blank”使用時の脆弱性対策としてrel=”noopener noreferrer”を付与
let newHtml = ‘<a href=”/privacy-policy/” target=”_blank” rel=”noopener noreferrer”>プライバシーポリシー</a>に同意する’;

label.html(newHtml);
}
});
}
}

// ページ読み込み完了時に実行
$(document).ready(function() {
// 1. 初回実行
applyPrivacyPolicyLink();

// 2. MutationObserverでDOMの変更を監視
// エラー表示などでフォームがAjax再描画された際にリンクを再適用する
const targetNode = document.querySelector(‘.privacy-policy-consent’);
if (targetNode) {
const observer = new MutationObserver(function(mutationsList, observer) {
// 変更が発生したら、リンク適用関数を実行
applyPrivacyPolicyLink();
});

// 監視オプション: 子要素や属性の変更を監視
const config = { childList: true, subtree: true, attributes: true };

// 監視を開始
observer.observe(targetNode, config);
}
});
})(jQuery);
EOT;

// 作成したJavaScriptコードをインラインで追加
wp_add_inline_script(‘jquery’, $script);
}
add_action(‘wp_enqueue_scripts’, ‘smf_add_privacy_policy_link’);
?>

修正が必要な箇所

• if ( ! is_page('contact') ): フォームを設置している固定ページのスラッグに変更してください。

• href="/privacy-policy/": サイト内の実際のプライバシーポリシーページのURLに変更してください。

技術的なポイント：なぜ「MutationObserver」が必要なのか？

Snow Monkey Formsは、確認画面への遷移やエラー表示の際、ページ全体を再読み込みせず、JavaScript（Ajax）を使ってフォーム部分だけを動的に書き換えます。

通常のJavaScript（document.ready のみ）では、最初のページ表示時にしかリンク置換が行われません。そのため、ユーザーが入力ミスをしてエラーメッセージが表示された瞬間、フォームが初期化されてリンクが消えてしまうのです。

これを防ぐために採用しているのが MutationObserver（DOM変更監視） です。 これは「指定したHTML要素に変化があったら即座に知らせる」機能で、これにより**「フォームが書き換わったら、すかさずリンクを貼り直す」**という処理が可能になり、どんな状況でもリンクが表示され続けるようになります。

まとめ

MW WP Formの終了に伴い、Snow Monkey Formsへの移行が進んでいますが、こうした細かい要件を満たすには少し工夫が必要です。

今回紹介した方法は、単にリンクを貼るだけでなく、以下の点を考慮した実務レベルのコードです。

• UXの維持: エラーで再描画されてもリンクが消えない。

• 安全性: noopener noreferrer でセキュリティリスクを排除。

• 効率性: 必要なページだけで動作し、サイトを重くしない。

「同意チェックボックスのテキストにリンクを入れたい」という案件に遭遇した際は、ぜひこのコードを活用してみてください。