如何在 WordPress 上添加聯繫表格和頁面? (簡易指南)

已發表: 2021-10-18

您想知道如何在 WordPress 中添加聯繫表格嗎? 或者您想了解如何在 WordPress 上添加聯繫頁面? 如果是,那麼,本指南適合您。

對於網站,必須有一個帶有聯繫表格的聯繫頁面。 添加聯繫表格可以讓您的訪問者輕鬆地與您的網站建立聯繫和互動。 此外,這有助於您的訪問者清除他們對您的服務或產品的疑慮和疑問。 這可能會增強您網站上的互動和轉化。

此外,您還可以通過聯繫表格收集訪問者的電子郵件地址。 通過收集到的信息,您可以向客戶更新有關產品/服務、活動、新聞等的信息。因此,它有助於與客戶建立牢固的關係。

話雖如此,您可能想知道為您的 WordPress 網站創建聯繫表格是否容易。 因此,為了幫助您,我們為您準備了一份關於如何在 WordPress 中添加聯繫表單的簡單指南。

那麼,讓我們開始吧!

在這篇文章中:隱藏
為什麼需要在您的網站上使用聯繫表和頁面?
在 WordPress 中添加聯繫表單的最佳方法是什麼?
如何在 WordPress 中創建聯繫表格?
第 1 步:安裝和激活 WPForms
第 2 步:創建聯繫表
步驟 3:配置表單設置
第 4 步:保存您的聯繫表
如何在 WordPress 上添加聯繫頁面?
第 1 步:在您的 WordPress 網站上創建一個新頁面
第 2 步:在頁面上添加您的聯繫表並發布
第 3 步:在您的網站上顯示聯繫頁面鏈接
第 4 步:查看您的聯繫頁面並對其進行測試以查看它是否正常工作
結論

為什麼需要在您的網站上使用聯繫表和頁面?

在進入添加聯繫表單的步驟之前,讓我們討論一下站點需要它的原因。

  • 可達性:通過使用聯繫表格,您的訪問者可以輕鬆訪問您的網站。 因為並非所有客戶都會通過檢查電子郵件或社交平台來聯繫您的網站。
  • 輕鬆收集信息:您可以強制填寫一些信息。您可以輕鬆地從訪問者那裡獲得所需的信息,例如姓名,聯繫方式等。因為僅添加您的電子郵件無法通過舊方法收集網站上的地址。
  • 垃圾郵件保護:它可以保護您免受垃圾郵件的傷害,這是一種令人頭疼的問題。 添加電子郵件地址並不是將其暴露給垃圾郵件發送者的有效方法,他們可以輕鬆發送垃圾郵件。 因此,為避免煩人的垃圾郵件機器人,請使用聯繫表格讓訪問者與您聯繫。
  • 對信息的控制:您可以完全控制通過您的網站通過聯繫表格收集的信息。 而不是交換大量的電子郵件,這對用戶和網站所有者來說都是一件麻煩事。
  • 有組織的信息:您將收到有組織的信息,因為大多數聯繫表格包括主題行、收件人姓名、消息等。

話雖如此,現在讓我們看看如何在 WordPress 中製作聯繫表格和聯繫頁面。


在 WordPress 中添加聯繫表單的最佳方法是什麼?

正如我們已經知道在 WordPress 中擁有聯繫表格的重要性。 現在,我們還需要找出在網站上創建聯繫表格的最佳方式。 因此,讓我們討論一下添加聯繫表單的不同方法。

通常,開發人員可以自己編寫代碼以在其網站上創建聯繫表格。 這是擁有聯繫表格的方式之一。 但並不是每個想要網站的人都有編碼技能。

值得慶幸的是,在 WordPress 中,無需編碼! 有許多易於使用的插件可幫助您超級快速和超級輕鬆地構建聯繫表格。 最重要的是,它們中的大多數都是免費的。

因此,這裡有一些您可以使用的最佳 WordPress 聯繫表單插件:

1.WPForms

