選單

Zoho Forms 免費製作線上表單,利用拖曳快速設定各種欄位規則

Zoho Forms 免費製作線上表單,利用拖曳方式快速設定各種欄位規則

相信許多網站站長都有建立線上表單的需求,雖然 WordPress 已有不少外掛能做到(免費的例如 Contact Form 7,付費的有 Gravity Forms 或 Ninja Forms),但我還是傾向倚賴第三方服務而不將資料寫入網站資料庫裡,原因很簡單,除了減少不必要的風險外,其實也盡量減少外掛數量、降低網站負載,以往我都是選擇 Google 表單,最近則使用台灣的 SurveyCake 和另一個我也推薦的 Typeform

本文要介紹一款最近找到的「Zoho Forms」免費線上表單服務,Zoho 大家應該不陌生,這家公司主要以提供各種辦公室應用為主。Zoho Forms 讓使用者快速建立各種網頁表單,利用拖曳方式設定欄位,加入各種規則或填答方式,整體來說跟 Google Forms 差不多,但彈性更大,也能做更多不同類型的運用。此外,Zoho Forms 也支援在行動裝置顯示。

舉例來說,如果你跟我一樣想在網站裡加上一個「聯絡我們」網頁,除了能在頁面中加入電子郵件、Facebook、LINE 等聯絡方式外,更好的作法是設定好表單,讓使用者能在填入欄位後自動把訊息發送到你的 Email ,提高使用者的使用意願,當然便利性也有所提升。

Zoho Forms

Zoho Forms 免費版有一些限制,包括只能建立最多三份表單、每月 500 個提交數以及上傳檔案空間 200 MB,假如你想要使用 Zoho Forms 來做問卷調查的話,這可能會不太夠用,那麼可以考慮付費升級到不同方案,付費方案價格介於 $10 美金至 $100 美金之間,可提交的數量則會擴充至 10,000 到 150,000 不等,同時也能使用更大空間、串接支付平台等相關功能。

不過對一般網站來說,Zoho Forms 免費方案提供的配額其實已經相當足夠,當你建立完表單後,可以使用 iframe、JavaScript、HTML 或 QR Code 將它內嵌到網站部落格。

網站名稱:Zoho Forms
網站鏈結:https://www.zoho.com/forms/

使用教學

STEP 1

開啟 Zoho Forms 官方網站後,直接從右上角輸入公司名稱、Email 和密碼免費註冊,或者可以直接使用 Google、LinkedIn 帳戶登入建立帳號。

Zoho Forms

STEP 2

登入後建立一個全新表單,可以選擇一個空白表單(Blank Form)或從表單模版新增,假如你要建立的表單不複雜或者你想要有完全的彈性,建議使用空白表單即可。重要的是要設定一個表單名稱、描述可填可不填,點擊「Create」就能進入下一步。

Zoho Forms

STEP 3

點擊上方選單的「Builder」開啟表單建立工具。

Zoho Forms 雖然沒有提供中文介面,但操作方式還蠻直覺的,使用方法就跟其他線上表單產生器差不多,將你要使用的欄位從左拖曳到中間,設定每個欄位的名稱、描述、欄位大小、是否必填等等選項。

可以注意到 Zoho Forms 已經預先提供幾個常用欄位,例如姓名、電話、電子郵件、網站網址等等,直接取用會更節省時間,就不用自己從頭設定每個欄位。

Zoho Forms

比較特別的是可針對 Zoho Forms 加入規則條件,從上方選單的「Rules」開啟這功能,對於要設計複雜或互動式表單來說特別好用。

Zoho Forms

STEP 4

大部分使用者比較關心的是 Zoho Forms 能不能自訂樣式顏色呢?答案是可以的,從上方選單切換到「Themes」後就能選擇預先提供的表單配色,也能使用「Create Theme」來建立屬於你自己的佈景主題配色,讓表單與你的網頁顏色更有一致性。

Zoho Forms

STEP 5

在「Settings」裡有許多的設定細項,其中我認為最重要的是先把 Submit Text 送出按鈕顯示的文字修改為中文,例如:送出,時區部分記得要設定成「Asia/Taipei」(如果你在台灣的話),以免在收到表單內容時時間顯示上出現問題。

Zoho Forms

我希望有人填寫表單後直接以 Email 寄回指定信箱,這部份能從「Email & Notifications」進行設定,在「To」填入要收件的電子郵件地址,主旨和內文就能帶入相關參數,這麼一來當有人填寫表單時,你就能從電子郵件收到內容。我認為這一個功能還蠻方便,尤其有新的訊息進來時不用再回到 Zoho Forms 查看。

Zoho Forms

另外,也別忘記設定好成功送出訊息後的感謝頁面,預設是英文訊息,建議可改成中文。

Zoho Forms

STEP 6

最後,點選上方選單的「Share」後再從左側「Embed Options」找到各種不同的嵌入網站部落格方式,我比較推薦使用 JavaScript 程式碼來載入表單,假如你有其他需求,也能選擇使用其他的嵌入方式,包括 iframe、JavaScript、HTML 按鈕、鏈結、跳出視窗及 QR Code 。

Zoho Forms

下圖就是我將 Zoho Forms 製作出來的線上表單內嵌至網站的範例,雖然只是擷圖,不過可以看出對於中文顯示沒有任何問題,如果你有設定郵件通知的話也確實能夠收到訊息。唯獨下方會出現一個「Powered by Zoho」的 Logo,但不影響使用,如果想移除顯示 Logo 可以考慮付費升級。

Zoho Forms

分享本文