如何製作免費的WordPress聯絡表單?這個外掛提供了付費表單才有的
Ninja Forms不僅能夠視覺化創作詢盤表單,還能記錄詢盤、新增隱藏欄位、新增反垃圾驗證、提交表單時可設定多個動作,這在Wpforms外掛中可都是付費功能,同時,Ninja Form啟用安裝量一百萬+,擁有4.5/5的好評。本文是常用的詢盤表單的詳細教程,請往下看。
下方是Ninja Forms的圖文版教程。
原文地址:
下載Ninja Forms並安裝
Ninja Forms外掛下載地址:,請安裝後啟用它。
若您是新手,。
使用Ninja Forms製作詢盤表單
Ninja Forms預設提供了一個Contact Me表單,你可以點選圖中的齒輪按鈕,則將展開操作項,從中點選Edit進入編輯
進入忍者表單之後,如下圖所示:
-
Form Field標籤頁,用於製作表單欄位
-
Emails & Actions標籤頁,用於配置郵件通知與表單提交動作的
-
Advanced標籤頁是用於設定更高階的功能
-
Preview Changes是預覽按鈕
-
加號按鈕用於向當前標籤頁新增新內容,譬如新增欄位
-
釋出按鈕,用於儲存和釋出當前表單。
首先進行表單的製作
預設的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個常用動作,分別是:
-
Store Submission:記錄詢盤
-
Email Confirmation:向提交詢盤的人傳送郵件確認
-
Email Notification:向網站管理員或其他自定義人員傳送詢盤郵件
-
Success Message:向提交詢盤的人顯示成功提交資訊
每個動作都提供了開關按鈕,如果你不想使用它,就將它關閉。
點選每個動作的右側的齒輪圖示,就可以進入動作的設定,我們逐一檢視。
記錄詢盤
這個動作的設定通常保持預設即可,在圖中Save All表示儲存所有欄位資訊,如果你不想儲存某些欄位,可以新增Except欄位進行排除。
向提交詢盤的人傳送郵件確認
這個動作的預設功能如下圖所示。他會將使用者提交的所有欄位資訊,傳送郵件給使用者。你可以在這裡配置郵件的主題、郵件正文包含的表單欄位,預設的表單欄位設定是不包含隱藏欄位的。
在上圖中,但凡欄位的右側有一個資料庫的小圖示的,都可以呼叫動態內容,譬如呼叫網站管理員郵箱,也可以直接輸入指定的值,譬如非網站使用者的郵箱。
郵件的正文也可以由你自行編輯內容的構成。
向網站管理員或其他自定義人員傳送詢盤郵件
這個功能與上節功能是相似的,只是收件人變成了網站管理員,郵件回覆人設定為了詢盤郵箱。
建議你在郵件正文中新增隱藏欄位資訊,這樣你收到的詢盤通知郵件裡面,就能清楚的顯示詢盤來源的頁面以及詢盤客戶的IP。
向提交詢盤的人顯示成功提交資訊
在使用者提交完詢盤後,頁面上會顯示一句提示文案,告知使用者已經成功提交。這個文案你可以自己進行編輯,也可以保持預設。
在這個預設的表單中,成功提交資訊裡面還向使用者展示瞭如下資訊:有一封確認郵件已經發往了您的郵箱Xxx。這與上文中的郵件確認進行了呼應。如果你沒有開啟郵件確認的功能,記得將這句話刪除。
如果你使用Google Analytics進行目標轉化的跟蹤,那麼你可能還需要新增一個Redirect動作,如下圖所示,在URL中填寫詢盤提交成功後所進入的頁面,通常是感謝頁面。
高階設定
在高階設定中,常用的功能如下:設定表單標題的名稱、表單標題展示開關、清除成功提交的表單開關、隱藏成功提交的表單開關。
關於“清除成功提交的表單開關”和“隱藏成功提交的表單開關”,如果你沒有設定Redirect到Thank You頁面,那麼我建議你開啟它們,因為如果不清除的話,很可能會造成誤會,令人以為表單沒有提交成功,從而導致反覆提交表單。
至此你可以將表單釋出了,然後關閉表單回到Ninja Forms的Dashboard頁面,從中可以獲取Ninja Forms的Shortcode,將它貼上到需要放詢盤表單的頁面中,譬如聯絡我們頁面、產品頁面或者彈出層(Popup)中。
最後,無比在頁面中提交詢盤進行測試,你將看到詢盤記錄在後臺的Submission頁面。
如果你的郵箱中沒有收到詢盤通知,那很可能是因為你還沒有配置Smtp發件功能。請參考這篇教程。
如果想使用Contact Form 7或Elementor Pro製作詢盤表單的話,請看下文:
常見問題
在Elementor的彈出層上無法顯示Ninja表單,怎麼辦?
不要在Elementor的Popup(彈出層)中放Ninja Forms、Wpforms、Gravity Forms,他們都有類似的問題:無法展示表單或是表單無法提交;
你可以安裝免費外掛實現彈出層上放表單。
也可以直接使用Elementor的Forms元素製作表單,缺點是無法新增數學驗證碼。
本文原文由 釋出,LOYSEO專注於WordPress、Elementor、外貿建站教程。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4328/viewspace-2826283/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 製作動態圖表,沒有比這個方法更簡單的了
- 工單系統提供免費下載
- table表單製作個人簡歷
- validate表單驗證外掛
- 製作一個超簡單的全屏外掛(基於JQuery)jQuery
- 善用Excel,製作加班費統計表Excel
- 價目表製作報價單製作軟體
- 從零實現一個Vue表單驗證外掛Vue
- 這款免費的待辦事項清單APP,讓我放棄了滴答清單APP
- 淺談bootstrap表單驗證外掛BootstrapValidatorboot
- 如何製作 Sketch 外掛
- 基於Bootstrap的Material Design風格表單外掛bootMaterial Design
- 幾個適合Java開發者的免費IDEA外掛JavaIdea
- SAP SD免費訂單
- 共有的表單欄位屬性
- ECharts,付費求教,有人能繪製出文中的 曲線圖表嘛!Echarts
- 免費的visual studio智慧程式碼外掛——CodeGeeX
- [外掛擴充套件]自定義表單外掛【2015-02-28更新】套件
- wordpress外掛開發03-簡單的all in one seo 外掛開發
- 一大推DISCUZ系列外掛模板來了,需要的免費搶!!!
- 重構:從 0.1 構建一個 Vue 表單驗證外掛Vue
- 原生js設計表單驗證外掛的思路分析JS
- 基於Bootstrap的強大jQuery表單驗證外掛bootjQuery
- 全網最全-如何免費下載付費音樂歌曲,6個網站+8個APP網站APP
- 幫你快速製作圖表的ps外掛:PS拉框助手
- bypass-paywalls-chrome:chrome繞過付費牆外掛Chrome
- 安裝ps 並安裝免費外掛
- 動態二維碼免費製作
- 【vue外掛篇】vue-form-check 表單驗證VueORM
- 如何製作一份帶超連結的工作表目錄,這裡有簡單的方法
- 如何優雅的提交一個表單
- 簡單的 Vue.js 表單驗證外掛 (vee-validate) 使用總結Vue.js
- 這才是免費OA辦公系統該有的樣子
- 寫一個簡單易用可擴充套件vue表單驗證外掛(vue-validate-easy)套件Vue
- pdf線上轉換免費,這樣做很簡單!
- 會計工作的關鍵一步——用免費視覺化工具製作財務報表視覺化
- 零基礎創作專業wordpress網站10-製作聯絡頁面網站
- 如何開發APP:使用免費無程式碼製作APP工具APP