如何使用插件添加聯繫表格 - P1：使用聯繫表格 7

如果您想擁有一個專業的網站，聯繫表格是最重要的元素之一。 如果您使用專用插件，創建和設置聯繫表單甚至並不困難。 為了幫助您輕鬆快速地創建帶有插件的聯繫表單，我們編寫並編寫了有關如何使用最流行的聯繫表單插件的說明。

在“聯繫表”系列的第一部分中，讓我們找出：

• 什麼是聯繫表？
• 聯繫表格的好處
• 如何使用 Contact Form 7 插件創建表單？

什麼是聯繫表及其好處？

什麼是聯繫表？

聯繫表格是營銷人員熟悉的術語。 使用聯繫表，用戶可以發送電子郵件並直接在網站上與您聯繫，而無需知道您的電子郵件地址。

聯繫表單通常有很多字段供用戶填寫所需信息，例如電子郵件、電話號碼、姓名、電子郵件內容……此外，它通常放置在聯繫頁面或您需要獲取客戶聯繫信息的區域. 下面是一個例子：

聯繫表的好處

因為用戶可以使用聯繫表直接在該網站上向網站所有者發送信息（留下他們的聯繫信息，發送支持請求或其他請求，...），所以聯繫更加方便快捷。

此外，使用聯繫表可以使您的電子郵件保密，並減少垃圾郵件和安全威脅。 因此，您不必每天處理充滿垃圾郵件和垃圾的郵箱。

此外，聯繫表單可幫助您更輕鬆地收集用戶信息，因為他們必須填寫您在表單中請求的信息。 這是獲得更多潛在客戶的策略之一。

一般來說，要建立一個專業的網站並為您的企業獲得更多利益，您應該使用聯繫表格。

如何創建聯繫表格

您可以編寫代碼以根據需要創建字段和表單。 但是，如果您不是編碼員，則這是不可能的。 或者您必須支付一筆錢聘請編碼員來執行此操作。

因此，為非技術用戶甚至開發人員（以節省時間和精力）創建聯繫表單的最有用的解決方案是使用插件。 現在，有很多簡單、容易、快速和免費的聯繫表單插件。 所以，沒有理由不使用它們來創建聯繫表單，對嗎？

在本系列的所有文章中，我將向您展示如何創建大學註冊表，如下所示：

使用聯繫表格 7 創建表格

在“使用插件創建聯繫表單”系列的第一篇文章中，我使用了聯繫表單 7——當今最流行的免費聯繫表單插件之一。

首先，從 wordpress.org 上的插件存儲庫下載並安裝此插件，或轉到儀表板>插件>添加新來安裝並激活它。

聯繫表格 7

作者：三好孝之

當前版本： 5.5.3

最後更新： 2021 年 11 月 28 日

聯繫表格7.5.5.3.zip

82%評分5,000,000+安裝WP 5.7+需要

以下是使用此插件創建上述大學註冊表的具體說明。

界面

轉到儀表板>聯繫人>新增以創建新的聯繫人表單。 這是您將使用的界面：

(1)：輸入聯繫表的名稱
(2)：用於創建和設置聯繫表單的選項卡，包括：

• 表單選項卡：為聯繫表單創建字段
• 郵件選項卡：設置您從聯繫表單收到的電子郵件
• 消息選項卡：包括用戶在輸入數據錯誤、無法發送表單、成功提交表單等時收到的通知。
• 附加設置選項卡：向聯繫表單添加其他元素。

為聯繫表單創建字段

正如我提到的，聯繫表單包含允許用戶輸入信息或與之交互的字段。 這是用於創建這些字段的表單選項卡：

(1) 包含要添加到表單中的字段，例如姓名、電子郵件、號碼、發送按鈕……要添加任何字段，只需單擊相應字段的名稱。

(2)是以HTML格式顯示表單結構的區域。 創建新的聯繫表單時，您將擁有包含簡單字段（例如電子郵件、姓名、主題和提交按鈕）的基本表單的默認結構。 您可以立即使用此表單或基於它創建一個新表單。

字段的一般說明

選擇所需字段後，將顯示一個彈出窗口，您可以在其中輸入字段中的必要信息。 每個字段需要不同的信息，但總的來說，它們都有以下部分：

名稱：名稱屬性
默認值：字段的默認值
Id 屬性：字段的 ID
類屬性：字段的類

