如何製做免費的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字經驗談）