管理 Customer Insights - Journeys 表單

本文說明如何編輯、解除發佈和管理 Customer Insights - Journeys 中的表單。

編輯即時表單

如果您的表單已發佈，而您需要加以更新，請選取頂端功能區上的編輯按鈕。 您可以繼續編輯即時表單，一旦選取儲存按鈕後，就會自動發佈所有的變更。

重要

若您選擇建立表單的複本，則必須發佈新建立的副本。

表單會儲存在 CDN，所有資料都會在其中進行快取，讓訪客的網頁載入時間盡可能縮短。 可能需要長達 10 分鐘的時間重新整理快取，然後才能看到對網頁的變更。 如果您將此參數 #d365mkt-nocache 新增至網頁 URL，則可以在頁面中檢查變更的結果。 切勿與客戶分享包含此參數之頁面的連結。 此參數會繞過 CDN 快取，使頁面載入速度減慢。

解除發佈表單

若要解除發佈即時表單，請選取停止按鈕。 表單已從 CDN 中移除，因此網頁訪客無法再提交該表單。 因有瀏覽器快取的緣故，表單可能仍然可見，但無法提交。 表單狀態會變更為草稿。

表單欄位屬性

在畫布上選取欄位後，就可以在右窗格中看到其屬性。

• 預留位置文字：欄位中的預留位置。 使用者開始在欄位輸入文字後，預留位置就會自動消失。
• 預設值：設定此欄位的預設值。 如果已設定預設值，就看不到預留位置。
• 必要：如果已啟用，則使用者無法在此欄位為空白時，提交表單。
• 驗證：設定檢查欄位內容的規則。 如果不符合驗證規則，使用者就無法提交表單。 為電子郵件和電話號碼欄位設定正確的驗證十分重要。
• 隱藏欄位：如果已啟用，則表單中看不到此欄位。 您可以使用隱藏欄位，隨著表單提交來儲存多餘的中繼資料。

注意

確定所有電話號碼欄位驗證都已設定為「電話號碼」。此現成可用驗證會檢查電話號碼格式是否與連絡人接觸點同意建立作業的電話號碼格式需求相容。 電話號碼必須採用以「+」符號開頭的國際格式。

自訂驗證

若要建立自訂驗證，請啟用驗證選項，並選取自訂。 快顯對話方塊會出現，您可在其中輸入規則運算式 (RegExp)。 例如，您可以使用 RegExp 來檢查輸入的值是否符合特定的電話號碼格式。

使用主題設定表單的樣式

主題區段可以選取右窗格中的筆刷圖示來開啟。 主題控制所有類型的欄位、按鈕和文字的樣式。 設定欄位的主題之後，就會影響表單中所有相同類型的欄位。

主題功能是方便用於編輯 HTML 格式 CSS 類別定義的介面。 此功能僅適用於現成可用的表單樣式。 自訂 CSS 類別未具體呈現，但您仍然可以使用 HTML 程式碼編輯器來編輯自訂 CSS 類別。

主題區段可讓您設定：

• 背景：定義整個表單的內部背景色彩和框線樣式。
• 文字樣式：定義標題 1、標題 2、標題 3、段落、欄位標籤。 欄位標籤樣式不影響核取方塊和選項按鈕標籤，因為這些標籤可以分別設定。 文字樣式定義包括字型家族、字型大小、字型色彩、文字樣式和行高。 您也可以設定內部和外部間距、寬度和對齊方式。 除了這些文字樣式之外，您還可以設定標籤位置 (上、左、右) 以及欄位標籤所需的色彩。
• 輸入欄位分組為 3 個類別：
  1. 文字輸入、下拉式清單和查詢欄位：這三種視覺效果樣式的欄位共用相同的樣式定義。 您可以定義預留位置和輸入文字樣式的字型家族、大小、色彩和樣式。 您也可以設定欄位背景色彩、功能表背景色彩、圓角、框線、大小、對齊方式以及內部和外部間距。 請注意，欄位標籤可以使用文字樣式來設定。
  2. 選項按鈕：選項按鈕有其本身的標籤設定，允許您設定字型家族和大小。 您可以設定所有選項和選定選項的文字色彩、樣式和背景色彩。 您還可以定義選項按鈕的圓角、寬度以及內部和外部間距。
  3. 核取方塊 - 核取方塊欄位有其本身的標籤設定，允許您設定字型家族、大小。 您可以對所有選項和選定選項設定不同的文字色彩、樣式和背景色彩。 您還可以定義核取方塊的圓角、寬度以及內部和外部間距。
• 按鈕和連結：按鈕定義可讓您設定字型家族、大小、色彩、文字樣式、按鈕色彩、框線對齊方式以及內部和外部間距。 超連結定義可讓您設定字型家族、大小、色彩和文字樣式。

注意

2023 年 9 月版本之前建立的表單，其使用主題功能變更表單樣式的選項有限。 您可選取佈景主題區段中的啟用按鈕，以啟用更多樣式選項。 這會將您的表單樣式更新為與佈景主題功能相容的最新版本。

自訂字型

有兩種方法可以在表單中使用自訂字型：