注意： ID 屬性和類屬性是可選的，您可以在那裡輸入您的自定義信息。 如果您希望通過以下步驟更輕鬆地設置聯繫表單的樣式，您應該填寫這兩個部分。

填寫此信息後，您將在此框底部看到您創建的字段的標籤。 單擊“插入標籤”以將此字段插入到表單的 HTML 中。

通常，使用Contact Form 7創建的聯繫表單中每個字段的標籤將具有以下結構：

 [field* name_attribute id:field_id class:field_class "字段的默認值"]

說明：

• field *是您選擇的字段類型。 這是一個領域中最重要和必備的部分。
• *表示此字段是必需的。 如果您不想強制用戶輸入它，請刪除* 。

要了解有關 Contact Form 7 中字段標記結構的更多信息，請參閱此文檔。 了解聯繫表單的含義和 HTML 結構將使您可以更輕鬆地使用代碼編輯、創建和添加新字段。 尤其是編碼員，他們可以根據上述語法編寫 HTML 代碼來創建表單。 但是，對於非編碼人員，這可能很困難，因此我建議按照以下步驟操作。

對於本系列中的聯繫表單，我需要選擇以下字段：

所有字段都有我上面說的通用信息。 因此，我現在只是指導每個領域的具體部分。

以下是每個字段的詳細說明。

創建用於輸入名稱的字段

選擇文本字段並在框中輸入該字段的基本信息：

在字段類型部分，您可以選擇要求，以便必須填寫此字段（這是可選的）。

注意：在默認值部分，選擇使用此文本作為字段的佔位符以在用戶輸入數據之前在字段上顯示此內容。 您應該使用此模式向用戶解釋他們需要在該字段中填寫的內容。

Akismet部分與 Akismet 插件相關 - 一個反垃圾郵件插件。 如果你沒有這個插件，那麼不要關心這個部分。

創建用於輸入電話號碼的字段

選擇數字字段並填寫字段的基本信息。

在字段類型部分中，為此字段選擇一種類型。 有兩種類型的字段： Spinbox和Slider 。

滑塊將顯示用於選擇數字的比例如下：

此樣式適用於根據特定比例評分或選擇數字。

同時， Spinbox允許您輸入任何數字，字段中的數字順序，例如電話號碼、卡號、身份證號……所以在這個例子中我選擇了 Spinbox。

“範圍”部分允許您選擇數量限制。 在這個例子中，我不需要這個部分，所以我沒有填寫任何東西。

創建用於選擇專業和學習地點的字段

使用此字段，選擇下拉菜單。

現在，在選項部分填寫專業和地點的選項，請記住，每個選項都是一行。

如果您希望允許用戶一次選擇多個選項，請單擊允許多選。

創建用於選擇註冊目的的字段

選擇複選框字段。

選項部分類似於上面下拉菜單字段中的部分。 此外，複選框還有更多選項，如下所示

• 先放標籤，最後放複選框
• 用標籤元素包裹每個項目
• 使復選框獨占（您只能選擇 1 個選項）。

創建提交按鈕

最後，選​​擇提交字段，只填寫如下要求的信息（注意標籤是這個按鈕上會出現的字，例如“提交”、“註冊”、“確認”）。

值得注意的是，在創建新表單時，該插件已經自動創建了一個提交字段。 因此，您無需創建新字段即可使用此字段。

為字段添加標籤

現在您已完成為聯繫表單創建字段。 但是，您的字段沒有名稱顯示在聯繫表單上，如下所示：

因此，您需要通過在表單的 HTML 部分插入以下代碼結構來為字段添加標籤：

 <label> 字段標籤
[字段標籤] </label>

接下來，在字段標籤部分寫入字段的標籤。 然後填寫以上所有信息，點擊保存。

創建字段後，我的聯繫表單具有以下代碼結構，注意我已經安排了字段以將它們顯示在前端的所需位置：

 <label> 你的名字（必填）
[text* your-name "輸入你的名字"] </label> 

<label> 您的電話號碼
[號碼電話佔位符“輸入您的電話號碼”] </label> <label> 您的電子郵件（必填）
[email* your-email "輸入您的電子郵件"] </label>

<標籤> 少校
[選擇*專業“計算機科學”“語言學”“農業”“工程”“電子商務”]</label>
<label> 學習地點 
[選擇*學習地點“紐約”“芝加哥”“洛杉磯”“華盛頓特區”“休斯頓”“費城”] </label>

