【第379回】 Marketing Cloud Next ： フォームハンドラーの設定方法

Marketing Cloud Next Growth & Advanced Edition の Winter ’26 リリースでは、新たに フォームハンドラー機能 が追加されました。これにより、外部フォームの構造を変更することなく、フォームで取得したデータを簡単に Salesforce に連携できるようになります。

設定時には、外部フォームのフィールドと Salesforce オブジェクトのフィールドを正しく対応付けることが重要です。特に、HTML フォームの name 属性と Salesforce 側のフィールド名が完全に一致している必要があります。大文字・小文字の違いも区別されるため、注意してください。

今回の記事では、フォームハンドラー機能の設定手順を解説します。

1. CORS（クロスオリジンリソース共有）許可リストの設定

1. 外部からフォーム送信を許可するには、Salesforce の CORS 設定で、外部サイトのドメインを登録する必要があります。手順は以下の通りです。

1. 「設定」で「CORS」と検索して選択したら「新規」をクリックします。

2. オリジン URL パターンを追加します。

オリジン URL パターン入力のポイント

• プロトコルとドメイン名を含める：URL パターンには、必ず http または https とドメイン名を含める必要があります。最後のハイフンは登録できませんので外してください。

• ワイルドカードの利用： * を使用してサブドメインをまとめて許可できます。ただし、第 2 レベルドメインの前に置く必要があります。

  • 例：https://*.example.com → example.com のすべてのサブドメインが許可されます。

今回、私の場合は Marketing Cloud Engagement の Cloudpages を利用しますので、以下を入力してあります。

2. フォームハンドラーを作成する

1. 続いて、「コンテンツ」タブで、コンテンツの「追加」をクリックし、「フォームハンドラー」をクリックします。

2. 一旦、フォームハンドラーに任意の名前を付けて、保存します。

3. 外部フィールドをマッピングする

1. 「データソース」セクションで、データソースの追加をクリックします。

2. ここでは、フォーム送信後に送信された内容がデータソースとなるわけですが、その対象となるオブジェクトを選択します。選択できるのは、取引先・取引先責任者・リード・見込み客のいずれかです。

3. 左側の項目パネルからマッピングする項目を選んで、各項目にマッピングする「External Field Name」を入力します。

考慮事項

• 必須となる項目はすべて選択します。

• External Field Name には、外部フォームの HTML 上にある「name」の属性値を入力します。ここでは、大文字と小文字が厳密に区別されますので正確に入力してください。

• External Field Name に半角スペースを用いることはできません。半角スペースがあると、フローで保存する際にエラーになります。

• Salesforce オブジェクトのチェックボックス型のフィールドは、ブール値（true または false）で保存されるので、HTML フォームのチェックボックスも、選択状態は true、未選択は false としてください。

• 日付や時間の値は、必ず以下の規定の形式で入力し、タイムゾーンも含める必要があります。

4. スパム保護（任意）

自動化されたスパム送信を防ぐため、フォームハンドラーには 不可視の ハニーポット項目 を追加できます。

🐝 ハニーポット項目とは？

• 見えない入力欄 をフォームの中に仕込むことです。

• 人間の利用者には CSS で非表示にしてあるので、普通は入力できません。

• ところが、スパムボット（自動プログラム）は「フォームの全入力欄に入力する」ように作られていることが多いため、この隠し欄にも入力してしまいます。

つまり、隠し欄に入力があったら「これはボットだ！」と判断できる 仕組みです。

1. 左側の「Spam Protection Fields」パネルから「Honeypot」フィールドを追加します。

2. 外部フィールド名には「comments」などの、如何にもボットが入力しやすそうな名前を設定しておきます。

3. フォームの HTML に、同じ name 属性を持つ隠し入力フィールドを追加します。

5. 送信後のリダイレクト設定

続いて、フォーム送信が 成功した場合 と 失敗した場合 にユーザーをリダイレクトさせる URL を入力します。

1. 今回はかなり適当に、送信に成功したら https://www.salesforce.com/  に飛ばし、失敗したら https://www.google.com/ に飛ばしておきます。

2. 次にフローに遷移するので、ここまで来たら、一度保存をします。

6. フローによる自動処理

外部ページでフォーム送信後に、リード作成、同意レコードの作成、メール送信などを自動化するための、フローを作成します。

