電子郵件中交互式表單的終極指南

已發表: 2020-05-21

“電子郵件中的表格不起作用。”

“表單由 JavaScript 提供支持，但電子郵件不支持。”

你以前聽過這些話嗎？我們也是。許多營銷人員認為在電子郵件中使用交互式表單是不可能的，但我們在這裡打破這個神話。事實上，許多流行的電子郵件客戶端都支持交互式表單，如果您知道如何去做，它可以成為使您的電子郵件更具吸引力並增加轉化率的強大工具。

在 Litmus Live 2019 上，傑出的電子郵件開發人員 Mark Robbins 深入研究了電子郵件中的交互式表單，這啟發了我們 Litmus 的團隊也嘗試使用交互式表單。在這篇文章中，我們將分享 Mark 演講中的基本原則以及來自我們自己的測試的其他提示和建議，以便您也可以在電子郵件中使用交互式表單。

準備好潛水了嗎？我們走吧！

電子郵件中交互式表單的力量

想一想您使用電子郵件將訂閱者帶到登錄頁面以鼓勵他們填寫某種類型的表格的所有時間。如果您能夠完全跳過該步驟並授權您的訂閱者在您的電子郵件中就地採取行動會怎樣？

例如，您可以……

直接在電子郵件中收集產品評論或 NPS 反饋
無需將訂閱者發送到登錄頁面即可進行簡短的調查
允許您的訂閱者更新用戶配置文件或電子郵件首選項，而無需訪問他們的用戶帳戶設置
在您的營銷活動中嵌入潛在客戶生成表單
和更多！

在電子郵件本身中呈現表單可以消除對登錄頁面的需要。您的訂閱者為實現目標而必須採取的每一個額外步驟都會增加摩擦。在電子郵件中嵌入表單可以減少摩擦，縮短轉化路徑，並最終增加轉化率。

電子郵件客戶端支持電子郵件中的表單

電子郵件設計人員和開發人員迴避使用交互式表單的最大原因之一是因為他們擔心許多電子郵件客戶端可能不支持它們。不過，支持不足的神話不再成立。事實上，前 5 個電子郵件客戶端中有 4 個是 Gmail、iOS Mail、Apple Mail 和 Yahoo! 郵件——支持交互式表單，根據 Litmus 的電子郵件客戶端市場份額，這些表單佔所有電子郵件打開的 80% 以上。

以下是我們在流行的電子郵件客戶端上測試交互式表單支持時的發現：

電子郵件客戶端	支持表格嗎？	筆記
蘋果郵箱	是的	“GET”按預期工作。 “POST”打開一個帶有表單的登陸頁面，而不是從電子郵件提交
iPhone 郵件應用程序	有些	“GET”按預期工作。 “POST”不提交。
Gmail 桌面網絡郵件	是的	提交帶有彈出警報。
Gmail (iOS)	有些	不在 iOS 甘加中提交。 “POST”輸入也被禁用。
安卓版 Gmail	有些	只有“GET”有效，但會打開一個帶有表單的登錄頁面，而不是從電子郵件提交。使用“POST”，表單會在視覺上出現，但不允許用戶輸入。
Gmail 移動網絡郵件	是的
Windows 上的 Outlook	不
Windows 10 郵件	不
展望 MacOS	不	該表單直觀地出現並允許用戶輸入 Microsoft 電子郵件地址，但不允許提交。
展望網	不	僅當電子郵件在其自己的窗口中打開時才提交，而不是從收件箱視圖提交。提交時，輸入屬性以“x_”為前綴，因此可能會導致收集數據的問題。建議為這個客戶隱藏。
展望 iOS	是的
展望安卓	有些	表單以視覺方式顯示，但鍵盤似乎不允許用戶輸入信息，因此用戶必須複製和粘貼文本才能輸入。建議在使用鍵盤輸入時隱藏此客戶端，但如果使用其他輸入，則允許使用表單。
雅虎！桌面網絡郵件	是的	提交帶有彈出警報。
雅虎！ IOS	不	表單在視覺上出現並允許用戶輸入，但不允許提交。
雅虎！安卓	有些	表單以視覺方式顯示，但鍵盤似乎不允許用戶輸入。
AOL 桌面網絡郵件	是的
美國在線	不	表單在視覺上出現並允許用戶輸入，但不允許提交。
美國在線安卓系統	是的
三星郵件應用	有些	表單以視覺方式顯示，但鍵盤似乎不允許用戶輸入信息。建議在使用鍵盤輸入時隱藏此客戶端，但如果使用其他輸入，則允許使用表單。

