如何在WordPress中製做聯繫表單（3種方法）

本篇教程提供3個在WordPress中建立聯繫表單並記錄詢盤的方法：

1. 插件Contact Form 7 + Flamingo，二者都免費

2. 插件Elementor Pro+Elementor Contact Form DB，前者付費，是網頁可視化編輯器，後者免費。

3. 插件Ninja Forms，免費，這是我目前新發現且推薦的方式，相關教程請查看：Ninja Forms：免費的聯繫表單插件，卻提供了付費表單纔有的功能【視頻+圖文】

本文原文首發於：https://loyseo.com/how-to-create-a-contact-form-in-wordpress/

製做聯繫表單的教程概述

方法1、使用Contact Form 7 插件製做聯繫表單，使用Flamingo插件記錄收到的詢盤

1. 全部wordpress網站都能使用，不限主題，不限頁面編輯器

2. 優勢：可以提供自定義問題驗證功能，能夠實現簡單數學題驗證

• 譬如2+2=?，這個功能可以阻止大部分的廣告郵件

• 很多廣告郵件都出自一個工具：GSA Website Contact，GSA可以根據產品詞搜索目標企業網站，按既定規則找到聯繫頁面，自動根據自定義的廣告內容提交表單，這也是一種常見的拓客方式（感興趣的也能夠試試喲~），

• GSA還能破解谷歌驗證碼，我也不推薦用谷歌驗證碼，由於它會讓網站速度變慢很多

• 別用複雜的數字計算問題，它會下降客戶提交詢盤的意願

4. 缺點：相比Elementor，Contact form7不能可視化編輯，操做起來有點不方便，參見下圖

contact form 7製做聯繫表單的操做界面

contact form 7製做的表單

方法2、使用Elementor Pro編輯器插件的form元素製做聯繫表單，並用Elementor DB插件記錄收到的詢盤

1. 適合使用Elementor Pro編輯器的wordpress網站

2. 優勢：可以可視化編輯表單，操做起來方便

3. 缺點：不提供自定義數字計算問題驗證功能

elementor可視化製做聯繫表單的操做界面，所見即所得

elementor製做的聯繫表單

建立完表單後，須要配置SMTP，以便收到詢盤後能發通知到你的郵箱。

瞭解了兩種製做聯繫表單的方法的優缺點後，咱們逐一講解制做表單的細節教程。

Contact Form 7 + Flamingo製做聯繫表單教程

安裝並啓用插件Contact Form 七、Flamingo，相關教程：如何安裝wordpress插件（3種方法）

若是你要製做英文的詢盤表單，須要確保用戶的語言也是英文（修改方法見下圖），由於contact form7會根據你的後臺語言爲你建立表單的文案、提示信息。

修改用戶語言與詢盤表單語言一致

1. 見下圖，咱們開始製做表單，進入contact》add new，你將看到默認表單的內容

2. 輸入表單的標題，譬如contact us

3. 在form頁面中製做表單內容，下文會詳細介紹

4. 在mail頁面中製做詢盤通知郵件的模板，下文也會詳細介紹

在form頁面中，將默認表單中的subject字段去掉，只保留Your name、Your email、Your message三個字段，由於簡單的表單便於客戶提交，不要搞複雜的表單增長客戶填寫難度

接下來咱們添加一個簡單的數字計算驗證問題，以便阻擋部分廣告郵件；數字計算簡單好算便可，別搞10以上的加減法，它會增長客戶提交詢盤的難度

操做步驟以下，在form頁面中，點擊下圖中的quiz按鈕

填寫questions and answers，問題和答案之間用|符號隔開，譬如2+2=?|4，而後點擊insert tag便可將問題插入到表單中

以下圖所示，問題插入到了提交按鈕[submit 「send」]上方。

以下圖所示，在字段下方增長空白行能爲字段下方增長一點空白，經過回車增長1個空白行便可，多個空行不會累積。（實際是這個操做將label變爲了p，而p通常都會有行下的間距，從而增長了字段間的空隙）。

至此，能夠保存一下表單，你將在表單的標題下方看到下圖中的藍色區域，複製其中的短代碼，將它黏貼到聯繫咱們頁面中，以便預覽表單的效果。

接下來，請建立一個聯繫咱們頁面，即使不使用頁面編輯器，使用wordpress默認的編輯模式也可使用聯繫表單的短代碼，只需將上面複製的端代碼黏貼到頁面中，並保存便可。

若是你使用Elementor編輯器，能夠在建立頁面時，在左側元素欄中，找到名爲shortcode的元素，將其拖拽到右側頁面中，

而後在左側內容框內輸入表單代碼，你將會看到右側直接顯示了contact form7的表單，

呃…不大好看是吧，不懂css代碼就很難去調整它的外觀，固然，能夠藉助其餘插件來爲表單定義樣式，或者直接就用這個樸素版的，

咱們稍微對它作一些簡單的樣式調整，譬如將表格寬度改成全寬（我懂的css也只是入門級別的?，沒法提供複雜花樣的代碼

