做網站一定少不了的表單功能,無論是企業形象網站的「聯絡我們」,或是尚未串接金物流網站的「訂購表單」,都是消費者與企業溝通很實用的功能,本文要介紹的是表單外掛是「Form Maker」,可以讓我們很直覺的設定表單內容,也有很多預設的樣式可以套用哦!話不多說就讓我們一起看教學吧!
每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。
一.基本介紹
該外掛其實已經貼心的為我們準備了五種範例
填空式客戶資料:
Contact Us
Client List Form
Feedback Form
問券式調查:
Business Demographic Survey
訂購式表單:
Cupcake Order Form
大家可以從範例裡面去做修改,也可以從頭建立一個新表單,點擊上方的「Add New」:
再來會看到這個畫面,首先Form Title就是表單名稱由大家自訂
另外可以看到三個紅框分別是:
先向大家介紹基本工具,並且接下來將用這些工具來建立一個「聯絡我們」的表單
二.實際操作
實作具有姓名、連絡電話、性別、分店、諮詢內容、其他問題的聯絡表單:
需要使用到以下工具: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=記得啟用這個選項,表單送來時內容才會跟設定的文字一樣
如果有很多分店,「+Option」按鈕按下去就對了
4.諮詢內容(Multiple Choice)
跟Single Choice一樣,差在可以設定多選項複選而已
5.其他問題(Paragraph Text)
6.送出按鈕(Submit)
Display Reset=可以決定要不要啟用重置按鈕
當工具都新增完以後應該會看到這樣的畫面,再點擊右上方的「Push」,表單就快建立完成囉!
三.電子郵件
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其實還可以做很多的進階設定,就留在下一篇文章再跟大家介紹囉!

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