WPForms 插件

WPForms 是一個初學者友好的 WordPress 表單構建器插件。 它允許您在沒有編碼技能的情況下創建令人驚嘆的表單。 該插件為您提供了不同類型表單的預構建模板,讓您輕鬆開始您的任務。 因此,您可以輕鬆創建任何表格,例如聯繫表格、反饋表格、訂閱表格、付款表格等。

價錢:

雖然 WPForms 插件可以免費使用並且可以從 WordPress.org 下載,但您可以升級到高級版本。 高級版如下:

  • 基本計劃: 31.60 美元/年
  • 加計劃: 79.60 美元/年
  • 專業計劃: 159.60 美元/年
  • 精英計劃: 239.60 美元/年
立即獲取 WPForms!

2. 聯繫表格 7

聯繫表格 7 免費 WordPress 插件

聯繫表格 7 是最受歡迎的免費 WordPress 聯繫表格插件,擁有超過 5 萬個活動安裝。 它允許您輕鬆創建和管理多個聯繫表格。 此外,它還包括其他功能,如 CAPTCHA、與 Akismet 垃圾郵件過濾的集成等。

價錢:

Contact Form 7 插件完全免費,可從 WordPress.org 下載。

立即獲取聯繫表 7!

3.忍者形態

Ninja Forms 流行的 WordPress 聯繫表格插件

Ninja Forms 是另一個令人驚嘆的插件,可以創建漂亮的 WordPress 表單。 您可以輕鬆地將各種表單域拖放到行和列佈局中。 該插件不僅可以幫助您創建單個頁面表單,還可以幫助您創建多個頁面表單。 此外,它允許用戶上傳任何格式的文件,如 doc 文件、pdf、excel 表等。

價錢:

Ninja Forms 插件為您提供可從 WordPress.org 使用的免費版本。 它也有高級版本。 專業版的定價計劃是:

  • 個人計劃: 49.50 美元
  • 專業計劃: 99.50 美元
  • 代理計劃: 249.50 美元
立即獲取忍者表格!

我們的建議 – WPForms

在提到的插件中,我們為本教程選擇了 WPForms。

因為 WPForms 是創建任何類型表單的最用戶友好的插件。 它還允許您在博客文章、頁面、側邊欄、小部件、頁腳等中輕鬆插入表單。

不僅如此,您還可以在收到客戶提交的表格時收到即時通知。


如何在 WordPress 中創建聯繫表格?

在這裡,我們將逐步完成使用 WPForms 插件在您的 WordPress 網站上創建聯繫表單的過程。 此外,您可以為您的網站使用任何 WordPress 主題。 在這裡,我們將使用 Astra 主題。

所以,讓我們看看下面給出的步驟:

第 1 步:安裝和激活 WPForms

首先,登錄到您的 WordPress 網站的儀表板。 然後轉到Plugins菜單並單擊Add New

安裝 WPForms- WordPress 聯繫表格

之後,您可以在儀表板的右上角看到一個搜索欄。 在那裡你需要輸入“WPForms”來搜索插件進行安裝。

找到插件後,單擊立即安裝按鈕。

激活 WPForms - WordPress 中的聯繫表格

完成安裝後,您可以看到“激活”按鈕。 單擊它以查看插件是否正常工作。

WPForms 菜單

激活插件後,您可以在儀表板中看到一個額外的菜單“WPForms ”。


第 2 步:創建聯繫表

現在,您將能夠輕鬆地開始創建您的聯繫表格。

添加新表單以在 WordPress 中創建聯繫表單

首先,轉到WPForms菜單,然後單擊儀表板上的Add New

WPForms 設置和搜索欄

單擊“添加新”後,您將被定向到“設置”頁面。 您可以在創建表單之前寫下表單的名稱。 在那裡,您可以看到模板並使用它們來創建不同類型的表單。 此外,您可以從頭開始創建空白表單。

因此,有兩種方法:使用模板並從頭開始創建它。 下面給出了每種方法的步驟。 現在,讓我們開始吧!

