お弁当注文の取りまとめ、イベント参加費の集金、クラスTシャツ購入申し込み。こういった、みんなから商品や個数や金額がバラバラの注文を取りまとめるといった機会があると思います。

「フォームで注文を集めるときに、その金額の合計が自動で表示されたらいいのに」と思ったことはないでしょうか。

MovableType.net のフォーム機能では、2026年5月19日にカスタムスクリプトでイベントハンドラが使えるようになりました。イベントハンドラを受け取る JavaScript を書けば、選択したアイテムの数量と金額をもとに合計金額を自動計算した値を表示するなど、さまざまな応用が可能です。

この記事では、「お弁当注文フォーム」を例に、実際のフォームとカスタムスクリプトをご紹介します。

お弁当注文フォームの実例

お弁当の種類と個数を選ぶと、合計金額が自動で表示される注文フォームです。この例では、幕の内弁当：1,500円、中華弁当：1,300円、おにぎり弁当：500円の3種類があり、希望の数量を指定すると、自動計算された合計金額を表示します。

まずは、実際に動くフォームのサンプルを操作してみてください。選択した内容に応じて、「合計金額」が変わるのがわかります。下のリンクを押すと、フォームが開きます。

設定方法

フォームの作成

まず、MovableType.net の管理画面でフォームを作成します。通常のフォームと同じように、お名前やメールアドレスなどの項目を設定します。金額の自動計算を行うには、商品数などを指定する項目と合計金額を表示する項目の2つが必要です。

1. 数量を入力する項目（幕の内弁当、中華弁当など）として、「数値入力」を追加

お弁当の数を指定する箇所は、「数値入力」項目として追加します。

数値の入力方法は、数値フィールド（数値を自分で入力できる）、範囲スライダー（スライダーを操作して数値を決める）、ドロップダウンリスト（ドロップダウンリストの選択肢から数値を決める）の3種類あります。商品の種類や注文受付可能数に応じて、使いやすい物をお選びください。

各項目設定画面の「完了」ボタンのすぐ上に、項目ごとのIDが表示されます。このIDの値は、後で使うので控えておいてください。

2. 合計金額を表示する項目として、「1行テキスト」を追加

次に、計算結果の合計金額を表示する場所として「1行テキスト」項目を追加します。このとき、表示モードは「閲覧のみの状態で表示」としてください。

カスタムスクリプトの作成

MovableType.net のマニュアルにある例を参考に、お弁当の数と金額を自動計算するためのカスタムスクリプトを作ります。

フォームのカスタムスクリプト（イベントハンドラ） - マニュアル | MovableType.net

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm() {
    MTNetFormDataLayer.push(arguments);
  }

  // フォームのいずれかの項目が変更されたときに実行される処理
  MTNetForm("onChange", (formData) => {

    // 各メニューの「フォーム項目ID」と「単価」の対応表
    // IDは、管理画面の項目の編集画面の一番下で確認できる
    const priceMap = [
      { id: "XXXXXXXX-(FIELD01)-XXXXXXXX", price: 1500 }, // 幕の内弁当
      { id: "XXXXXXXX-(FIELD02)-XXXXXXXX", price: 1300 }, // 中華弁当
      { id: "XXXXXXXX-(FIELD03)-XXXXXXXX", price:  500 }, // おにぎり弁当
    ];

    // 各メニューの「注文数 × 単価」を合計する
    let total = 0;
    for (const { id, price } of priceMap) {
      const qty = parseInt(formData.find(item => item.id === id)?.value, 10) || 0;
      total += qty * price;
    }

    // 現在の合計金額欄の値を取得する（IDで指定。カンマと円を除いてから数値に変換）
    const current = parseInt(formData.find(item => item.id === "XXXXXXXX-(CALC_FIELD)-XXXXXXXX")?.value?.replace(/[,円]/g, ""), 10) || 0;

    // 合計金額に変化がなければ何もしない
    if (current === total) return;

    // 合計金額欄を更新する（noTriggerEvent: true で更新のたびに再計算が走るのを防ぐ）
    MTNetForm("updateValues", { "XXXXXXXX-(CALC_FIELD)-XXXXXXXX": total.toLocaleString() + "円" }, { noTriggerEvent: true });
  });
</script>

各お弁当項目のIDと金額を編集する

{ id: "XXXXXXXX-(FIELD01)-XXXXXXXX", price: 1500 }, // 幕の内弁当 のIDと金額の箇所を編集してください。ID は、フォームの管理画面の各項目設定枠の最下部に記載されています。

合計金額を表示する項目のIDを編集する

自動計算した値を表示するための項目のIDを XXXXXXXX-(CALC_FIELD)-XXXXXXXX と差し替えてください。2箇所あります。

コードを埋め込む

カスタムスクリプトの準備ができたら、フォームの埋め込みコードと共に、任意のページに埋め込んでください。カスタムスクリプトを先に、次にフォームの埋め込みコードの順です。

ウェブサイトにフォームを設置する - マニュアル | MovableType.net フォーム

まとめ

このように、フォーム入力イベントを受け取って任意の処理を実行するカスタムスクリプトを書けば、柔軟なフォームのカスタマイズが可能です。ぜひお試しください。