WordPress表單外掛推薦!Form Maker超詳細教學!

工作區域 2

做網站一定少不了的表單功能,無論是企業形象網站的「聯絡我們」,或是尚未串接金物流網站的「訂購表單」,都是消費者與企業溝通很實用的功能,本文要介紹的是表單外掛是「Form Maker」,可以讓我們很直覺的設定表單內容,也有很多預設的樣式可以套用哦!話不多說就讓我們一起看教學吧!

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

一.基本介紹

安裝-輸入form maker

該外掛其實已經貼心的為我們準備了五種範例
填空式客戶資料:
Contact Us
Client List Form
Feedback Form

問券式調查:
Business Demographic Survey

訂購式表單:
Cupcake Order Form

大家可以從範例裡面去做修改,也可以從頭建立一個新表單,點擊上方的「Add New」:

再來會看到這個畫面,首先Form Title就是表單名稱由大家自訂

另外可以看到三個紅框分別是:

Add Field:新增工具

Add Column:新增欄位

Add Page:新增分頁

工具介紹-點擊Add field

先向大家介紹基本工具,並且接下來將用這些工具來建立一個「聯絡我們」的表單

Single Line Text單行文字

可用來輸入姓名、電話、信箱等資料

Paragraph Text多行文字

可用來放置其他問題、備註之類的消費者問題

Number數字

就是單純增加數字

Date日期

就是單純選擇日期

Select下拉式清單(單選)

可用來放入選項讓消費者選擇,比如分店、諮詢內容

Single Choice選擇(單選)

可用來放入選項讓消費者選擇,比如性別、數量

Multiple Choice選擇(複選)

可用來放入選項讓消費者選擇,比如興趣、諮詢內容

Submit送出按鈕

就是提交表單,也可以有重新填寫功能

Simple Captcha簡易驗證

簡單的驗證功能,防止機器人亂填

二.實際操作

實作具有姓名、連絡電話、性別、分店、諮詢內容、其他問題的聯絡表單:
需要使用到以下工具:Single Line Text*2、Single Choice、Select、Multiple Choice、Paragraph Text、Submit

1.姓名&連絡電話(Single Line Text)

Label position=決定Label與輸入欄是上下還是左右排列
Hide label=決定要不要隱藏Label
Required=決定欄位是不是必填

2.性別(Single Choice)

Relative Position=決定選項是上下還是左右排列
Option Label Position=決定選項圈圈排左邊還右邊
Enable option’s value=記得啟用這個選項,表單送來時內容才會跟設定的文字一樣

3.分店(Select)

如果有很多分店,「+Option」按鈕按下去就對了

4.諮詢內容(Multiple Choice)

跟Single Choice一樣,差在可以設定多選項複選而已

5.其他問題(Paragraph Text)

就照著圖片填吧,沒什麼好解釋的XD

6.送出按鈕(Submit)

Display Reset=可以決定要不要啟用重置按鈕

當工具都新增完以後應該會看到這樣的畫面,再點擊右上方的「Push」,表單就快建立完成囉!

三.電子郵件

當我們點了Push之後,上方就會多出三個選項,那我們先點選「Email Options」

Email to send submissions to表單送出至:訪客提交表單後會寄到哪一個信箱,預設是「adminemail」也就是管理員信箱,當然也可以在後面加上「,」新增其他收件信箱

Email From寄件者是誰:建議跟網域名相同,比如光先生網域是kuangyaodm.org那信箱就建議是service@kuangyaodm.org,不一定要真的有該信箱,除非你要收信。

From Name寄件者姓名:承上例,姓名為光先生

Subject信件主旨:預設為formtitle,以本教學為例寄來的信主旨就會是「Form Maker表單教學」,也可以改掉自訂主旨
其他沒有特別需求都維持預設即可

四.表單樣式

先從簡單的預設開始,在上方選單選擇「Appearance」,紅框處點開總共有14種樣式可以任選,千萬不要點「Edit Theme」,那是自訂樣式的意思,需要對英文與設計有更高深的理解才可以去自訂的XD

再來底下有四種表單的類型,讓我們一一的做介紹

Embedded(嵌入式)-貼短碼

複製底下的那串短碼,到你要放置表單的頁面,以Elementor編輯器為例

Popup(彈出式)-選頁面

Animation Effect動畫效果:太多種了大家自己選
Loading Delay加載延遲:進入網頁多久以後才出現,單位秒
Frequency頻率:訪客看到表單的頻率,單位天。舉例:1天1次、5天1次,設置為0則始終顯示
Always show for administrator始終顯示給管理員:經過實測,其實就算選NO還是看得到
Display on顯示在:看你想放置表單的頁面在哪裡,建議勾選Page即可
Display on these categories’ posts顯示這些分類的文章:建議都不勾,除非你想把表單丟在文章裡
Display on these pages顯示在哪一頁面:點擊輸入框便會列出所有頁面,也可以直接輸入頁面名稱搜尋
Hide on Mobile在手機隱藏:大家在自行設定,可勾可不勾

Topbar(頂欄)-與彈出式設定一樣故只秀完成圖

Scrollbox(滾動框)-與彈出式設定一樣故只秀完成圖

五.查看表單

除了送出表單後會有信件通知以外,我們也可以在後台直接查看表單,左邊Form Maker選單點擊Submissions,再選擇要查看的表單即可

以上就是我們的Form Maker的表單教學,光先生自認寫得還算詳細,希望大家也可以自己設計一個自己的聯絡表單哦!而Form Maker其實還可以做很多的進階設定,就留在下一篇文章再跟大家介紹囉!

如果喜歡的話請幫我們到「光先生」粉絲團按讚分享,或訂閱我們的Youtube頻道,我們每周一、三會更新部落格文章,每周五發布影片哦!

「以不一樣的思維進行廣告行銷,進而認同品牌價值」,
立志讓更多人知道原來廣告行銷也可以這麼好玩!!

每日學,文章推廣

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

發佈留言