1. 將字型設定為「繼承」：建議用於已內嵌至您自己頁面的表單。 該表單會繼承您頁面中的表單。
2. 新增您自己的自訂字型：建議用於當做獨立頁面託管的表單。 您可以使用自訂字型區段中的佈景主題功能上傳自訂字型。 您上傳的自訂字型可以在所有文字樣式定義中使用。

預覽版：Copilot - 表單主題小幫手

重要

預覽功能是未完成但已在正式發行前提供的功能，這些功能可讓客戶及早存取並提供意見反應。 預覽功能不供生產時使用，而且可能功能不多或者受限。

Microsoft 不支援此預覽功能。 Microsoft Dynamics 365 技術支援無法協助您處理問題。 預覽版功能不用於生產用途，特別是用於處理受法律或法規合規要求約束的個人資料或其他資料。

重要

您只能將主題小幫手用於您擁有和營運的網站。 主題小幫手不可用來複製第三方網站。

主題小幫手是 Customer Insights - Journeys 中的 Copilot 功能。 您可以使用主題小幫手，從您擁有和控制的現有網站擷取樣式。 若要使用主題，請輸入網站 URL，並選取擷取樣式。 此程序可能需要幾分鐘時間。 您可以繼續進行工作，稍後再回來檢查結果。 小幫手從網站擷取樣式後，就會將樣式套用至表單的主題。

表單設定

表單設定讓您可以設定表單的進階屬性，並定義在表單提交之後會發生的動作。

• 重複記錄：選擇您的原則以處理重複記錄。
• 感謝您通知：如果使用者成功提交表單，則會顯示此訊息。
• 錯誤通知：如果提交表單時發生錯誤，則會顯示此訊息。
• 提交後重新導向：如果啟用，您可以輸入要在表單提交後，將使用者重新導至的 URL。

如何處理重複記錄

處理連絡人及潛在客戶實體重複記錄的預設方法並不相同。

• 連絡人 (預設值：使用電子郵件更新連絡人)：如果使用者提交的表單具有現存的電子郵件地址，則表單提交會更新現有的記錄。 沒有建立任何新的記錄。
• 潛在客戶 (預設：一律建立新記錄)：如果使用者提交的表單具有現存的電子郵件地址，則會建立具有相同電子郵件地址的新記錄。

您可以使用表單設定中的重複資料下拉式清單來變更預設原則。 您也可以建立 自訂比對策略。

建立自訂比對策略

您可以建立新的比對策略，以選擇處理重複記錄的方法。

1. 選取左下角的功能表來存取設定。
2. 在 Customer engagement 區段中，開啟表單比對策略。
3. 選取加號圖示以建立新的比對策略。
4. 命名比對策略，並選取目標實體。
5. 儲存比對策略 (不要選取儲存後關閉，因為您必須留在此記錄上)。
6. 新增用於檢查該記錄是否存在的比對策略屬性 (欄位)。
7. 儲存您的新比對策略。
8. 現在可以在表單設定的重複記錄清單中選取新建立的比對策略。

欄位類型

欄位類型和格式是由屬性中繼資料所定義。 無法變更欄位類型和格式。 但是，您可以在格式未定義的欄位類型中，變更呈現控制項。

輸入	格式	呈現控制項	描述
單行文字	電子郵件、文字、URL、電話、號碼	自動根據格式來設定	簡單輸入欄位。 自動根據格式來設定驗證。
多行文字	文字區域	文字區域	接受所有類型文字值的文字區域輸入欄位。
選項組	n/a	選項按鈕	包含有限個預定義值 (依資料庫中定義) 的欄位。 呈現為一組選項按鈕，每個值有一個按鈕。
選項組	n/a	下拉式清單	包含有限個預定義值 (依資料庫中定義) 的欄位。 呈現為下拉式清單，以供選取值。
兩個選項	n/a	核取方塊	布林值欄位，接受非 True 即 False 的值。 這會呈現為核取方塊，在 True 時為選取狀態，False 時則為清除狀態。
兩個選項	n/a	選項按鈕	只接受兩個可能值 (通常是 True 或 False) 其中之一的欄位。 呈現為一對選項按鈕，顯示的的每項文字各在資料庫中定義。
日期和時間	只有日期	日期選擇器	日期選擇器，用於從彈出式行事曆顯示選取日期。 不接受時間。
日期和時間	日期和時間	日期時間選擇器	日期與時間選擇器，用於從彈出式行事曆選取日期，並從下拉式清單選取時間。
查詢欄位	n/a	查閱	查詢欄位會連結到特定實體類型，讓您能夠新增預先建立的選項下拉式清單到您的表單。 其他資訊。

查詢欄位

查詢欄位會連結到特定實體類型，讓您能夠新增預先建立的選項下拉式清單到您的表單。 例如，您可以使用名為「貨幣」的查詢欄位，顯示表單中所有貨幣的下拉式清單。