如何在電子郵件中構建交互式表單

但是，您究竟如何在 HTML 電子郵件活動中實施表單呢？讓我們一步一步分解Mark的方法：

1. 設置基礎

讓我們從一個非常簡單的框架開始：

在最基本的層面上，有兩個屬性可以使表單工作：

<form action="[example_url]" method="get">
<!-- Form content -->
</form>

行動
這定義了表單數據發送到的登錄頁面或目的地。
方法
有兩種方法可以將您的數據提交到該目的地：通過 GET 或 POST 請求。 GET 對電子郵件有更好的支持，但有一點要記住：如果您通過 GET 方法提交數據，您基本上是將該數據附加到一個 URL，因此提交的表單數據將在頁面地址字段中可見.

例如，通過表單提交您的名字意味著您正在創建一個如下所示的 URL：

 http://example.com?Fname=Mark

2. 設置表單域

接下來，您必須考慮要從訂閱者那裡收集哪些信息，以及如何將其轉換為單獨的表單字段。

每個表單域都需要一個標籤，這是告訴電子郵件閱讀器此表單域的用途的信息。對於詢問讀者名字的表單字段，如下所示：

<label for="fname">
 First Name:
</label>
<input type="text" id="fname">

您希望為 id=”fname” 的元素收集文本輸入——而標籤 for=”fname” 將這兩者連接起來。一些網絡郵件客戶端雖然改變了你的代碼並且不支持 for & id 方法。他們喜歡為您的類和 ID 名稱添加前綴——因此您的 ID 可能會被更改而您的 for 屬性不會。結果：您的標籤不再與您的 ID 匹配，這破壞了您的表單。這是一個簡單的解決方案來防止這種情況：將標籤包裹在您的輸入周圍，如下所示：

<label>

First Name: <input type="text">

</label>

您將有幾種不同類型的文本輸入可供選擇，包括：

 <input type="text">
<input type="email">
<輸入類型="電話">
<input type="number">
<input type="url">
<textarea></textarea>

為每個表單字段選擇正確的輸入類型可以幫助您做兩件事：在移動設備上查看時，它可以更改鍵盤佈局以匹配所需的輸入。另外，在支持的地方，還有一些基本的驗證。

對於我們通過表單提交的每條信息，我們需要提交兩件事：名稱和值。

姓名：
這是開發人員定義的表單字段名稱，它通過 URL 字符串傳遞。
價值：
與表單字段中的名稱相關聯的開發人員或用戶定義的值。

還記得我們上面的名字示例嗎？ http://example.com?Fname=Mark 是為表單字段 First Name (=name) 提交名字“Mark”（=value）的 URL。

讓我們在表單中添加一個評論區（name=”comment”）：

<input type="text" name="Fname">

<textarea name="comment">

</textarea>

表單提交的結果 URL 將如下所示：

 http://example.com?Fname=Mark&comment=hello

複選框和單選按鈕

我們知道如何設置文本輸入，但是如果您想在表單中添加複選框或單選按鈕怎麼辦？

複選框的值是可選的。如果您沒有為複選框定義值，它將作為“on”或“off”提交。這可行，但您可能希望將值更新為不同的措辭，具體取決於您計劃如何處理接收端的數據。

例如，如果您的訂閱者選中該框以同意您的條款和條件，則這裡有一個複選框，該複選框將提交值“同意”：

<input type="checkbox" name="t-c" value="agree" >

 http://example.com?tc=agree

但是，對於單選按鈕，值是必需的，您的名稱元素是將單選按鈕組合在一起的元素。在此示例中，您有兩組單選按鈕——一組用於廣播，一組用於電視——並且您可以在每組中選擇一個電台。

<input type="radio" name="radio" value="radio1" checked>

<input type="radio" name="radio" value="radio2">

<input type="radio" name="tv" value="BBC1">

<input type="radio" name="tv" value="BBC2">

您是否在第一個單選按鈕上發現了已選中？這就是您如何標記要顯示為預選選項的單選按鈕。

將選項組合在一起

當您希望將單選按鈕或複選框組合在一起時，就會出現字段集和圖例。

字段集將相關項目組合在一起
傳說基本上是那些非常項目的標籤

在此示例中，我們將在一組單選按鈕中的紅色和藍色選項之間進行選擇，這些單選按鈕都是關於選擇您最喜歡的顏色。

<fieldset>

<legend>Favourite color</legend>

<label>Red

<input type="radio" name="color" value="r">

<div class="button red"></div>

</label>

<label>Blue

<input type="radio" name="color" value="b">

<div class="button blue"></div>

