一個(gè)免費(fèi)的聯(lián)系表單WordPress建站插件，卻提供了付費(fèi)表單才有的功能【視頻+圖文】

Ninja Forms不僅能夠可視化創(chuàng)作詢盤表單，還能記錄詢盤、添加隱藏字段、添加反垃圾驗(yàn)證、提交表單時(shí)可設(shè)置多個(gè)動(dòng)作，這在Wpforms插件中可都是付費(fèi)功能，同時(shí)，Ninja Form激活安裝量一百萬+，擁有4.5/5的好評(píng)。本文是制作B2B網(wǎng)站常用的詢盤表單的詳細(xì)教程，請(qǐng)往下看。

下方是圖文教程

下載Ninja Forms并安裝

請(qǐng)?jiān)赪ordPress后臺(tái)的安裝插件界面直接搜索Ninja Forms插件安裝，安裝完成后，啟用它。

使用Ninja Forms制作詢盤表單

Ninja Forms默認(rèn)提供了一個(gè)Contact Me表單，你可以點(diǎn)擊圖中的齒輪按鈕，則將展開操作項(xiàng)，從中點(diǎn)擊Edit進(jìn)入編輯

進(jìn)入忍者表單之后，如下圖所示：

Form field標(biāo)簽頁，用于制作表單字段

Emails & Actions標(biāo)簽頁，用于配置郵件通知與表單提交動(dòng)作的

Advanced標(biāo)簽頁是用于設(shè)置更高級(jí)的功能

Preview changes是預(yù)覽按鈕

加號(hào)按鈕用于向當(dāng)前標(biāo)簽頁添加新內(nèi)容，譬如添加字段

發(fā)布按鈕，用于保存和發(fā)布當(dāng)前表單。

首先進(jìn)行表單的制作

默認(rèn)的Contact Me表單中已有三個(gè)字段，作為詢盤而言已經(jīng)夠用了，我們不用再添加新的內(nèi)容型字段，只需要添加一些隱藏字段（hidden）和反垃圾字段（anti-spam）。

隱藏字段用于存儲(chǔ)詢盤的來源頁面和IP，而反垃圾字段是通過簡(jiǎn)單的加法來實(shí)現(xiàn)屏蔽營(yíng)銷郵件。

請(qǐng)點(diǎn)開右下角的加號(hào)展開字段選擇面板，找到其中名叫hidden的字段，單擊它就可以將它加入到表單中，你也可以左鍵點(diǎn)選之后拖拽到左側(cè)的表單的指定位置。

我們一共添加3個(gè)隱藏字段，分別是：詢盤來源頁面標(biāo)題、詢盤來源頁面網(wǎng)址、詢盤來源的IP，隱藏字段在表單中所放的位置沒有影響，你可以把它放在提交按鈕下方，它不會(huì)向用戶展示。

當(dāng)你把隱藏字段加到頁面中之后，如下圖所示，左鍵點(diǎn)選這個(gè)字段，然后在頁面右側(cè)就會(huì)顯示這個(gè)字段的編輯面板，請(qǐng)點(diǎn)擊第2個(gè)輸入框右側(cè)的小圖標(biāo)，在下拉選項(xiàng)中選擇wordpress，然后找到并點(diǎn)擊頁面標(biāo)題（{wp:post_title}），這是動(dòng)態(tài)調(diào)用數(shù)據(jù)庫字段的做法，非常便利。

如下圖所示，在label中輸入這個(gè)隱藏字段的名稱，在default value中選擇動(dòng)態(tài)調(diào)用的字段，然后一定要點(diǎn)擊右上角的DONE按鈕進(jìn)行保存，這樣這個(gè)字段就設(shè)置完成了。

接下來你可以復(fù)制這個(gè)隱藏字段，以便創(chuàng)作另外兩個(gè)隱藏字段，如下圖所示，將鼠標(biāo)懸停于字段上方，在字段的右側(cè)會(huì)出現(xiàn)齒輪圖標(biāo)，鼠標(biāo)懸停在齒輪上，你將會(huì)看到左邊出現(xiàn)復(fù)制和刪除圖標(biāo)。

需要注意的是，如果你當(dāng)前已經(jīng)選中這個(gè)字段，也就是說這個(gè)字段的邊框是綠色的，那么他將不會(huì)出現(xiàn)齒輪圖標(biāo)，也就不能進(jìn)行復(fù)制和刪除了。

通過復(fù)制字段的方法，我們?cè)賱?chuàng)建另外兩個(gè)隱藏字段。分別是詢盤來源頁面的網(wǎng)址-{wp:post_url}和詢盤來源的IP-{other:user_ip}，如下圖所示，便是循盤來源IP的設(shè)置方法。

接下來我們添加反垃圾字段（anti-spam），請(qǐng)將它添加到提交按鈕上方，如下圖所示，你可以設(shè)置2+3等于幾這種簡(jiǎn)單的算術(shù)問題。

