將外部表單連線至表單處理常式
建立並發佈表單處理常式後,請設定外部表單以將資料傳送至 Salesforce。
必要版本
| 需要的使用者權限 | |
|---|---|
| 建立表單處理常式: | Marketing Cloud 管理員權限集 和 任何 CMS 工作區參與者角色 |
| 若要發佈表單處理常式: | Marketing Cloud 管理員權限集 和 內容管理員或內容主管的 CMS 工作區參與者角色 |
| 若要設定 CORS 允許清單: | 「修改所有資料」權限 |
在您完成這些步驟之前,請先 建立並發佈表單處理常式。
您可以透過兩種方式將資料從表單傳送至 Salesforce。選取最適合您網站結構與功能的連線類型。
| JavaScript 程式碼片段 (用戶端) | 直接 POST URL (伺服器端) |
|
|---|---|---|
| 運作方式 | 當訪客提交表單時,頁面上的指令檔會將表單資料傳送至 Salesforce。 | 您的表單會將資料直接張貼到 Salesforce URL,頁面上沒有指令檔。 |
| 新增至您的網站 | 您貼到頁面 HTML 的 <script> 標記和表單屬性。 |
您設定為表單或 Webhook 目的地動作的 URL。 |
| 最適用於 | 您可控制 HTML 並可新增指令檔的頁面。 | 不允許自訂指令檔的第三方表單產生器、具有嚴格內容安全性原則 (CSP) 規則的頁面,以及從後端伺服器張貼的表單。 |
| 支援網頁追蹤 | 是 | 否 |
| 支援身分解析 | 是 | 否 |
| 需要 CORS 允許清單項目 | 是 | 是 |
兩種方法都會將資料傳送至相同的表單處理常式,並觸發相同的流程。這兩種方法也需要您在 CORS 允許清單中授權您的網域。
無論何種連線類型,請確定表單中的每個欄位都使用完全符合表單處理常式中對應的外部欄位名稱的 HTML name 屬性。若名稱不相符,表單處理常式便無法取用該值。例如,如果您將外部欄位名稱 email_address 對應至 Email 欄位,則表單中對應欄位的 name 屬性也必須是 email_address。
選項 1:設定您的表單以使用用戶端連線
當您控制頁面的 HTML 並可將指令碼新增至頁面時,請使用此方法。由於指令檔是在訪客的瀏覽器中執行,因此此方法支援網頁追蹤和身分解析。因此,此方法可將表單提交連線至訪客的網路活動。
- 發佈表單處理常式。
-
在「程式碼片段」索引標籤的「用戶端表單處理常式」下,複製追蹤指令檔。指令檔類似此範例。
<script async src="https://YOUR_DOMAIN/lp/assets/scripts/external-form-handler-host.min.js" onload="SFDCFormHandler.init('https://YOUR_DOMAIN/lp')"></script> -
在網站的 HTML 程式碼中,將指令檔貼到關閉
</body>標記前。 -
在「程式碼片段」索引標籤上,複製表單屬性。屬性類似此範例。
<form id="CONTENT_KEY" data-uma-forms="true"></form> -
在您的 HTML 中,將
id和data-uma-forms屬性新增至<form>標記。 -
確認每個表單欄位的 HTML
name屬性符合對應的外部欄位名稱。 - 將主控表單的網域新增至 CORS 允許清單。此步驟會授權您的網域將提交傳送至 Salesforce。
- 若要監視使用者參與,請開啟網路追蹤。
訪客提交表單時,指令檔會將資料傳送至 Salesforce,表單處理常式會處理提交並觸發您的流程。表單處理常式接著會將其重新導向至您設定的成功或錯誤 URL。
選項 2:設定您的表單以使用伺服器端連線
當您無法將程式碼新增至頁面或對程式碼進行自訂設定時,請使用伺服器端連線。透過此方法,表單處理常式會為您提供目的地 URL,且您將表單設定為將其資料傳送至該 URL。由於您未內嵌指令檔,因此此方法適用於不允許自訂 JavaScript 的表單工具。此方法也適用於具有嚴格內容安全性原則 (CSP) 規則的頁面,以及從後端伺服器提交的表單。
-
在表單處理常式的「程式碼片段」索引標籤上,在「伺服器端表單處理常式」下,複製表單動作 URL。URL 類似此範例。
https://YOUR_DOMAIN/lp/cms/form/submit/v1/CONTENT_KEY -
設定表單以將資料傳送至 Salesforce。實作步驟取決於您實作表單的方式。
如果您使用第三方表單產生器或外掛程式 在第三方工具的設定中,尋找用於設定表單動作、張貼至 URL 或 Webhook 目的地的欄位。在該欄位中輸入 Salesforce URL。 如果您可以修改 HTML,但無法新增指令檔 將 <form>標記的action屬性設定為 Salesforce URL,並將method屬性設定為POST。如果您的表單使用後端流程 使用表單資料 (含 application/x-www-form-urlencoded編碼) 將 POST 要求傳送至 Salesforce URL。 -
確認每個欄位的名稱完全符合對應的外部欄位名稱。
只有在欄位完全符合時,表單處理常式才會將這些欄位抓取。
- 將主控表單的網域新增至 CORS 允許清單。此步驟會授權您的網域將提交傳送至 Salesforce。
設定 CORS 允許清單
這兩種連線方法都需要您先授權網域,Salesforce 才能接受表單提交。如果您未授權您的網域,則 Salesforce 會在處理提交之前封鎖提交。若要授權您的網域,請將其新增至 CORS 允許清單。
-
識別主控表單的網域,例如
https://www.example.com。若要授權所有子網域,請使用萬用字元,例如https://*.example.com。 - 將網域新增至 CORS 允許清單。