方法一:使用模板

以下是使用模板創建聯繫表單的步驟。

WordPress網站的簡單聯繫表

找到合適的模板後,當您將其懸停時,您可以看到“使用模板”按鈕。 點擊它。 或者在使用模板之前,您只需單擊“查看演示”按鈕即可查看表單的顯示方式。

我們選擇了“簡單聯繫表”模板來向您展示演示。

簡單聯繫表的編輯部分

單擊模板後,您將進入編輯表單頁面。 在那裡,您可以看到左側的“字段”部分,以使用“添加字段”菜單添加任何字段。 您可以看到標準字段和其他字段選項,只需拖動即可在模板中添加字段。

在表單中添加字段

此外,您可以根據需要自定義添加字段的內容。 為此,請轉到“字段選項”菜單,您可以在其中輕鬆更改標籤、格式、描述等。

字段選項

方法 2:從頭開始創建表單

從零開始創建聯繫表單的空白表單

要從頭開始創建表單,請轉到“空白表單”部分。 然後將鼠標懸停在其上並單擊“創建空白表單”按鈕。

空白表格的編輯部分

現在,您將被引導至“空白表格”的編輯部分。 在那裡,您可以使用“添加字段”菜單在“字段”部分查看標準字段選項。

只需按照“方法 1:使用模板”中的說明拖放必填字段以包含在表單中。 您可以根據自己的選擇插入任何字段。 此外,通過進入“字段選項”以相同的過程編輯字段的內容。

刪除和重新排序字段

從 2 種方法中的任何一種自定義表單的內容後,您還可以刪除該字段。 如果單擊任何字段,您可以看到刪除圖標。 轉到刪除圖標,然後單擊“確定”按鈕將其刪除。

刪除 拖動以重新排序並保存

此外,要重新排序字段,請單擊特定字段,您將在其中找到“拖動以重新排序”。 您只需要拖動字段並按照您想要的順序排列它們。

完成表單編輯後,無論哪種方式,單擊右上角的保存按鈕。


步驟 3:配置表單設置

更進一步,下一步是為您剛剛創建的表單配置設置。 為此,請轉到 WPForms 屏幕左側的“設置”部分。 在那裡,您會找到 3 個設置選項:常規、通知和確認。 因為我們使用的是免費版本,所以其他選項僅供專業用戶使用。

現在,讓我們配置所有 3 個選項。

一般的

第一個是常規設置。 在那裡,您可以配置不同的選項,如表單名稱、表單描述、提交按鈕文本等。您可以根據需要自定義這些內容。 最重要的是,您需要“啟用反垃圾郵件保護”以防止垃圾郵件機器人和垃圾郵件。

為 WordPress 創建聯繫表單時的常規設置

在此之下,您還可以配置高級部分,例如為表單和按鈕添加 CSS 類等。您可以簡單地保留默認設置,但不要忘記在配置後單擊“保存”按鈕。

通知

通知允許您在訪問者提交表單時收到警報。 在此設置中,您可以配置接收電子郵件或消息的方式。

為 WordPress 創建聯繫表單時的通知設置

默認情況下,有“啟用通知”,但您可以禁用它們以避免通知。

要配置的第一個元素是“發送到電子郵件地址”。 已經有智能標籤使用 WordPress 設置中的管理員電子郵件。 但是,您也可以使用逗號添加收件人的其他電子郵件地址。

下一個是“電子郵件主題行”,默認寫為“新條目”,後跟表單名稱。 但是通過使用智能標籤,您也可以添加字段選項。

繼續前進,您還可以自定義From Name的內容。 同樣,發件人電子郵件默認設置為管理員電子郵件地址,但您可以簡單地輸入不同發件人的電子郵件。

另一個元素是“回復電子郵件地址”,用作任何回复的收件人。 因此,最好將From Email元素設置為您自己的電子郵件地址或管理員的電子郵件。