</label>

</fieldset>

如果您希望將地址（街道、郵政編碼、州和國家/地區）等不同信息組合在一起，則字段集會派上用場。

單選按鈕和復選框的默認樣式不是很好。兩者都顯示得相當小，使許多讀者無法訪問它們。這就是為什麼我們在上面添加了一個 div 類，它可以讓我們用我們選擇的樣式替換默認的單選按鈕樣式。

覆蓋默認單選按鈕樣式

覆蓋單選按鈕的默認樣式需要幾個步驟。讓我們一一分解它們。

首先，您需要使用以下樣式隱藏默認單選按鈕：

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

現在我們隱藏了默認輸入，我們需要用我們自己的樣式替換焦點輸入狀態，為讀者關注的元素添加高光或輪廓：

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

最後，我們按照您通常的風格設計我們的按鈕。如果您使用懸停效果來設計按鈕樣式並鼓勵點擊，您也可以在此處執行此操作。另外，您需要為單選按鈕的“選中”狀態添加樣式，以便輕鬆區分選中的單選按鈕和未選中的單選按鈕。

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3.傳遞隱藏信息

您可能希望通過表單傳遞一些信息，而無需用戶手動將其輸入到表單中。例如，可以是姓名、用戶 ID 或電子郵件地址等項目。您可以使用“隱藏”輸入類型在幕後傳遞隱藏信息——用戶無法看到或修改此操作：

例如，這段代碼將傳遞這樣的用戶 ID：

<input type="hidden" name="user-id" value="U12345">

 http://example.com?user-id=U12345

4. 提交表格

好的 - 您的表單已構建。現在，我們需要一種讓讀者提交它的方法。有兩種方法可以做到這一點：輸入類型“提交”和按鈕類型“提交”：

<input type="submit" value="Submit your form" >

<button type="submit">
Submit your form

</button>

它們的功能非常相似，但不同之處在於您放置文本的位置。如果您選擇輸入類型路線，您需要將文本設置為值。如果您正在使用按鈕，您的提交副本將位於按鈕結束標記之前。

電子郵件中交互式表單的回退策略

對於每封交互式電子郵件，設置回退是至關重要的。回退確保在表單無法完美運行的所有電子郵件客戶端中，我們將其隱藏並顯示回退。由於對錶單的移動支持仍然參差不齊，我們選擇在移動設備上隱藏所有 Litmus 電子郵件的表單，並在我們最流行的支持交互式表單功能的電子郵件客戶端上實現完整的交互式體驗。換句話說，我們實現的代碼......

顯示交互式表單
- 蘋果郵箱
- Gmail（桌面網絡）
- 雅虎（桌面網絡）
顯示回退：
- 所有 Outlook 和 Windows 郵件
- 所有移動設備

下面是代碼中的樣子：

CSS

.interactive-form {
	display: block !important;
	max-height: inherit !important;
	overflow: visible !important;
}
.fallback-form {
	display: none;
}

body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

@media only screen and (max-width: 640px) {
  .fallback-form {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .interactive-form, 
  .interactive-form p, 
  .interactive-form label, 
  .interactive-form input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

HTML

<!--[if mso | ie]>
<style>
.fallback-form {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->


<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->

<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
    [Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->

示例：在操作中查看電子郵件中的交互式表單

好奇地看到這一切嗎？

在這封電子郵件中，我們添加了一個表單，以便讀者可以輕鬆地與我們的一位 Litmus 專家取得聯繫：

印第安納步行者隊向他們的球迷徵求反饋——就在電子郵件中：

但是如果我不會編碼怎麼辦？

交互性，尤其是交互表單等高級元素，需要相當多的編碼技能。如果您是一名已經熟悉電子郵件代碼的電子郵件開發人員，我們希望本分步指南可以幫助您在下一個活動中實施表單。

然而，對於許多處於職業生涯早期階段的營銷人員和電子郵件開發人員來說，實現表單等交互元素感覺像是一項不可能完成的任務。但對您來說有一些好消息——至少如果您在 Salesforce Marketing Cloud 中構建您的電子郵件。 Mark 和他在 Salesforce 的團隊最近將 Form Blocks 添加到 Salesforce 的 Content Builder，允許營銷人員將表單添加到他們的電子郵件中，並根據他們的需要自定義這些表單——無需任何編碼技能。如果您是 Salesforce 客戶，我們鼓勵您檢查一下！

更多的電子郵件服務提供商是否會讓營銷人員在他們的活動中輕鬆實施互動元素？ Salesforce 的動態表單塊的推出可能是朝這個方向邁出的第一步。