如何制作免費的WordPress聯系表單？這個插件提供了付費表單才有的功能【視頻+圖文教程】

Ninja Forms不僅能夠可視化創作詢盤表單，還能記錄詢盤、添加隱藏欄位、添加反垃圾驗證、提交表單時可設定多個動作，這在Wpforms插件中可都是付費功能，同時，Ninja Form激活安裝量一百萬+，擁有4.5/5的好評，本文是制作B2B網站常用的詢盤表單的詳細教程，請往下看，

下方是Ninja Forms的圖文版教程，
原文地址：https://loyseo.com/how-to-create-a-contact-form-with-ninja-forms/

下載Ninja Forms并安裝

Ninja Forms插件下載地址：Https://Wordpress.Org/Plugins/Ninja-Forms/，請安裝后啟用它，

若您是新手，插件安裝教程請點擊此處查看，

使用Ninja Forms制作詢盤表單

Ninja Forms默認提供了一個Contact Me表單，你可以點擊圖中的齒輪按鈕，則將展開操作項，從中點擊Edit進入編輯

進入忍者表單之后，如下圖所示：

1. Form Field標簽頁，用于制作表單欄位

2. Emails & Actions標簽頁，用于配置郵件通知與表單提交動作的

3. Advanced標簽頁是用于設定更高級的功能

4. Preview Changes是預覽按鈕

5. 加號按鈕用于向當前標簽頁添加新內容，譬如添加欄位

6. 發布按鈕，用于保存和發布當前表單，

首先進行表單的制作

默認的Contact Me表單中已有三個欄位，作為詢盤而言已經夠用了，我們不用再添加新的內容型欄位，只需要添加一些隱藏欄位（Hidden）和反垃圾欄位（Anti-Spam），

隱藏欄位用于存盤詢盤的來源頁面和IP，而反垃圾欄位是通過簡單的加法來實作屏蔽營銷郵件，

請點開右下角的加號展開欄位選擇面板，找到其中名叫Hidden的欄位，單擊它就可以將它加入到表單中，你也可以左鍵點選之后拖拽到左側的表單的指定位置，

我們一共添加3個隱藏欄位，分別是：詢盤來源頁面標題、詢盤來源頁面網址、詢盤來源的IP，隱藏欄位在表單中所放的位置沒有影響，你可以把它放在提交按鈕下方，它不會向用戶展示，

當你把隱藏欄位加到頁面中之后，如下圖所示，左鍵點選這個欄位，然后在頁面右側就會顯示這個欄位的編輯面板，請點擊第2個輸入框右側的小圖示，在下拉選項中選擇Wordpress，然后找到并點擊頁面標題（{Wp:post_title}），這是動態呼叫資料庫欄位的做法，非常便利，

如下圖所示，在Label中輸入這個隱藏欄位的名稱，在Default Value中選擇動態呼叫的欄位，然后一定要點擊右上角的DONE按鈕進行保存，這樣這個欄位就設定完成了，

接下來你可以復制這個隱藏欄位，以便創作另外兩個隱藏欄位，如下圖所示，將滑鼠懸停于欄位上方，在欄位的右側會出現齒輪圖示，滑鼠懸停在齒輪上，你將會看到左邊出現復制和洗掉圖示，

需要注意的是，如果你當前已經選中這個欄位，也就是說這個欄位的邊框是綠色的，那么他將不會出現齒輪圖示，也就不能進行復制和洗掉了，

通過復制欄位的方法，我們再創建另外兩個隱藏欄位，分別是詢盤來源頁面的網址-{Wp:post_url}和詢盤來源的IP-{Other:user_ip}，如下圖所示，便是循盤來源IP的設定方法，

接下來我們添加反垃圾欄位（Anti-Spam），請將它添加到提交按鈕上方，如下圖所示，你可以設定2+3等于幾這種簡單的算術問題，

完成這些步驟后請點擊右上角的發布進行保存，

其次，設定提交詢盤時的郵件通知和動作

默認已經提供了如下4個常用動作，分別是：

1. Store Submission：記錄詢盤