最後一個元素是默認包含所有字段的電子郵件消息。 但是您可以自定義電子郵件的內容。

確認

確認是配置的最後一部分。 在這裡,您可以為已提交表單的訪問者配置確認消息。

Confirmation Type 元素為您提供 3 個選項:消息、顯示頁面和轉到 URL。

提交聯繫表後確認顯示消息

第一個是用戶提交表單後立即顯示的消息。 您還可以從Confirmation Message元素自定義消息的內容。

提交聯繫表後確認顯示頁面

另一個選項是Show Page 。 在此選項中,您可以將已提交表單的訪問者引導至您網站的任何網頁。 您可以從確認頁面輸入頁面名稱。

提交聯繫表後確認顯示 URL

最後一個選項是Go to URL 。 這會將您的訪問者重定向到您在確認重定向 URL 中輸入的任何 URL 。 只需添加您希望訪問者重定向的頁面的任何鏈接。


第 4 步:保存您的聯繫表

預覽和保存

最後,單擊“預覽”按鈕以查看您的表單對用戶的顯示方式。 如果您認為您的表單是完美的,只需單擊“保存”按鈕。


如何在 WordPress 上添加聯繫頁面?

創建完表單後,讓我們看看如何將表單添加到您的頁面。 那麼,讓我們開始吧!

第 1 步:在您的 WordPress 網站上創建一個新頁面

添加新頁面以在 WordPress 中創建聯繫表單

首先,您需要在您的網站上創建一個新頁面來添加表單。 因此,轉到儀表板,單擊頁面,然後轉到添加新頁面以在您的網站上添加新頁面。

之後,您將被帶到頁面的編輯部分。


第 2 步:在頁面上添加您的聯繫表並發布

在頁面中添加 WPForms

創建新頁面後,為您的頁面添加標題,如我們所寫:“聯繫我們”。 現在單擊“類型/或選擇一個塊”中的+按鈕。 然後,您會看到需要輸入“WPForms”的搜索欄。

WPForms 嚮導

找到 WPForms 後,單擊它,WPForms 嚮導將出現在您的文本編輯器中。 現在,單擊“選擇表單” ,您將在其中獲得已創建表單的選項。 選擇您要嵌入頁面的任何表單,該表單將出現在您的文本編輯器中。

在 WordPress 站點中發布創建的聯繫頁面

將表單添加到頁面後,單擊右上角的發布按鈕以發布您的聯繫頁面。


第 3 步:在您的網站上顯示聯繫頁面鏈接

現在您已經發布了“聯繫我們”頁面,您可能在網站主頁上看不到頁面鏈接。 為此,您需要將“聯繫我們”頁面的鏈接添加到可見位置,例如菜單、頁腳或側邊欄部分。

那麼,讓我們看看如何添加它。

在菜單上添加聯繫頁面鏈接

為此,請登錄儀表板,然後轉到外觀>菜單。 在那裡,您會在右側看到一個菜單結構。 它包含一個創建新菜單的表單。

創建菜單

因為它是一個標題菜單,所以您需要根據您的選擇給出菜單名稱,這裡我們寫了“主菜單”。

之後,勾選菜單設置中的“主菜單”。 然後,單擊創建菜單按鈕。

之後,您將看到左側的頁面部分,單擊“查看全部”。 在那裡,您會看到您最近發布的聯繫我們頁面,只需在上面打勾即可。 您還可以在菜單上添加一些自定義鏈接或任何其他頁面。 然後,單擊添加到菜單按鈕。

在菜單中添加聯繫我們頁面

最後,在右下角添加聯繫頁面後點擊保存菜單按鈕。

現在,轉到菜單部分頂部的“使用實時預覽管理”按鈕。 您將被定向到實時編輯部分。

菜單中顯示的聯繫我們頁面鏈接

在這裡,您將在標題部分看到“聯繫我們”菜單項。 如果您單擊該菜單,您將轉到“聯繫我們”頁面鏈接。

在側邊欄添加聯繫表