完成這些步驟后請(qǐng)點(diǎn)擊右上角的發(fā)布進(jìn)行保存。

其次，設(shè)置提交詢盤時(shí)的郵件通知和動(dòng)作

默認(rèn)已經(jīng)提供了如下4個(gè)常用動(dòng)作，分別是：

Store Submission：記錄詢盤

Email confirmation：向提交詢盤的人發(fā)送郵件確認(rèn)

Email notification：向網(wǎng)站管理員或其他自定義人員發(fā)送詢盤郵件

Success message：向提交詢盤的人顯示成功提交信息

每個(gè)動(dòng)作都提供了開關(guān)按鈕，如果你不想使用它，就將它關(guān)閉。

點(diǎn)擊每個(gè)動(dòng)作的右側(cè)的齒輪圖標(biāo)，就可以進(jìn)入動(dòng)作的設(shè)置，我們逐一查看。

記錄詢盤

這個(gè)動(dòng)作的設(shè)置通常保持默認(rèn)即可，在圖中Save all表示存儲(chǔ)所有字段信息，如果你不想存儲(chǔ)某些字段，可以添加except字段進(jìn)行排除。

向提交詢盤的人發(fā)送郵件確認(rèn)

這個(gè)動(dòng)作的默認(rèn)功能如下圖所示。他會(huì)將用戶提交的所有字段信息，發(fā)送郵件給用戶。你可以在這里配置郵件的主題、郵件正文包含的表單字段，默認(rèn)的表單字段設(shè)置是不包含隱藏字段的。

在上圖中，但凡字段的右側(cè)有一個(gè)數(shù)據(jù)庫的小圖標(biāo)的，都可以調(diào)用動(dòng)態(tài)內(nèi)容，譬如調(diào)用網(wǎng)站管理員郵箱，也可以直接輸入指定的值，譬如非網(wǎng)站用戶的郵箱。

郵件的正文也可以由你自行編輯內(nèi)容的構(gòu)成。

向網(wǎng)站管理員或其他自定義人員發(fā)送詢盤郵件

這個(gè)功能與上節(jié)功能是相似的，只是收件人變成了網(wǎng)站管理員，郵件回復(fù)人設(shè)置為了詢盤郵箱。

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

向提交詢盤的人顯示成功提交信息

在用戶提交完詢盤后，頁面上會(huì)顯示一句提示文案，告知用戶已經(jīng)成功提交。這個(gè)文案你可以自己進(jìn)行編輯，也可以保持默認(rèn)。

在這個(gè)默認(rèn)的表單中，成功提交信息里面還向用戶展示了如下信息：有一封確認(rèn)郵件已經(jīng)發(fā)往了您的郵箱xxx。這與上文中的郵件確認(rèn)進(jìn)行了呼應(yīng)。如果你沒有開啟郵件確認(rèn)的功能，記得將這句話刪除。

如果你使用Google analytics進(jìn)行目標(biāo)轉(zhuǎn)化的跟蹤，那么你可能還需要添加一個(gè)redirect動(dòng)作，如下圖所示，在URL中填寫詢盤提交成功后所進(jìn)入的頁面，通常是感謝頁面。

高級(jí)設(shè)置

在高級(jí)設(shè)置中，常用的功能如下：設(shè)置表單標(biāo)題的名稱、表單標(biāo)題展示開關(guān)、清除成功提交的表單開關(guān)、隱藏成功提交的表單開關(guān)。

關(guān)于“清除成功提交的表單開關(guān)”和“隱藏成功提交的表單開關(guān)”，如果你沒有設(shè)置redirect到thank you頁面，那么我建議你開啟它們，因?yàn)槿绻磺宄脑?，很可能?huì)造成誤會(huì)，令人以為表單沒有提交成功，從而導(dǎo)致反復(fù)提交表單。

至此你可以將表單發(fā)布了，然后關(guān)閉表單回到ninja forms的dashboard頁面，從中可以獲取ninja forms的shortcode，將它粘貼到需要放詢盤表單的頁面中，譬如聯(lián)系我們頁面、產(chǎn)品頁面或者彈出層（Popup）中。

最后，無比在頁面中提交詢盤進(jìn)行測(cè)試，你將看到詢盤記錄在后臺(tái)的submission頁面。

如果你的郵箱中沒有收到詢盤通知，那很可能是因?yàn)槟氵€沒有配置smtp發(fā)件功能。

常見問題

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

不要在Elementor的popup（彈出層）中放Ninja forms、Wpforms、Gravity Forms，他們都有類似的問題：無法展示表單或是表單無法提交； 你可以安裝免費(fèi)插件Popup maker實(shí)現(xiàn)彈出層上放表單。 也可以直接使用Elementor的Forms元素制作表單，缺點(diǎn)是無法添加數(shù)學(xué)驗(yàn)證碼。

（來源：B2B獨(dú)立站教程Bonnie）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：B2B獨(dú)立站教程Bonnie）