</label> 註冊到
[checkbox* register label_first "Study" "Take a tour" "Consult"] </label>

[提交“提交”]

這一次，您的聯繫表格仍然沒有顯示在網站上。 您需要執行更多步驟才能在前端顯示它。

聯繫表格設置

設置電子郵件

“郵件”選項卡允許您自定義用戶發送聯繫表單時將收到的電子郵件的內容。 要設置此部分，您需要在剛剛創建的聯繫表單中插入字段的郵件標籤。 下面是一個例子：

說明：

• To : 輸入負責檢查聯繫表格的人的電子郵件。
• 發件人和主題：您應該在此處設置一個名稱來確定發送此聯繫表格的人。
• 郵件正文：在這裡添加郵件標籤，以確保當你從接觸形式接收電子郵件，它會顯示你從用戶請求的所有信息。

其他設置

消息選項卡

輸入在選項卡描述中可以看到的情況中使用的消息。 例如，在用戶提交表單成功或提交失敗後，您應該添加一條消息讓他們知道這一點。 或者當用戶忘記必填字段時，您還應該添加一條消息，以便用戶可以回來填寫該字段。 雖然這些都是小細節，但要注意提升用戶體驗。

附加設置選項卡

此選項卡可幫助您添加代碼片段以安裝以下內容：

• 僅限訂閱者模式
• 演示模式
• 跳過郵件
• 驗收作為驗證
• 火烈鳥設置
• 抑制消息存儲
• JavaScript 代碼

您應該使用一些非常有用的部分，例如：

• 僅限訂閱者模式：此模式只允許您網站的登錄用戶提交聯繫表格。 這消除了垃圾郵件，並且僅適用於真正想與您聯繫的人。
• 接受作為驗證：添加一項功能，當用戶未選中此框而是移至另一個字段時，顯示“接受”複選框的通知。 因為默認情況下，如果用戶不選中 Acceptance 複選框，錯誤消息只會在他們提交表單後顯示。 此接受複選框通常用於創建諸如“我同意網站條款”之類的字段，但如果您創建其他內容類型，則可能需要添加接受作為驗證。

要了解有關“附加設置”選項卡中其他功能的更多信息，您可以在此處閱讀更多內容。

在網站上顯示聯繫表

最後一步是顯示您剛剛在網站上創建的聯繫表單。

仍然在創建新表單的界面，複製短代碼並將其粘貼到所需的頁面或帖子上。

這是我的最終結果：

但是，我的聯繫表格看起來不太好，所以我需要稍微設計一下。

如果您想像我在本文開頭提供的模板一樣重新設置聯繫表單的樣式，您需要按如下方式編輯表單的 HTML 以使其更易於設置樣式：

 <div class="form__field form__full-width">
<label>你的名字（必填）
[文本*您的姓名佔位符“輸入您的姓名”]
</標籤>
</div>
<div class="form__field">
<label>您的電話號碼
[號碼電話佔位符“輸入您的電話號碼”]
</標籤>
</div>
<div class="form__field">
<label>您的電子郵件（必填）
[電子郵件*您的電子郵件佔位符“輸入您的電子郵件”]
</標籤>
</div>
<div class="form__field">
<標籤>主要
[選擇*專業“計算機科學”“語言學”“農業”“工程”“電子商務”]
</標籤>
</div>
<div class="form__field">
<label>學習地點
[選擇*學習地點“紐約”“芝加哥”“洛杉磯”“華盛頓特區”“休斯頓”“費城”]
</標籤>
</div>
<div class="form__field form__full-width">
<標籤>註冊
[checkbox* register use_label_element "Study" "Take a tour" "Consult"]
</標籤>
</div>
<div class="form__field form__full-width">
[提交“提交”]</div>

然後轉到您主題的定制器>附加 CSS並粘貼以下代碼：

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

最後，點擊發布保存。

最後的話

當您第一次使用 Contact Form 7 時，如果您不是編碼員，您可能會發現它不熟悉 HTML。 不過，看完這個教程，我覺得一切都變得容易了，對吧？

如果您想嘗試使用其他一些工具創建聯繫表單，請期待我即將發布的本系列文章。 你想推薦哪個插件？ 在這篇文章下發表評論！