MENU
アラフォー女のWEB制作鍛錬ブログ

【Snow Monkey Forms】セレクトボックスのラベルを自動返信メールに表示する方法

WordPress
Snow Monkey Formsの技術記事

WordPressプラグイン「Snow Monkey Forms」でセレクトボックスを使う際、自動返信メールに表示されるのは「値（value）」のみで、「ラベル（表示テキスト）」は反映されません。

しかし、次のようなケースではラベル（日本語）をメールに表示させたいことがあります。

  • JavaScriptやACFと連携するため、valueに半角英数字（例: shop01）を使用
  • ユーザーにはラベルとして日本語（例: 東京店）を表示したい
  • 自動返信メールには、日本語のラベルを表示させたい

本記事では、そのようなケースに対応するセレクトボックスのラベルをメールに反映させる方法を丁寧に解説します。

目次

✅ セレクトボックスの「値」と「ラベル」とは？

セレクトボックスは以下のように、value属性に「値」を、<option>の中に「ラベル」を記述します。

セレクトボックスの値とラベル
"":"選択してください"
"shop01" : "東京店"
"shop02" : "大阪店"

⸻

🛠 解決策：ラベルを隠しテキストボックスに代入する

ステップ1：隠しテキストボックスを追加する

Snow Monkey Formsのフォームに空のテキストフィールド（例：shop-label-text）を追加します。
この項目は後述のJavaScriptで、選択されたセレクトボックスのラベルを代入するために使います。

ステップ2：テキストフィールドをCSSで非表示にする

フォーム内でラベル表示用のテキストボックスが見えないようにします。
確認画面でも見えないようにするために、項目に「高度な設定」＞「追加CSSクラス」に「hidden-field」を追加します。

※注意：このクラス名を入れると、Snow Monkey Formsの画面からこの項目が消えてしまいますが、実際には存在します。
心配な場合はhiddenを使わないクラス名に変更してください。


そして、CSSには次を追加してください。

.hidden-field {
  display: none;
}

ステップ3：JavaScriptでラベルを代入する

以下のJavaScriptを設置してください。
これにより、初期状態と変更時、バリデーションエラー時でラベルを代入できます。

// Snow Monkey Forms の空フォームにセレクトボックスの値を設定する==================
document.addEventListener("DOMContentLoaded", function () {
  const setupShopSelectSync = () => {
    const select = document.querySelector('[name="select-shop-name"]');
    const labelInput = document.querySelector('[name="shop-label-text"]');
    if (!select || !labelInput) return;

    // セレクト→テキストフィールドの反映関数
    const updateLabel = () => {
      const selectedOption = select.options[select.selectedIndex];
      labelInput.value = selectedOption?.text || "";
    };

    // 初期反映
    updateLabel();

    // 古いイベントを削除してから追加（多重登録防止）
    select.removeEventListener("change", updateLabel);
    select.addEventListener("change", updateLabel);
  };

  // 初回実行
  setupShopSelectSync();

  // フォーム全体を監視して、再描画されたら再設定
  const form = document.querySelector("form.snow-monkey-form");
  if (form) {
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "data-screen"
        ) {
          if (form.getAttribute("data-screen") === "invalid") {
            // バリデーションエラーによってフォームが更新されたと判断
            setupShopSelectSync();
          }
        }
      }
    });

    observer.observe(form, { attributes: true });
  }
});

ステップ4：自動返信メールにラベルの値を挿入

Snow Monkey Formsの管理画面で、自動返信メールの本文に [shop-label-text] を挿入すれば、
ユーザーが選択したラベル（日本語）が表示されるようになります。

選択された店舗： {shop-label-text}

⸻

🎯 まとめ

項目内容
課題自動返信メールにセレクトボックスのラベルが表示されない
原因Snow Monkey Formsは「値（value）」のみメールに反映
解決方法隠しテキストフィールドにJavaScriptでラベルを代入し、メールに出力

この方法を使えば、ユーザーにわかりやすい情報を自動返信メールで提供でき、
ユーザー体験の向上や問い合わせ対応の正確性にもつながります。

WordPress
JavaScript SnowMonkeyForms WordPress 開発者向け
Snow Monkey Formsの技術記事

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！

コメント

コメント一覧 （1件）

目次