2. Email Confirmation：向提交詢盤的人發送郵件確認

3. Email Notification：向網站管理員或其他自定義人員發送詢盤郵件

4. Success Message：向提交詢盤的人顯示成功提交資訊

每個動作都提供了開關按鈕，如果你不想使用它，就將它關閉，

點擊每個動作的右側的齒輪圖示，就可以進入動作的設定，我們逐一查看，

記錄詢盤

這個動作的設定通常保持默認即可，在圖中Save All表示存盤所有欄位資訊，如果你不想存盤某些欄位，可以添加Except欄位進行排除，

向提交詢盤的人發送郵件確認

這個動作的默認功能如下圖所示，他會將用戶提交的所有欄位資訊，發送郵件給用戶，你可以在這里配置郵件的主題、郵件正文包含的表單欄位，默認的表單欄位設定是不包含隱藏欄位的，

在上圖中，但凡欄位的右側有一個資料庫的小圖示的，都可以呼叫動態內容，譬如呼叫網站管理員郵箱，也可以直接輸入指定的值，譬如非網站用戶的郵箱，

郵件的正文也可以由你自行編輯內容的構成，

向網站管理員或其他自定義人員發送詢盤郵件

這個功能與上節功能是相似的，只是收件人變成了網站管理員，郵件回復人設定為了詢盤郵箱，

建議你在郵件正文中添加隱藏欄位資訊，這樣你收到的詢盤通知郵件里面，就能清楚的顯示詢盤來源的頁面以及詢盤客戶的IP，

向提交詢盤的人顯示成功提交資訊

在用戶提交完詢盤后，頁面上會顯示一句提示文案，告知用戶已經成功提交，這個文案你可以自己進行編輯，也可以保持默認，

在這個默認的表單中，成功提交資訊里面還向用戶展示了如下資訊：有一封確認郵件已經發往了您的郵箱Xxx，這與上文中的郵件確認進行了呼應，如果你沒有開啟郵件確認的功能，記得將這句話洗掉，

如果你使用Google Analytics進行目標轉化的跟蹤，那么你可能還需要添加一個Redirect動作，如下圖所示，在URL中填寫詢盤提交成功后所進入的頁面，通常是感謝頁面，

高級設定

在高級設定中，常用的功能如下：設定表單標題的名稱、表單標題展示開關、清除成功提交的表單開關、隱藏成功提交的表單開關，

關于“清除成功提交的表單開關”和“隱藏成功提交的表單開關”，如果你沒有設定Redirect到Thank You頁面，那么我建議你開啟它們，因為如果不清除的話，很可能會造成誤會，令人以為表單沒有提交成功，從而導致反復提交表單，

至此你可以將表單發布了，然后關閉表單回到Ninja Forms的Dashboard頁面，從中可以獲取Ninja Forms的Shortcode，將它粘貼到需要放詢盤表單的頁面中，譬如聯系我們頁面、產品頁面或者彈出層（Popup）中，

最后，無比在頁面中提交詢盤進行測驗，你將看到詢盤記錄在后臺的Submission頁面，

如果你的郵箱中沒有收到詢盤通知，那很可能是因為你還沒有配置Smtp發件功能，請參考這篇教程安裝Smtp插件進行配置，

如果想使用Contact Form 7或Elementor Pro制作詢盤表單的話，請看下文：如何在WordPress中制作聯系表單（3種方法）

常見問題

在Elementor的彈出層上無法顯示Ninja表單，怎么辦？

不要在Elementor的Popup（彈出層）中放Ninja Forms、Wpforms、Gravity Forms，他們都有類似的問題：無法展示表單或是表單無法提交；
你可以安裝免費插件Popup Maker實作彈出層上放表單，
也可以直接使用Elementor的Forms元素制作表單，缺點是無法添加數學驗證碼，

本文原文由LOYSEO 發布，LOYSEO專注于WordPress、Elementor、外貿建站教程，

推薦閱讀

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

標籤：其他

上一篇：IT人群體力活動行為調查問卷

下一篇：WEB前端—CSS網頁布局（標準流，浮動流）