【WordPress】Snow Monkey Formsで条件分岐を実装する方法｜ラジオボタン・チェックボックスで項目を出し分ける

前回、前々回と、WordPressのフォームプラグイン「Snow Monkey Forms」のカスタマイズ方法をご紹介しました。

WordPressのフォームプラグイン「Snow Monkey Forms」で、どこまでデザインカスタマイズできるか試してみた

Snow Monkey Formsのセレクトボックスにカスタム投稿タイプの記事を表示する方法

今回も「Snow Monkey Forms」のフォーム項目をカスタマイズしていきます。
本記事では、選択内容に応じて表示・非表示を切り替える条件分岐項目の作成方法をご紹介します。

Snow Monkey Formsには標準で条件分岐機能が用意されていないため、選択内容に応じた表示切り替えを行うには、独自の改修が必要になります。

本記事で紹介している方法は、プラグイン本体を改修することなくJavaScriptのみで実装できるため、保守性が高い点が特長です。

また、特定の選択肢が選択された場合のみ、追加の入力項目を必須にし、エラーや未入力を防ぎます。

要件

・ラジオボタンまたはチェックボックスで、
「その他」選択時のみ必須項目のテキストエリアを表示する条件分岐を実装する

作成環境

・WordPress バージョン 6.9
・Snow Monkey Forms バージョン 12.0.2
※プラグインのインストールや基本的な使い方については、本記事では割愛します。

実装手順

フォームを作成する

まず「Snow Monkey Forms」でフォームを作成します。

フォームにラジオボタンまたはチェックボックスフィールドを追加し、
name属性を choice-field に設定します。
選択肢は任意の値と「その他」を追加してください。

次に、「その他」を選択した場合に表示させるテキストフィールド（またはテキストエリア）を作成します。
こちらのname属性は other-text に設定します。

※バリデーションはJavaScriptで制御するため、このフィールドでは「必須」にチェックを入れないでください。

JavaScriptファイルにコードを追加

次に、JavaScriptファイルに以下のコードを追加し、適切に読み込ませます。

//ラジオボタン・チェックボックス項目 条件分岐
function updateOtherField() {
    //表示させる要素を指定
    const otherField = document.querySelector('[data-name="other-text"]');
    const otherInput = otherField?.querySelector('input, textarea');

    if (!otherField || !otherInput) return;

    // ラジオボタン・チェックボックスを指定
    const checkedItems = document.querySelectorAll(
        '[data-name="choice-field"] input:checked'
    );

    // 「その他」が含まれているか
    const hasOther = Array.from(checkedItems).some(
        el => el.value === 'その他'
    );

    if (hasOther) {
        // 表示
        otherField.style.display = 'block';

        // 必須にする
        otherInput.setAttribute('required', 'required');
        otherField.classList.add('smf-item--required');

    } else {
        // 非表示
        otherField.style.display = 'none';

        // 必須解除
        otherInput.removeAttribute('required');
        otherField.classList.remove('smf-item--required');

        // 値クリア
        otherInput.value = '';
    }
}

// 初期表示
document.addEventListener('DOMContentLoaded', updateOtherField);

// SMF 画面切り替え対応（入力⇔確認⇔戻る）
document.addEventListener('smfScreenChanged', () => {
    setTimeout(updateOtherField, 50);
});

// 変更検知
document.addEventListener('change', (e) => {
    if (
        e.target.matches('[data-name="choice-field"] input') ||
        e.target.matches('[data-name="other-text"] input, [data-name="other-text"] textarea')
    ) {
        updateOtherField();
    }
});

コードの解説

このJavaScriptでは、ラジオボタンまたはチェックボックスで「その他」が選択されたときだけ、テキストエリアを表示するための処理を行っています。

①「その他」選択時に表示する要素を取得
data-name=”other-text” を指定し、表示・非表示を切り替える対象を取得します。

②選択されている項目を確認
data-name=”choice-field” の中から、現在チェックされているラジオボタン・チェックボックスを取得します。

③「その他」が選ばれているか判定
選択肢の中に「その他」が含まれていればtrueを返します。

④表示の切り替え
・「その他」が選択されている場合
→ テキストエリアを表示し、必須項目に設定

・選択されていない場合
→ テキストエリアを非表示にし、入力内容をクリア

⑤画面切り替え・変更時にも対応
ページ読み込み時や入力内容の変更時、確認画面への遷移時にも自動で判定されます。

name属性をそのまま指定するとSnow Monkey Formsの処理と干渉するため、
プラグインが親要素に付与するdata-name属性を指定しています。

動作確認

作成したフォームをサイトに設置し、表示を確認します。

「その他」を選択した場合のみテキストエリアが表示され、
未選択時には非表示になることを確認できれば成功です。

デモページはこちら

まとめ

今回は「Snow Monkey Forms」で、ラジオボタンまたはチェックボックスの選択内容に応じて、テキストエリアの表示・非表示を切り替える条件分岐方法をご紹介しました。

この実装方法を応用することで、ブロック単位での出し分けをはじめ、複数項目を組み合わせた条件分岐も実装可能です。
例えば、

・「法人」を選択した場合のみ、会社名・部署名・担当者名などの入力ブロックを表示する
・特定のチェック項目にチェックが入った場合のみ、追加の質問項目を表示する

といった、実務でよく求められるフォーム仕様にも柔軟に対応できます。

弊社ではサイト制作や保守管理サービスを行っていますので、
分からない、上手くいかないなどがございましたら代行いたしますのでご連絡ください。

他にもサーバー・ネットワーク保守なども行っておりますので、ネットワークのことなら全てネディアにおまかせください。

お見積もり・お申し込み・お問い合わせはこちら

この記事を読んだ方はこちらも読まれています

WordPressのフォームプラグイン「Snow Monkey Forms」で、どこまでデザインカスタマイズできるか試してみた Snow Monkey Formsのセレクトボックスにカスタム投稿タイプの記事を表示する方法 dmarc-report-converterでDMARCレポートを可視化してみる GoogleサーチコンソールとAIを活用したSEO対策の新たな可能性