如何創建向您發送電子郵件的 HTML 表單
已發表: 2022-09-01您是否曾經在您的網站上設置過表單，卻忘記檢查已提交的條目？ 創建一個在提交後發送電子郵件的 HTML 表單是解決此問題的最簡單和最有效的方法之一。
在這裡，我們將向您介紹如何創建一個向您和客戶發送電子郵件的表單，以確保收到該表單。
如何製作發送電子郵件的 HTML 表單
HTML 不提供創建提交後發送電子郵件的表單的選項。 但是，您可以使用表單操作元素設置一個 mailto: 地址（在本例中為您自己的），從而觸發提交者的郵件客戶端打開。 如果您無法創建基於 PHP 的表單，這是最後的選擇。
理想情況下，瀏覽器將允許您將表單提交直接發送到電子郵件地址。 但是，他們不這樣做的原因是，直接從 HTML Web 表單發送電子郵件會洩露訪問者的電子郵件地址，使用戶容易受到網絡釣魚等惡意活動的攻擊。
在表單中添加 mailto: 地址可能是規避這一挑戰的一種潛在方法。 此選項激活用戶計算機上的默認郵件客戶端，提示他們通過電子郵件發送表單。 Web 瀏覽器向電子郵件服務提供商發送請求，而不是向指定地址發送請求。
mailto: 選項存在一些問題。 例如，它不是100%兼容所有瀏覽器，不是很人性化，瀏覽器發送表單時無法控制數據的格式。
除此之外，當用戶提交表單時會彈出一條警告消息，讓他們知道他們將要發送的信息不會為了隱私而加密。
下面，我們將介紹一些用於創建 HTML 表單的選項，該表單會在提交新條目時向您發送電子郵件。
您選擇的選項取決於您的工作方式和使用的平台。 也就是說，如果計劃是混合使用 HTML 和不同的腳本，情況會有所不同。 下面，我們將介紹可用的不同選項。
方法 1：使用 HTML 創建電子郵件發送表單（不推薦）
只使用 HTML？ 從頭開始，這裡有一個示例代碼供使用：
請參閱 CodePen 上 HubSpot (@hubspot) 的 Pen 如何創建向您發送電子郵件的 HTML 表單。
此代碼將創建一個表單，詢問聯繫人的姓名、消息，並包含一個提交按鈕（在 CodePen 中不可見）。 請注意，這段代碼是基本的——它看起來不會很時髦。 為了更漂亮，您必須添加更多特定於您需要的代碼行。
雖然您可以只使用基本的 HTML，但這不是理想的選擇。 此表單不直接發送到電子郵件地址，而是打開電子郵件客戶端或工具窗口來提交表單。 這可能會嚇到用戶根本無法提交表單。
那麼，哪些 HTML 代碼允許您將表單提交直接發送到電子郵件地址？
要使表單與您的電子郵件服務器一起使用並將其發送到郵箱，PHP 就是答案——讓我們現在來探索這個選項。
方法 2：使用 PHP 創建電子郵件發送表單（高級）
要創建一個訂閱者可以與您聯繫的表單，PHP 腳本將是您最好的朋友。 我知道，另一個縮寫詞。 這個代表超文本預處理器，這種語言與 HTML 協作來處理表單。
在進入這個過程之前，讓我們分解一些表單基礎知識。
Web 表單有兩個方面：前端，訪問者在瀏覽器中看到，以及在服務器上運行的後端腳本。
訪問者的網絡瀏覽器使用 HTML 代碼來顯示表單。 提交表單時，瀏覽器使用表單標籤的“action”屬性中提到的鏈接將信息發送到後端，將表單數據發送到該 URL。
例如： <form action=https://yourwebsite.com/myform-processor.php> 。
然後，服務器將數據傳遞給操作 URL 中指定的腳本——在本例中為 myform-processor.php。 使用這些數據，後端腳本可以創建表單提交的數據庫，將用戶引導到另一個頁面（例如支付），並發送電子郵件。
您可以在後端編程中使用其他腳本語言，例如 Ruby、Perl 或 ASP for Windows。 然而，PHP 是最流行的，幾乎所有的網絡託管服務提供商都在使用它。
如果您要從頭開始創建表單，您可以採取以下步驟。
第 1 步：使用 PHP 創建一個頁面。
對於此步驟，您需要在您的託管平台上訪問您網站的 cPanel。
創建網頁時，不要使用“.html”擴展名，而是鍵入“.php”。 這類似於將圖像另存為“jpg”與“png”時發生的情況。
通過這樣做，服務器將知道託管您編寫的 PHP。 與其保存空的 HTML 頁面，不如將其保存為：“subscriberform.php”。 創建並保存頁面後，您就可以創建表單了。
第 2 步：使用代碼製作表單。
在此步驟中，您將編寫代碼來創建表單。
如果您不確定如何在 HTML 中創建表單，請查看 HTML Dog 的資源以了解基礎知識。
以下代碼是基本表單所需要的：
<form method="post" action="subscriberform.php">
<textarea name="message"></textarea>
<輸入類型="提交">
</form>
因為這類似於純 HTML 的撰寫，所以這些行還將為表單創建一個名稱和一個區域，供訂閱者鍵入自定義消息並將其發送給您。
一個重要的區別是 action=”subscriberform.php” 部分。 這部分代碼將使頁面在提交時發送表單。 回想一下，在第一個示例中，這不是一個選項。
第 3 步：使表單發送電子郵件。
創建表單並根據您的設計偏好添加所有適當的修復後，就可以創建電子郵件部分了。
為此，您將滾動到頁面的開頭（最開始，甚至在定義 HTML Doctype 之前）。 要啟用在電子郵件中發送數據，我們必須添加將處理數據的代碼。 複製此代碼或創建類似的內容：
<?php
if($_POST["消息"])
mail("[email protected]", "這是主題行",
$_POST["在此處插入您的信息"]. “來自：[電子郵件保護]”）；
?>
第一行和最後一行中的所有內容都會告訴網頁使這些函數像 PHP 一樣執行。 此代碼還檢查訂閱者是否使用該表單。 從那裡，它檢查表單是否已發送。
進一步細分，“郵件”將完成的表格作為電子郵件發送到“[電子郵件保護]”，主題行如下。 在下一行中，您可以在引號內寫下電子郵件的副本，以便從您選擇的任何電子郵件地址發送。
提交表單後，頁面會將數據發送給自身。 如果數據已成功發送，則頁面將其作為電子郵件發送。 然後瀏覽器加載頁面的 HTML — 包含的表單。
這樣，您就擁有了創建表單所需的基本代碼。
請注意，這只是執行此操作的一種方法 - 或者，您也可以使用構建器創建表單，然後將其嵌入到您的網站中。
方法 3：使用表單生成器創建電子郵件發送表單
如果您沒有使用 WordPress 來構建您的網站並且不精通編碼，那麼您可能不知道如何創建表單，尤其是在您的 CMS 不提供拖放頁面編輯器的情況下。
（熱點提示：拖放式編輯器可以讓創建電子郵件發送表單變得更加容易和簡單。試試 CMS Hub - 它是 100% 免費的。）
以下每個工具都允許您構建一個發送電子郵件的表單，而無需您進行任何編碼。 最好的部分是，如果您不想更改內容管理系統，則無需更改。 相反，您可以使用每個工具的嵌入代碼將表單嵌入您的網站。
1. HubSpot：總體上最好的電子郵件表單生成器
HubSpot 在其所有產品的免費層中都包含一個表單生成器。 由於 HubSpot 已經擁有您的電子郵件，因此在提交新條目時它會自動向您發送一條消息。
HubSpot 的表單構建器與平台中的其他工具鏈接，包括 Marketing Hub 和 CMS Hub，並且不需要任何先前的技術知識。 如果您想擴展表單以包含營銷功能，您也可以這樣做。
例如，您可以構建連接到您的聯繫人列表的自定義表單。 您還可以自定義這些表單並根據表單的完成情況觸發自動電子郵件。 請注意，後者需要高級升級。
如果您想了解如何在提交表單後接收電子郵件，請查看我們的知識庫文章。
2. Forms.io：最佳快速電子郵件表單生成器
Forms.io 允許您在其拖放界面中快速創建表單，然後使用 HTML 嵌入代碼將其嵌入您的網站。 您將收到警報或通知，然後您可以在工具的後端管理響應。 它對 10 位用戶免費，但如果您的公司需要更多席位，您可以每月 14.99 美元獲得訪問權限。
3. Jotform：多表單生成器的最佳電子郵件
如果您預計需要多個表格，Jotform 是一個不錯的選擇。 它為您在網站上嵌入表單提供了多種選擇：JavaScript、iFrame 或表單的整個源代碼。 您還可以選擇創建燈箱或彈出表單。
Jotform 的品牌是免費的。 起價為 24 美元/月。
在此處查看更多表單構建器工具。
方法 4：使用插件創建電子郵件發送表單
如果您正在運行 WordPress 網站，我們有一個好消息：您可以使用大量的表單構建器插件，其中大部分都是免費的。 這些工具都會在收到提交後發送電子郵件。
1. HubSpot 表單插件：最適合潛在客戶生成
如果您打算將表單用作潛在客戶生成工具，那麼我們強烈建議您使用 HubSpot 表單插件。 它直接鏈接到您的 HubSpot 帳戶，允許您將其與 HubSpot CRM、營銷中心、銷售中心等結合使用。
2. WPForms：最適合嵌入任何地方
WPForms 是一個拖放式表單構建器，允許您將其配置為在收到提交時通過電子郵件發送給您。 您還可以將表單嵌入網站的任何位置，包括側邊欄和頁腳。
3. ARForms
ARForms 允許您根據設置的條件接收電子郵件通知，但您也可以收到所有提交的電子郵件通知。 您還可以將它與您的技術堆棧中的其他工具集成，包括 HubSpot、PayPal 和 Google 表格。
發送電子郵件的 HTML 表單的好處
無論您是想將更多訪客轉化為潛在客戶，為您的銷售團隊收集信息，還是創建更多忠誠的品牌擁護者，表格對於入站策略都是必不可少的。 如果您的網站上沒有表單，您可能會錯失更多潛在客戶、更高轉化率和更快樂的長期客戶。
問題是很容易忘記檢查回复，甚至更容易獲得提交但沒有可搜索的記錄。 向您發送電子郵件的表單將信息保存在您的收件箱中，以供參考和使用。
編者註：這篇文章最初發表於 2019 年 12 月，為了全面性而進行了更新。
