如何使用插件添加聯繫表單 - P2：使用 WPForms

在“聯繫表單”系列的上一篇文章中，我們學習了聯繫表單是什麼以及如何使用聯繫表單 7 插件。 正如所承諾的，我用 WPForms 編寫了另一個教程，我將在本文中向您展示。

WPForms 是一個免費的拖放式聯繫表單插件，具有實時預覽功能。 根據我的經驗，使用這個插件很容易也很方便。

您還記得我們在本系列的第 1 部分中創建的這個大學註冊表示例嗎？ 現在，我們將使用 WPForms 創建相同的。

第 1 步：安裝並激活 WPForms 插件

這個插件在 wordpress.org 上有一個免費版本，所以你只需要在Admin Dashboard上安裝並激活插件。

WPForms 的聯繫表 – WordPress 的拖放表單生成器

作者（S）：WPForms

當前版本： 1.7.1.2

最後更新： 2021 年 11 月 18 日

wpforms-lite.1.7.1.2.zip

98%評分5,000,000+安裝WP 4.9+需要

第 2 步：創建一個新的聯繫表單並選擇一個模板

在您的管理儀表板上，轉到WPForms > Add New 。

這是您必須使用的界面：

在左側邊欄中，您可以看到 5 個部分：

1. 設置：命名聯繫表單並選擇其模板。
2. 字段：為聯繫表單添加和自定義字段。
3. 設置：配置通知、確認和常規設置。
4. 營銷：與電子郵件營銷工具鏈接，例如 Constant Contact、Campaign Monitor、Mailchimp……
5. 付款：添加來自 PayPal Standard、Stripe 和 Authorize.Net 的付款。

注意：我不開展任何電子郵件營銷活動，而且我的表單不需要付款信息。 因此，我不需要營銷和付款部分。

在設置部分，輸入您的表單名稱並選擇所需的模板。

有四個默認模板：

• 簡單的聯繫表
• 通訊報名表
• 建議
• 空白表格

除了空白表單，其他模板都有自己的預建字段，您可以利用這些字段更快地構建聯繫表單。 此外，您可以安裝 WPForms 插件（僅適用於付費版本）以獲取更多模板。

在本文中，我選擇空白表單模板從頭開始逐步構建聯繫表單。 這將幫助您更輕鬆、更深入地了解所有內容。

步驟 3：為聯繫表單添加字段

添加字段

在步驟 2 中選擇空白表單模板後，您將被移至“字段”部分。

要為您的聯繫表單添加字段，請將所需字段從“添加字段”選項卡拖放到聯繫表單中。

接下來，要自定義字段，請單擊它，然後在“字段選項”選項卡中編輯其參數。

此外，您可以通過將鼠標懸停在字段上並單擊所需按鈕來刪除或複製字段。

在本文中，我需要添加以下字段：

添加所有這些字段後，您需要在接下來的步驟中自定義每個字段。

為每個字段自定義常規選項

一般來說，有兩種選項可以自定義每個字段：

基本選項：所有字段都包含這些選項，您絕對應該使用它們使您的聯繫表格清晰易懂。

• 標籤：輸入要顯示的字段名稱。
• 描述：這是字段下方的文本顯示，告訴用戶要做什麼。
• 必需：它是可選的！ 勾選它以強制填寫此字段。

在接下來的步驟中，當我提到“基本信息”時，意味著您需要處理這些基本選項。

高級選項：每個字段都有一些高級功能。 您可以選擇處理它們，但您應該注意一些重要事項：

• 佔位符文本：在用戶輸入數據之前在字段內顯示文本。 此文本可作為指南或示例，幫助用戶輕鬆了解他們需要填寫的內容。例如，您可以將電子郵件字段的佔位符文本設置為“輸入您的電子郵件”。
• 默認值：如果有很多人有相同的答案，您可以設置默認答案，以節省用戶的時間和精力。 例如，您為居住在紐約的人製作了一個聯繫表格，因此您可以在“位置”字段中輸入默認值“紐約”。
• CSS 類：在此框中輸入 CSS 類以設置字段的樣式。 在下一步中，我將在本節中包含代碼以設置聯繫表單的樣式。

注意：

• 在聯繫表 7 中，您可以使用默認值作為佔位符文本。 但在 WPForms 中更方便，因為您有單獨的佔位符文本部分。 此外，WPForms 有描述部分，顯示字段下的文本。 我使用這種方式是因為它使我的聯繫表格看起來更好。

• 您可以單擊選項/字段旁邊的問號按鈕來閱讀 WPForms 的說明。

此外，根據每個字段，還有一些不同的選項。 讓我們找出它們是什麼！

自定義“您的姓名”字段

選擇Simple Line Text字段並填寫基本信息：

在此字段中，高級選項部分還有 2 個選項：

• 限制長度：選中它以選擇可在字段中輸入的最大字符數的限制。
• 輸入掩碼：輸入輸入掩碼以要求字段的特定格式。 在此處閱讀更多詳細信息。

自定義“您的電話號碼”字段

這個領域沒有什麼特別的。 只需選擇數字字段並填寫基本信息：