現在您已經在菜單中添加了聯繫頁面的鏈接,您可能還希望在側邊欄中有聯繫表格。 您可以通過停留在保存實時編輯頁面上來做到這一點。

在側邊欄中添加聯繫表單的後退箭頭

單擊菜單的後退箭頭按鈕。 您會看到一堆可以自定義和編輯的選項。 只需單擊小部件選項。

主側邊欄

現在,您可以看到Main Sidebar ,單擊它。

在那裡,您會看到+按鈕,單擊它並蒐索 WPForms。 找到它後,單擊 WPForms 小部件。

搜索要添加的聯繫表

並在側邊欄上選擇您想要的表格。 現在,你都準備好了。

此外,您可以將聯繫表單拖動到頂部或您想要在側邊欄顯示的任何位置。

在頁腳添加聯繫頁面鏈接

在頁腳添加聯繫頁面鏈接與在頁眉菜單中添加類似。 轉到外觀並單擊儀表板中的菜單選項。

在那裡您可以看到右側的菜單結構。 儘管我們已經寫了“重要鏈接”,但請給出您選擇的菜單名稱。 現在,勾選頁腳菜單並單擊創建菜單

頁腳菜單

轉到頁面部分並勾選聯繫我們頁面,然後單擊添加到菜單

此外,您可以在頁腳菜單中添加一些自定義鏈接或其他網站頁面。 之後,單擊“保存菜單”按鈕。 然後,單擊Manage with Live Preview

在頁腳部分,您可以看到編輯圖標,單擊它以添加頁腳菜單。 只需單擊要顯示鏈接的部分。 現在,在出現的 3 行中,您會看到 1 行和 1 列寫有“版權”。

編輯頁腳

您只需單擊“版權”部分。 在左側的側面,您可以在General部分中看到Column 。 現在,單擊該列並將其設置為 2 列。 回到頁腳部分,您可以看到 2 列。

添加頁腳菜單

現在,單擊可以看到+按鈕的第二列。 單擊後,您將看到一些選項。 其中,單擊頁腳菜單以添加您的鏈接。 之後,單擊右下角的隱藏按鈕。 現在,您可以在頁腳看到您的聯繫頁面的鏈接。

添加聯繫頁面鏈接或聯繫表格後,不要忘記單擊實時編輯頁面左上角的“發布”按鈕。


第 4 步:查看您的聯繫頁面並對其進行測試以查看它是否正常工作

最後,您的聯繫表格和頁面已準備就緒。 此外,您已經在頁眉和頁腳菜單中添加了鏈接,並在側邊欄上顯示了聯繫表單。

現在要查看您發布的頁面的顯示方式,請轉到儀表板並單擊Pages>All Pages 。 現在,您可以看到“聯繫我們”頁面,將鼠標懸停在其上,然後單擊“查看” 。 您可以在下圖中看到“聯繫我們”頁面的顯示方式。

在 WordPress 網站中預覽聯繫我們頁面

您還可以測試聯繫表單的工作方式。 為此,請填寫表格並單擊提交按鈕。 之後,它會向您顯示“謝謝”消息或您在創建表單時自定義的內容。

謝謝 - 提交聯繫表後的確認信息

因此,您已經完成了添加聯繫表單和頁面的工作。


結論

這就是所有的人! 我們已經到了文章的結尾。

我們希望本教程指南幫助您了解如何在 WordPress 中添加聯繫表單。 您可以按照此分步指南輕鬆創建聯繫表單並將其添加到您的頁面。 如果您還沒有創建一個,那麼請按照我們的簡單指南創建您的。

如果您對如何添加聯繫表格有任何疑問,請隨時詢問我們。 我們會盡快回复您。 此外,與您的朋友和同事分享這篇文章。

您可能還喜歡我們關於如何創建博客以及如何將社交媒體共享按鈕添加到 WordPress 的文章。

不要忘記在 Facebook 和 Twitter 上關注我們以獲取更多有用的文章。