1. フォームハンドラーの「フロー」のセクションで「新しいフロー」のボタンをクリックします。

2. ドラフトのフローが自動作成されるので、フロービルダーを開きます。

3. 通常、データソースと同じオブジェクトのレコードを作成するための要素がデフォルトで設置されています。

4. このままアクティブ化もできますが、同意レコードの作成やメール送信の要素を設定して、保存します。

5. アクティブ化します。これによりフォームハンドラーも自動的に公開されます。

注意：フロー作成後にフォームハンドラーを編集した場合、自動的には反映されません。新しいフローバージョンを作成する必要があります。

7. フォームハンドラーの公開

1. フローが有効化され、フォームハンドラーが公開されていることを確認したら、「Tracking Script」をコピーします。

2 今回、私は Marketing Cloud Engagement の Cloudpages を外部 Web サイトに見立てていますので、Code View タブを開いて、そのスクリプトを </body> タグの直前に貼り付けます。

3. 続いて、「Form Attributes」をコピーして「フォーム」（<form>）タグ内に追加します。

この追加の方法が分からない場合は、今回、私が HTML ブロックに貼り付けたコードを記載しますので、以下を参考にしてください。

<meta charset="UTF-8">
<title>Contact Form</title>
<style>
  body { font-family: Arial, sans-serif; background-color: #f4f7f9; margin:0; padding:20px; }
  .form-container { max-width:500px; margin:40px auto; background:#fff; padding:30px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
  .form-container h2 { text-align:center; margin-bottom:25px; color:#333; }
  .form-group { margin-bottom:20px; }
  .form-group label { display:block; margin-bottom:8px; font-weight:bold; color:#444; }
  .form-group input { width:100%; padding:12px; border:1px solid #ccc; border-radius:8px; font-size:14px; transition:border-color 0.3s; box-sizing: border-box; }
  .form-group input:focus { border-color:#0070d2; outline:none; }
  .submit-btn { width:100%; padding:14px; background-color:#0070d2; border:none; border-radius:8px; color:#fff; font-size:16px; font-weight:bold; cursor:pointer; transition: background-color 0.3s; box-sizing: border-box; }
  .submit-btn:hover { background-color:#005bb5; }
  /* ハニーポット（見えないように非表示） */
  .honeypot { display:none; }
</style>

<div class="form-container">
  <h2>Contact Us</h2>
  <form id="MCO27UGLAB4BGFZMV5P7TGQ2PUK4" data-uma-forms="true" method="post">

    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="lastName" required="">
    </div>

    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="firstName" required="">
    </div>

    <div class="form-group">
      <label for="emailAddress">Email Address</label>
      <input type="emailAddress" id="emailAddress" name="emailAddress" required="">
    </div>

    <!-- ハニーポット項目 -->
    <div class="honeypot">
      <label for="comments">Comments</label>
      <input type="text" id="comments" name="comments">
    </div>

    <!-- 非表示フィールド -->
    <input type="hidden" name="CreatedDate" value="">
    <input type="hidden" name="LastModifiedDate" value="">
    <input type="hidden" name="Status" value="New">

    <button type="submit" class="submit-btn">Submit</button>
  </form>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const now = new Date().toISOString();
  document.querySelector("input[name='CreatedDate']").value = now;
  document.querySelector("input[name='LastModifiedDate']").value = now;
});
</script>

4. 最後はオプションにはなりますが、必要に応じて外部 Web サイトトラッキングを有効にし、ユーザーの行動も追跡できるようにします。この実装手順は以下の記事を参考にしてください。

フォームを送信してレコードの作成を確認する

1. Cloudpages にアクセスして、フォームを送信します。 

2. 送信に成功したので、https://www.salesforce.com/ に遷移しました。

3. リードも出来上がりました。成功です。

いかがでしたでしょうか。

フォームハンドラーは、外部フォームからの入力データを Salesforce に正しく取り込み、自動処理やスパム防止、送信後のリダイレクトまで一連の流れを管理できる便利な仕組みです。特に、フィールド名の完全一致 や 日付・時刻のフォーマット に注意しながら設定するとスムーズに活用できます。

今回は以上です。

次の記事はこちら

前回の記事はこちら

私の note のトップページはこちら