Ninja Forms 聯絡表單基礎應用簡介和評價 - 網站迷谷
文章推薦指數: 80 %
由於市場上比較多教學網站推薦Contact form 7 和WPForms 這類比較簡易的表單外掛,但其他還有存在很多良好的選擇,就像這次介紹的Ninja Forms, ...
Stackable編輯內容新體驗
立即試用
跳至主要內容
選單
您正在尋找一套簡單易用好上手的WordPress聯絡表單外掛嗎?我們這次介紹超過【100萬活躍用戶】使用的NinjaForms正正符合您的需求。
操作介面非常像代表角色【小忍者】般可愛和友善,透過拖放(Draganddrop)不同的表單欄位,就能輕鬆建立多功能的實用表單。
但由於教學內容比較沉長和廣泛,如果您只是需要簡單功能,可以略過不符合您需求的部分,NinjaForms提供的【免費版】已經適合大部分新手用家的需要和應用層面,這次教學是以【付費版】為主,如果您發現有些內容和功能無法使用,就是屬於付費版的範圍之內,它將幫助您像專業網站設計師一樣使用易於使用的拖放式表單編輯器來構建所需的自定義WordPress各式表單。
NinjaForms外掛官方網站
他們是一家WordPress開發公司,為您創建功能強大的外掛,將您的業務或項目提升到新的水平。
WordPress外掛存儲庫中有幾個可用的外掛,包括最著名的NinjaForms。
除了提供給社區的幾個免費外掛外,我們還出售各種附加組件,將NinjaForms擴展到了新的高度!
了解更多背景資料
如何使用NinjaForms?
NinjaForms表單和一般的WordPress外掛相似,您可以從WordPress網站後台的【外掛】中,搜尋表單名稱即可找到表單的核心程式並安裝應用。
如果是建立普通的部落格和公司形象網站,推薦使用免費版的NinjaForms即可滿足基礎的需求,透過拖放(Draganddrop)不同的表單欄位,就能輕鬆建立多功能的實用表單。
WordPress 官方外掛目錄–NinjaForms
擁有極高5星評分
由於市場上的競爭產品有很多,新手記得留意【外掛評分】來決定是否安裝和啟用,因為無法避免一些(打手)或(官方自己派來的員工或付錢投票),所以心中要打一個平衡和理性的準備。
從以上評分得知,也超過80%的用戶是滿意的,而且基數超過1,000人投票,也是值得信任的外掛,因為表單外掛對網站的生意查詢具有很大的幫助和助益,不能隨行套用。
查看所有使用者的評價
特色:支援大量第三方串接服務
新手剛接觸WordPress這個領域,比較多教學網站推薦Contactform7和WPForms這類比較簡易的表單外掛,也是非常合適的選擇。
市場上有很多進階型的表單外掛,例如GravityForms和FormidableForms就是針對高端的操作者,提供複雜的【條件式】設定和細部控制,也和大量客戶關係管理工具(CustomerRelationshipManagement,縮寫CRM)或電子郵件行銷工具相配合。
了解第三方串接服務的概括
基礎通用表單功能
個人資料訊息
隨著NinjaForms表單外掛不停更新和進化,您應該會看到更多新增的欄位選項出現,除了基礎的姓名、電子郵件、地址或郵政編號等等,各類形式的新欄位睦續更新,標準的網站和部落格一般都足夠有餘,部份進階功能都屬於付費版,可以按自己公司業務的需求而定。
常用欄位(CommonFields)
單行文字欄位(SingleLineText)段落文字欄位(ParagraphText)必選選擇欄位(RadioList)單項選擇欄位(Select)多項選擇欄位(Multi-Select)選擇圖片欄位(SelectImage)單選框欄位(SingleCheckbox)複選框列表欄位(CheckboxList)日期欄位(Date)提交欄位(Submit)
版型欄位(LayoutFields)
插入HTML程式碼(HTML)插入分隔線(Divider)
其他功能欄位(Miscellaneous)
確認按鈕(ConfirmFields)隱藏按鈕(HiddenFields)數目字欄位(NumberFields)驗證碼欄位(RecaptchaFields)反垃圾郵件欄位(Anti-SpamFields)星級評分欄位(StarRatingFields)
了解更多(欄位FieldTypes)的設定
拖拉表格物件排版簡易示範
拖動物件不放,擺放到合適的位置
移動物件後,可以選擇【刪除攔位】或【新建欄位】
拖動既有物件到新的位置
不滿意舊的排版,移動到正確的位置
輕鬆刪除物件元素
隨意調整【欄位】的比例和寬度
一次過移動(群組Group)的物件
新增和調整外觀樣式(AddingStyles)
無論是編輯默認表單樣式,默認字段樣式,字段樣式類型,錯誤樣式還是單個字段樣式,都將為您提供許多相同的選項。
在本文檔中,我希望解釋一下您可能需要了解的CSS基礎知識,以釋放NinjaForms的Layout&Styles擴展的功能。
基本CSS屬性(BasicCSSProperties)
儘管將來可能會增加更多內容,但在這裡我們保留了可用於樣式元素的基本元素。
背景顏色(BackgroundColor)
這為您提供了一個非常簡單的顏色選擇器,可以撥入所選顏色或鍵入十六進制顏色值。
邊框寬度(BorderWidth)
可以接受1到4個值。
檢查以下示例:如果您不熟悉CSS的Border語法,下方4個數值代表【上方、下方、左方和右方】邊框粗度。
1px–這將在所有四個側面上添加一個1像素的邊框。
1px2px–這將在頂部和底部添加1像素邊框,在左側和右側添加2像素邊框1px2px3px–這將在頂部添加1像素邊框,在左側和右側添加2px邊框,在底部添加3像素邊框。
1px2px3px4px–這將在頂部添加1像素邊框,在右側添加2像素,在底部添加3像素,在左側添加4像素。
邊框顏色(BorderColor)
這為您提供了一個非常簡單的顏色選擇器,可以撥入所選顏色或鍵入十六進制顏色值。
文字顏色(TextColor)
這為您提供了一個非常簡單的顏色選擇器,可以撥入所選顏色或鍵入十六進制顏色值。
高度(Height)
用一個整數,然後跟px或%選擇元素的高度。
如500px或100%。
寬度(Width)
選擇您的元素的寬度,其後跟一個整數,後跟px或%。
如500px或100%。
高級CSS屬性(AdvancedCSSProperties)
這些是普通用戶可能不需要的項目,但如果您希望更多控制權,我們將其中包括。
浮動元素(Float)
簡單點說物件可以【靠左】、【置中】或【靠右】對齊
字體大小(FontSize)
這通常是整數,後跟px或em。
如16px或1em。
邊界(Margin)
可以接受1到4個值。
只要它是塊級元素,它就會在您將其應用的外部添加空格。
檢查以下示例:1px–這將在所有四個側面上增加一個1像素的邊距。
1px2px–這將在頂部和底部添加1個像素邊距,在左側和右側添加2個像素邊距。
1px2px3px–這將在頂部添加1像素的邊距,在左側和右側添加2像素的邊距,在底部添加3像素的邊距。
1px2px3px4px–這將在頂部添加1個像素邊距,在右邊添加2個像素,在底部添加3個像素,並在左側添加4個像素。
邊距(Padding)
可以接受1到4個值。
只要它是塊級元素,它就會在您要應用的內容內部添加空格。
檢查以下示例:1px–這將在所有四個側面上添加一個1像素的填充。
1px2px–這將在頂部和底部添加1像素填充,在左側和右側添加2像素填充。
1px2px3px–這將在頂部添加1像素的填充,在左側和右側添加2像素的填充,在底部添加3像素的填充。
1px2px3px4px–這將在頂部添加1像素填充,在右側添加2像素,在底部添加3像素,並在左側添加4像素。
進階CSS(AdvancedCSS)
此選項適用於那些精通CSS或不介意嘗試的人。
在這裡,您可以編寫所需的任何規則,就像在自己的文件中編寫CSS一樣。
例如:border-radius:5px;line-height:18px;box-shadow:2px2px2px3px#333;
聯絡表單範本套用
不懂CSS也可以輕鬆調整表單外觀
自訂義檔案上載功能
有一些特定的情況,需要客戶提供必須的文件,例如個人身份證明、駕駛執照、銀行帳戶資料或購物發票帳單記錄等等,可以把上載的檔案,備份到第三方的雲端檔案伺服器
DropboxGoogleDriveAmazonS3
溫馨提醒,如果不設定(外部的存放地方),會預設存在網站主機的(Upload)資料夾,和我們平常的圖片和影片其用相同位置和空間,這點要留意您的主機商提供存放上限。
支援什麼上傳格式?
外掛後台可以自行新增大部分格式到(白名單WhiteList),白名單就是允許使用者上傳的格式種類,這需要考慮一些資安問題,建議限制在常用的格式,例如.jpg.png.gif.dox.pdf等常見的圖片和文書軟體的格式。
了解更多檔案上載的操作
進階的【條件式】的表單和擴充
查詢對所有第三方支援的供應商名單
第三方金流系統串接API
NinjaForms表單外掛支援4種主流的金流系統串接,在國際市場上單單PayPal和Stripe已經覆蓋全球大部分的地區,不過無法滿足所有人的需求,尤其是一些【地方金流】,例如台灣的綠界、藍新、紅陽、歐付寶等等,可能需要找工程師客制化和調整相關的API參數,但整體上只要能走PayPal和Stripe的話,國際上的交易是沒有問題,下方是4個金流的操作介面說明,請選擇您合適的系統。
RecurlyElavonPayPalExpressStripe
查詢對所有第三方支援的供應商名單
電郵行銷整合工具串接API
ActiveCampaignEmailOctopusConvertKitCleverReachMailPoetAWeberCampaignMonitorConstantContactEmmaMailchimp
查詢對所有第三方支援的供應商名單
總結
由於市場上比較多教學網站推薦Contactform7和WPForms這類比較簡易的表單外掛,但其他還有存在很多良好的選擇,就像這次介紹的NinjaForms,除了提供免費版本之外,更可以因應自己的需求購買其他升級的選項和服務,是允許從免費開始使用,慢慢按需求調整的友善外掛,這提供了很大的自由度和擴充性。
值得一提是透過拖拉表格物件排版真的非常方便,也提供大量外觀的調整,那怕您真的不是太懂CSS,在後台的超詳盡設定已經能滿足您的需求。
如果您需要一些【條件式】的表單,就需要使用付費版以上的方案,這比較進階,沒有在這次新手教學裡著墨太多,始終不是大部分人的需要,還有NinjaForms整合大部分CRM、電郵行銷工具等等,這不單單是一套表單外掛,還能替您公司賺錢的工具。
我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
Leavethisfieldemptyifyou'rehuman:
學員人數:6,600+人(持續增加之中)
前往免費的學習社團
發表您的留言 取消回覆
Leavethisfieldemptyifyou'rehuman:需要什麼幫忙?
新手入門疑難排解
開始建立網站
美化網站設計排版
速度太慢?效能最佳化
SEO搜尋引擎最佳化
WordPress頁面編輯器
優惠資訊免費好康
防駭防毒資訊安全
熱門文章✦什麼是區塊編輯器
✦什麼是區塊小工具
✦推薦頁面編輯器
✦免費圖庫素材
✦什麼是網站權重?
✦HTML標題標籤語法H1至H6限時免費工具✦免費試用SEO工具
✦免費10張商業圖片
✦免費網站健康掃描
✦廉價Logo設計服務限時優惠Themeforest限時優惠Elementor限時優惠Bluehost限時優惠SiteGround限時優惠A2Hosting限時優惠Cloudways
NinjaForms外掛官方網站如何使用NinjaForms?擁有極高5星評分特色:支援大量第三方串接服務基礎通用表單功能個人資料訊息常用欄位(CommonFields)版型欄位(LayoutFields)其他功能欄位(Miscellaneous)拖拉表格物件排版簡易示範拖動物件不放,擺放到合適的位置拖動既有物件到新的位置不滿意舊的排版,移動到正確的位置輕鬆刪除物件元素隨意調整【欄位】的比例和寬度一次過移動(群組Group)的物件新增和調整外觀樣式(AddingStyles)基本CSS屬性(BasicCSSProperties)背景顏色(BackgroundColor)邊框寬度(BorderWidth)邊框顏色(BorderColor)文字顏色(TextColor)高度(Height)寬度(Width)高級CSS屬性(AdvancedCSSProperties)浮動元素(Float)字體大小(FontSize)邊界(Margin)邊距(Padding)進階CSS(AdvancedCSS)聯絡表單範本套用不懂CSS也可以輕鬆調整表單外觀自訂義檔案上載功能支援什麼上傳格式?進階的【條件式】的表單和擴充第三方金流系統串接API電郵行銷整合工具串接API總結
Closethismodule
加入我們的Facebook學習社團免費的教學資源、交流和解決問題!是否覺得孤軍作戰和學習很無趣味?何不加入學習社團和其他熱愛網站設計的朋友交流?分享您建站的喜與樂學習最新的知識和技術免費加入和領取資源請不要讓我再次看到這個信息,謝謝!收集Cookie用途和利益申報:我們網站上的有使用Cookie追蹤,通過記住您的偏好和重複訪問來為您提供最相關的體驗。
利益申報:我們和部分網站推薦的廠方是聯盟行銷關係,如果您通過我們的推薦連結購買服務,我們會從銷售中得到微量的贊助收益,這讓我們可以能繼續持續免費提供優質的WordPress教學內容,了解我們的FTC免責聲明,點擊“接受”即表示您同意使用所有Cookie。
Cookie設定接受Manageconsent
Close
隱私權概述(PrivacyOverview)
當您瀏覽網站時,本網站使用Cookie來改善您的體驗。
其中,根據需要分類的Cookie會存儲在您的瀏覽器中,因為它們對於網站基本功能的運行至關重要。
我們還使用第三方Cookie,以幫助我們分析和了解您如何使用本網站。
這些Cookie將僅在您同意的情況下存儲在瀏覽器中。
您還可以選擇退出這些Cookie。
但是,選擇其中的一些Cookie可能會影響您的瀏覽體驗。
Thiswebsiteusescookiestoimproveyourexperiencewhileyounavigatethroughthewebsite.Outofthese,thecookiesthatarecategorizedasnecessaryarestoredonyourbrowserastheyareessentialfortheworkingofbasicfunctionalitiesofthewebsite.Wealsousethird-partycookiesthathelpusanalyzeandunderstandhowyouusethiswebsite.Thesecookieswillbestoredinyourbrowseronlywithyourconsent.Youalsohavetheoptiontoopt-outofthesecookies.Butoptingoutofsomeofthesecookiesmayaffectyourbrowsingexperience.
必要(Necessary)
必要(Necessary)
AlwaysEnabled
必要的Cookie對於網站正常運行絕對是必不可少的。
此類別僅包含可確保網站的基本功能和安全功能的Cookie。
這些Cookie不存儲任何個人信息。
不必要的(Non-necessary)
不必要的(Non-necessary)
對於網站正常運行不是特別必要的任何Cookie,這些Cookie專門用於通過分析,廣告和其他嵌入式內容收集用戶的個人數據,被稱為不必要的Cookie。
在您的網站上運行這些Cookie之前,必須徵得用戶同意。
SAVE&ACCEPT
延伸文章資訊
- 1Ninja Forms 聯絡表單基礎應用簡介和評價 - 網站迷谷
由於市場上比較多教學網站推薦Contact form 7 和WPForms 這類比較簡易的表單外掛,但其他還有存在很多良好的選擇,就像這次介紹的Ninja Forms, ...
- 2【WordPress安全】千萬不要安裝來路不明的外掛!實際案例分享
最近有人詢我問一個來路不明的付費外掛Gravity Forms 能不能夠安裝,於是我看一下程式碼, ... 新手架站:【架站教學】專門為WordPress打造的主機?
- 3Gravity Forms | WordPress網站架設線上課程新手教學- 小訣學院
標籤:Gravity Forms. 【需求】想要前台一個表單讓人輸入資料,另一頁前台頁面可以馬上瀏覽 · (檢視全站文章清單)(不分類). 分類.
- 4gravity forms教學 - 軟體兄弟
Form 7或Gravity Forms」、用拖拉來改變文章順序可以用「Post Types Order」。 , wordpress gravity forms插件可以帮您实现表单功能,当你需要...
- 5【需求】想要前台一個表單讓人輸入資料,另一頁前台頁面可以 ...
Gravity Forms (製作A頁); GravityView (製作B頁) ... 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。 如果您需要問我相關的話,可以 ...