データ

onChange のハンドラには、以下のようなフォーマットのデータが送られてきます。

{
  id: string;
  label: string;
  value: string | string[];
  type: string;
  required: boolean;
}[]

• id: フォーム項目のID
• label: フォーム項目の項目名
• value: フォーム項目に入力・選択された値。項目がチェックボックスの場合、有効にしたチェックボックスの値が配列で渡ります。
• type: フォーム項目の種類。郵便番号が複数フィールドに分かれている場合は「zip」が返されます。
• required: 必須項目の場合は「true」、任意項目の場合は「false」が返されます。

2つの項目の値をもとに合計金額を自動計算して表示する

例えば、有料のセミナー受付フォームでは、セミナーの種類と参加人数から合計金額の計算が必要になる場合があります。

サンプル項目

以下の zip ファイルをダウンロードして解凍し、JSON ファイルをフォームの項目で読み込みます。

seminar.json.zip をダウンロード

サンプルコード

以下のコードを必ずフォームを設置しているページ内（iframe のソースを貼っているページ）に埋め込んでください。

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm() {
    MTNetFormDataLayer.push(arguments);
  }
  MTNetForm("onChange", (formData) => {
    const seminar = formData.find((item) => item.label === "セミナー種類");
    const seminarType = seminar?.value;
    if (!seminarType) {
      return;
    }
    const seminarPrice = seminarType.match(/松/) ? 20000 : seminarType.match(/竹/) ? 10000 : 5000;
    const amount = parseInt(formData.find((item) => item.label === "参加人数")?.value, 10) || 1;

    const currentTotalPrice = parseInt(formData.find((item) => item.label === "合計金額")?.value, 10) || 0;
    const totalPrice = seminarPrice * amount;

    if (currentTotalPrice === totalPrice) {
      return;
    }

    MTNetForm("updateValues", {
      "合計金額": totalPrice,
    }, {
      noTriggerEvent: true,
    });
  });
</script>

updateValues の処理は通常 change イベントを発生されるので、カスタムスクリプトの処理内容によっては処理がループする可能性があります。noTriggerEvent: true のオプションを渡すことで、change イベントが発生しないようにできます。