下面是我作的「樸素的」修改，將字段寬度改成了100%全寬。（你想用的話，就拿去用吧

<label style="width:100%"> Your Name *
    \[text* your-name\] </label>

<label style="width:100%"> Your Email *
    \[email* your-email\] </label>

<label style="width:100%"> Your Message *
    \[textarea* your-message\] </label>

\[quiz quiz-57 "2+2=? | 4"\]

\[submit "Send"\]

對應的表單效果以下圖所示

下面對字段的構成的要點作一下說明，譬如[text* your-name]

• text是字段的輸入類型，譬如這裏表示文本輸入類型，email表示輸入郵箱類型，若是不是郵箱，將沒法提交表單

• *表明這個字段是必填的

• your-name是字段的名稱，若是改了這個名稱，在mail頁面內的郵件模板也要配套修改，我曾經在改過字段名稱後，忘了在mail裏修改，結果致使收到的郵件通知裏缺乏內容

接下來咱們去mail頁面配置郵件通知模板，在下圖中，每一個序號對應的內容分別是

1. 在form中包含的字段，他們在下面的四、五、6中可調用並獲取字段的值，如若form中不包含的字段，即使引用也沒用

2. to：這裏填寫郵件通知的收件人郵箱，通常默認是後臺帳戶郵箱

3. from：這裏填寫發送通知郵件的郵箱，此處要注意填寫你在smtp中配置的發件郵箱，若是你用的發件郵箱的域名不等於本網站域名，那麼，即使填寫後頁面上出現❗感嘆號警示也不用在乎

4. subject：此處填寫郵件通知的標題，按本身喜愛填就能夠了，也能夠在此處加入字段的調用，譬如：來自[your-name]的詢盤

5. additional headers：默認是reply-to:[your-email]，表示你如果回覆郵件通知，那麼回覆郵件的收件人默認就是發詢盤給你的郵箱，等於直接回復通知郵件就能夠直接回復客戶了

6. message body：這裏填寫郵件正文內容，如若你有新增或刪減字段，在此處記得對應把字段也進行調整，譬如前文中，我把[your-subject]字段去掉了，那在此處也須要把它相關的內容都刪除。

作完表單後，記得測一下郵件通知是否能收到、內容是否準確，在flamingo插件中是否有詢盤記錄（見下圖）,flamingo默認有subject字段，若是你刪掉了這個字段，就會看到subject列內容都是[your-subject]，沒啥關係哈~

Elementor Pro + Elementor Contact Form DB 製做聯繫表單教程

我將這種方法用在了個人模板站上，而且將詢盤表單作成了全局通用的，譬如點擊按鈕彈出詢盤表單的popup、聯繫咱們頁面的表單都共用同一個

1. 配置發件郵箱帳號，在wordpress後臺安裝SMTP插件並設置發件功能

2. 安裝插件

   Elementor、Elementor pro

   、Elementor Contact Form DB並啓用

3. 用Elementor添加新模板，模板類型爲popup（彈出窗），咱們將在popup裏放聯繫表單

4. 在popup模板庫裏不要選擇模板導入，直接點擊右上角關閉

5. 將heading和form元素加入到頁面，以下圖所示

6.設置須要用戶必須填寫的字段，並顯示*標記；你也能夠在左側新增字段，默認狀況下是name、email、message三個字段，建議字段不要過多，下降用戶填寫難度

7.將調整完畢的form元素右鍵存儲爲Global元素，以便於在其餘地方重複使用

8.發佈表單，並將條件設爲全站，保存便可，不須要設置其餘（triggers或advanced rules）

9.若是須要在產品頁面點擊詢盤按鈕時彈出詢盤，請在elementor中編輯對應頁面，並點擊對應按鈕，而後在左側按鈕設置中，點擊link 右側的dynamic 按鈕（圖中的2），在下拉選項中選擇popup，而後繼續點擊popup，在setting中搜索並選中剛纔添加的popup

設置按鈕的link值爲popup

搜索已添加的popup名稱，並選擇

10.此時，點擊詢盤按鈕，將可見到詢盤彈出窗口

11.咱們在任一產品頁面提交詢盤進行測試，查看是否能收到詢盤郵件通知以及後臺是否記錄，詢盤郵件將發送到你的wordpress帳戶郵箱裏，如需添加收件郵箱，請在詢盤表單中進行配置，多個郵箱之間用英文逗號間隔便可。同時，在此處也能設置通知郵件的標題、正文。

在發完測試詢盤後，咱們查看郵箱是否收到郵件（注意檢查垃圾郵箱），同時在後臺Elementor DB中查看詢盤記錄，以下圖所示，大功告成。

本文原文由LOYSEO 發佈，LOYSEO專一於WordPress、Elementor、外貿建站教程。

推薦閱讀

2020年B2B外貿建站的終極教程
2020年外貿建站須要注意什麼？（4300字經驗談）