自定義“您的電子郵件”字段

選擇Email字段並填寫該字段的基本信息：

該字段還有一個基本選項：啟用電子郵件確認。 您可以選中它以要求用戶提供兩次電子郵件地址。 這可以確保他們的電子郵件是正確的。

自定義“學習地點”和“主要”領域

首先，選擇下拉字段。 在“選項”部分，輸入該字段的選項。 您可以單擊(+) (-)添加/刪除選項。

此外，您還可以單擊批量添加按鈕一次添加多個選項。 在“添加選項”框中，按所需順序填寫選項（每個選項是一行），然後單擊“添加新選項” 。

此外，在此字段中，您應該關注 2 個高級選項：

• 樣式：您可以使用兩個選項設置下拉菜單的樣式：經典和現代。 現代風格允許您按關鍵字搜索。 因此，它適用於具有大量選項（超過 10 個選項）的菜單。
• 動態選擇：允許用戶從帖子類型或分類法中進行選擇。 例如，如果您選擇Dynamic Post Type Source作為Posts ，下拉菜單中的每個選項都是您網站上的一個帖子。

自定義“註冊到”字段

選擇複選框字段並輸入下拉字段等選項。

在此字段中，您應該關注 2 個高級選項：

• 使用圖像選擇：您可以使用它來說明您的選擇，並使您的聯繫表格更具吸引力和可視化。
• 隨機選擇：這可以避免人們僅僅因為它是第一個選擇而選擇它。

步驟 4：配置聯繫表單

創建聯繫表單後，我們需要對其進行配置。 在 WPForms 的免費版本中，您可以配置以下三個部分：

配置常規設置

WPForms 插件對這一部分中的每個選項都有具體說明。 您應該單擊問號按鈕，仔細閱讀，並註意以下字段：

• 提交按鈕文本：在聯繫表 7 中，您必須創建提交字段。 但是在 WPForms 中，提交按鈕是內置的。 您可以將本部分中此按鈕的文本更改為您想要的任何內容，例如註冊、發送電子郵件……
• 啟用反垃圾郵件保護：有時垃圾郵件發送者可能會通過大量“垃圾郵件”來打擾您。 在這種情況下，您應該打開這個反垃圾郵件功能。

配置通知

如果您想在用戶提交聯繫表單時收到電子郵件通知，請轉到設置>通知。

您可以在此部分的字段中添加“智能標籤”或文本，以更輕鬆地管理用戶提交聯繫表單時收到的電子郵件。

注意：智能標籤可以自動將信息添加到您的聯繫表單通知中。

這是我的設置示例：

配置確認

在確認部分，您可以配置用戶在提交聯繫表單後收到的消息。

完成所有配置後，只需單擊“保存”即可。

第 5 步：在頁面/帖子上顯示表單

要在頁面/帖子上顯示您的表單，有兩種方法。

第一種方法是單擊嵌入以在頁面上顯示您的表單：

之後，將聯繫表單嵌入到您網站上的新頁面或現有頁面中。

第二種方法是將聯繫表格的短代碼插入到頁面/帖子中。 我建議您應該選擇第二種方式，因為它可以在帖子和頁面上顯示聯繫表。 為此，在Admin Dashboard 上，轉到WPForms > All Forms ，找到您的聯繫表格，然後復制其短代碼。

接下來，將此短代碼粘貼到所需的帖子/頁面。

結果如下：

它看起來不像聯繫表示例，所以我必須對其進行一些樣式設置。

第 6 步：設置表單樣式

在管理儀表板上，前往WPForms > All Forms ，找到您的聯繫表單，然後單擊Edit 。

現在，單擊每個字段，轉到Advanced Options > CSS Classes ，然後添加以下值：

• 您的姓名和註冊地址： ip-100
• 您的電話號碼，電子郵件，學習地點，專業： ip-50

接下來，轉到Customizer > Addition CSS ，添加以下代碼：

 .wpforms-field-container {
    顯示：彈性；
    flex-wrap: 包裹;
		justify-content: 間距
}

.ip-50 {
    寬度：48%！重要；
}

.ip-100{
		寬度：100%！重要；
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	最大寬度：100%；
}

.ip-100 ul {
	顯示：彈性；
	對齊內容：間隔；
}

div.wpforms-container-full {
    底邊距：24px；
    背景：#eeeeee；
    填充：20px；
}

最後，點擊發布。

這是最終結果：

聯繫表現在看起來好多了，不是嗎？ 好吧，我們剛剛完成了與我的示例完全相似的表單的最後步驟。

最後的話

根據我的經驗，使用 WPForms 中的拖放界面比使用 Contact Form 7 更容易、更快捷。此外，它具有預先構建的提交按鈕和 2 個更有用的部分，如Placeholder Text和Description 。 實時預覽也很方便。 它可以幫助我在創建和自定義表單時更輕鬆地檢測錯誤。

要了解如何使用更多聯繫表單插件，請關注我們即將發布的本系列文章！ 如果您對 WPForms 有任何疑問或建議任何联系表單插件，請隨時將其留在評論部分。