新增查詢欄位後，或您的查詢欄位無法運作時，請確定使用的服務使用者有權限可以設定您要搭配查詢欄位使用的實體。 表單編輯器所使用的行銷服務使用者可延伸角色必須有查詢欄位中所用實體的讀取權限。 您也必須在查詢屬性中啟用讓查詢資料可公開檢視。 任何看到表單的人都可以使用查詢中的所有值。 確定敏感性資料沒有公開給公眾。 更多資訊：新增查詢欄位。

表單驗證

發佈草稿表單後，或儲存即時編輯表單後，就會自動啟動驗證程序。 驗證會檢查表單的內容，並且可以停止發佈 (如果發現封鎖錯誤)，也可以顯示關於潛在問題的警告。

您可以使用檢查內容按鈕，手動啟動表單驗證程序。

阻止表單發佈的錯誤

下列情況會造成表單無法發佈，並顯示錯誤訊息：

• 是否包含提交按鈕？
• 表單欄位是否連結至可編輯的屬性？
• 表單是否包含重複欄位？
• 表單是否包含所有比對策略 (預設為電子郵件欄位) 所需的屬性？
• 是否已設定目標對象？

不會停止表單發佈的警告

下列情況不會造成表單無法發佈。 顯示警告訊息：

• 表單是否包括所有連結至所選實體之屬性的欄位 (這些欄位是建立或更新記錄所必須)？
• 所有必要屬性是否都以 HTML 標為 required="required" ？

進階表單自訂

若要開啟 HTML 編輯器並顯示表單的原始程式碼，請選取右上角的 HTML 按鈕。

• 您可以使用 JavaScript API 呈現 Customer Insights - Journeys 表單，讓您可以動態載入表單。
• 您可以將行銷表單插入 React 應用程式。
• 也可以擴充表單事件，例如 formLoad、formSubmit 等。
• 還有其他對表單的進行自訂可能性。 了解詳細資訊

自訂表單 CSS

您可以在 HTML 編輯器中變更 CSS 類別定義。 編輯 CSS 可讓您發揮表單編輯器的潛在價值，實現更進階設計自訂。

將自訂 JavaScript 新增到您的表單

您可以使用 HTML 編輯器，將自訂 JavaScript 程式碼新增至 HTML 原始程式碼的 <head> 區段。 如果 JavaScript 程式碼是放在 <body> 區段內，則表單編輯器會不顯示任何警告的情況下自動移除程式碼。

您可以根據 buttonClicked 等事件，將 EventListeners 套用至觸發動作，而不是直接在按鈕的 HTML 程式碼中新增 JavaScript 函數的參考。 請參閱下列範例。

範例 1：使用其他表單欄位的值更新表單欄位的值

此範例會建立將名字與姓氏欄位值合併成全名的指令碼。

<script>
    const firstName = document.getElementById("firstname-1679394382894"); // The field ID is unique in each form, make sure you replace it with the correct value.
    const lastName = document.getElementById("lastname-1679335991544"); // The field ID is unique in each form, make sure you replace it with the correct value.
    const fullName = document.getElementById("fullname-1679394390062"); // The field ID is unique in each form, make sure you replace it with the correct value.

    firstName.addEventListener('change', updateFullName);
    lastName.addEventListener('change', updateFullName);

    function updateFullName() {
    fullName.value = firstName.value + ' ' + lastName.value;
    }
</script>

範例 2：使用 URL 中的 UTM 參數值填入隱藏欄位

UTM 來源提供有關新潛在客戶來源的重要資訊。 此範例指令碼會從 URL 擷取 UTM 來源參數，並將其填入隱藏欄位的值中。

1. 建立潛在客戶實體新的自訂屬性，稱為「UTM 來源」，並有邏輯名稱 utmsource。
2. 建立新的表單，並以「潛在客戶」為目標對象。 您可以在欄位清單中看到自訂屬性「UTM 來源」。
3. 將 [UTM 來源] 欄位新增至畫布，並在欄位屬性中將其設定為隱藏。
4. 開啟 HTML 編輯器。
5. 在下列指令碼放入標頭區段中。 務必將正確的欄位識別碼放入程式碼中。

<script>
    document.addEventListener("d365mkt-afterformload", updateUTMSourceField());
            
    function updateUTMSourceField() {
        const formField = document.getElementById("utmsource-1679335998029"); // The field ID is unique in each form, make sure you replace it with the correct value.        
        const urlParams = new URLSearchParams(window.location.search);
        const utmSource = urlParams.get('utm_source');
        formField.value = utmSource;
        console.log(utmSource); // for debug only, can be removed
    }
</script>

您可以重複使用這個範例，透過更多的 UTM 的參數 (例如 utm_campaign、utm_medium、utm_term、utm_content) 擴充您的潛在客戶。

將自訂 Captcha 整合在表單中

您可以在表單中整合自訂 Captcha Bot 保護服務，例如 Google reCAPTCHA。

自訂表單提交的後端驗證

您可以建立防止表單提交處理的自訂後端表單提交驗證。 這會向嘗試提交表單的使用者顯示錯誤訊息。 您可以在關於整合自訂 Captcha 的文章中找到此後端驗證的靈感，文章中的表單會進行後端驗證，以評估 Captcha 查問的結果。