【WordPress 必學外掛】WPForms ,輕鬆打造客製化的聯絡表單及重點彙整

文章更新日期 2021-11-13

表單【Forms】是客戶端和管理者進行資訊溝通的第一個門面,藉由表單讓使用者進行資料填寫或選取的功能,並將所填寫的資料送到伺服器端,告知管理者來進行必要的處理。既然是門面,一個長期經營的網站擁有表單是基本條件外,還必須花心思在設計表單的外觀上,以求整齊美觀

網站管理者擁有好的表單,才能長期與讀者互動…

表單與表格的差異

表格是屬於整理數據的手段,透過表格可以立即知道想要的結果,不需參透許多複雜的文字訊息,因此應用功能在【資料統整】。表單是屬於資訊溝通,任何網路上的訪客都可以藉由表單填寫、發表、選取,來增進與管理者之間的橋樑,因此應用功能在【資訊交流】

☞ 延伸閱讀:做出簡單又齊全的表格設計

WPForms 外掛安裝與介紹

Step1.WPForms 外掛安裝

WPForms 安裝方式一樣可以選擇網站後台搜尋下載安裝,也可以利用 FTP方式上傳安裝,最後啟動外掛即可

Step2.WPForms 外掛介紹

  • Drag & Drop Form Builder:以區塊拖曳式製作表單,無需懂任何編碼
  • Form Templates:預設模板提供選擇,可節省許多時間
  • Responsive Mobile Friendly:100%支持響應式裝置,如手機、平板
  • Smart Conditional Logic:輕鬆製作多功能表單
  • Instant Notifications:表單可即時通知潛在客戶
  • Entry Management:查看所有潛在客戶,簡化工作流程
  • Payments Made Easy:表單可輕鬆付款、捐款及線上訂單
  • Marketing & Subscriptions:可製作訂閱表單,結合電郵行銷
  • Easy to Embed:輕鬆將表單嵌入文章、頁面、側邊欄、頁尾
  • Spam Protection:擁有驗證碼功能,防堵垃圾郵件提交

上述這些只是其中 WPForms 部份功能,購買付費版將會獲得完整功能

WPForms 表單製作方式

Step1.製作第一個表單

Step2.點擊簡單聯繫表格

Step3.輸入表單名稱

Step4.點選藍色想要的區塊功能,新增表單項目

依據個人需求,選擇藍色功能區塊,將會新增在右邊預設表單內

Step5.表單區塊刪除

利用滑鼠移動到區塊最右邊,此時會顯示垃圾桶,點擊垃圾桶即可將區塊刪除

製作介面相當直覺而且操作非常簡單, 也可以透過拖曳式輕鬆地排列區塊的順序

WPForms 表單文字編輯

將滑鼠移動到區塊的左邊,點擊進行區塊文字編輯及欄位修改,如果欄位是必填,Required 需打勾

WPForms 表單嵌入語法

Step1.點選表單存檔 Save

Step2.點選表單代碼 EMBED

Step3.複製表單代碼

Step4.新增頁面

Step5.將代碼貼在頁面文章裡

Step6.網站顯示效果

表單代碼貼上的方式,跟製作表格代碼一樣,完成後存檔發佈

WPForms 設定表單通知【重要】

Step1.設定通知選項

Send To Email Address、From Email 預設選項為 admin_email,admin_email 就是管理者電子信箱,建議設定跟一般電子郵件地址相同,設定相同收發信會非常容易,而且郵件地址一定要使用 Gmail

查看一般設定是否 Gmail

筆者測試了 Yahoo、Google、Hotmail,得到的結果建議設定為 Gmail

WPForms 與 Contact form 7 的差異

此為 Contact form 7 表單設計視窗,採用簡單的編碼方式,可利用點擊功能選擇按鈕,來增加表單功能,不過要懂一點語言概念,才比較容易修改設計

WPFormsContact Form 7
優點1.表單功能強大
2.直覺式的設計
3.郵件設定簡單
1.外掛完全免費
2.中文操作介面
缺點1.完整功能要付費
2.英文版操作介面
1.功能小輸 WPForms
2.郵件功能需另外安裝外掛
寄送郵件電子郵件一定要 Gmail電子郵件一定要 Gmail

結論

表單使用需求,在於管理者是否願意長期與讀者資訊化的交流。以目前表單外掛來看,最有名的就是 WPForms 與 Contact Form 7。WPForms 操作方式比較直覺,Contact form 7 則是簡單式程式碼製作,基本功能上算是兩者都很完善,如果以免費版來說,都是不錯的選擇

但是收發信的部份 Contact Form 7 比較困難,必須透過 WP Mail SMTP 外掛來協助,將 SMTP 伺服器設定好才能順利的發送信,相較之下 WPForms 就簡單的多了,只要將一般設定電子郵件地址弄好,即可順利的發送郵件,這點比起 Contact form 7 人性化多了。最後感謝網易資訊測試主機,讓筆者可以順利測試成功外,寫出這篇教學分享給大家

Previous Post

【WordPress 外掛技巧】只要滑鼠,輕鬆調整文章順序與分類排序

Next Post

【Contact Form 7 免費表單】,教你解決信箱設定問題

12 comments

  1. Joseph表示:

    實用分享?,終於有另一款表單外掛的選擇了

  2. 民樂電腦表示:

    不客氣唷,能幫助到你,我真的很開心

  3. Ruby Mama表示:

    很詳細的教學,下次寫文章可以試試這款表單!

  4. 民樂電腦表示:

    感謝你的肯定,希望有幫助到你

  5. Buzz表示:

    很有用的教學~
    改天來試試看!

  6. 民樂電腦表示:

    感謝肯定,能幫助到你,是我的榮幸

  7. 謝謝分享,當初也是猶豫了很久呢!

  8. 民樂電腦表示:

    不客氣唷,現在應該不用猶豫了

  9. Roy表示:

    感謝版主提供的資訊,對於新手來說真的是非常受用無窮!!

  10. 民樂電腦表示:

    不客氣,能幫助到新手,是我的榮幸

Scroll to top