Elementor Pro 教學:如何製作+設計客製化表單(多種類型)?

Elementor Pro 教學:如何製作+設計客製化表單(多種類型)?

這篇文章會分享使用 Elementor Pro 的「 Form 表單 」功能,協助你客製化設計多種表單類型。

可以製作像是聯絡表單、電子報訂閱表單、會員註冊表單、作品提交表單等 ..,幫你一次解決表單上的煩惱。

順利掌握這個功能,就不用再額外安裝其他表單外掛(除非還是無法滿足你,再考慮安裝即可),這樣也能讓網站輕量一點。

好囉,來看一下這篇的大綱。


1. 安裝+啟用 Elementor Pro 功能

這篇文章提到的「 Form 表單 」功能,屬於 Elementor Pro 進階版功能之一,如果你是用 Elementor 免費版 的,需進行升級才有辦法使用。更多 Elementor Pro 購買+詳細教學

當順利購買完成+激活 Elementor Pro 憑證,就會看到專業版功能已經開啟,這時就擁有更強大的網站客製化能力啦!

Elementor Pro 專業版功能開啟
Elementor Pro 專業版功能開啟

2. 製作聯絡 / 問卷表單

這章節,來示範使用 Elementor Pro 製作很常見的「 聯絡表單 」或是「 問卷表單 」,協助你搜集訪客訊息。

首先,選擇「 表單 Form 」元素,並拖曳到頁面裡面,就會顯示預設的版型了。

Elementor Pro 客製化表單:套用表單功能
Elementor Pro 客製化表單:套用表單功能

接下來,我分成簡單幾個步驟,帶大家熟悉 Elementor 的表單功能。

Step1:表單欄位設計

首先,可幫表單取個名字,方便未來做辨認。

點「 新增項目 」就會出現欄位,然後在「 類型 」挑選自己需要的格式,最後在右側的視覺編輯區,就會出現囉!

Elementor Pro 客製化表單:表單欄位設計
Elementor Pro 客製化表單:表單欄位設計

有關於「 類型 」的欄位,有非常多種格式可使用(下圖),只要依照自己的需求選擇,就可以設計出各種類型的表單囉!

Elementor Pro 客製化表單:多種格式選項
多種格式選項

再來,可以切換到「 進階 」分頁,這裡的「 ID 」和「 短碼 」是連動的(下圖)。

「 ID 」的功用,是當訪客提交表單後,網站會發送信件給站長,而系統會針對「 ID 」進行欄位辨認,並把訪客在各欄位輸入的內容,分別寫到信件中提交給站長。

所以有關「 ID 」的命名,請記得在當前表單中,不能跟其他欄位的 ID 有重複(否則系統會不知道抓哪一個顯示到信件中)。

Elementor Pro 客製化表單:設定欄位 ID
Elementor Pro 客製化表單:設定欄位 ID

再來,可以新增其他欄位,像是電話、電子郵件、詳細需求等 ..,就依照自己的需求調整啦。

Step2:提交後的動作

當表格欄位、按鈕樣式都調整完成,就可以設定表單「 提交後的動作 」囉。

這功能簡單理解,就是當訪客提交表單後,你希望 Elementor 能幫你做哪些動作處理(下面挑選部分說明)。

Elementor Pro 客製化表單:提交後的動作
提交後的動作
  • Collect Submissions(收集提交):Elementor 會幫你把表單提交後的資料,存放在 Elementor > Submissions 裡面,方便你做查詢。
  • 電子郵件:訪客提交表單後,WordPress 會寄送表單內的訊息,到你的指定信箱。
  • MailChimp:這裡提交的資料,部分會傳到 MailChimp 裡面,協助你整合電子報名單。
  • 彈出式視窗:訪客提交表單後,會跳出指定的彈出式視窗。

這裡我先選擇「 Collect Submissions 」、「 電子郵件 」這兩個動作。

Step3:電子郵件設定

到電子郵件的選項卡,可設定收件人信箱、標題、訊息等 ..,收件人信箱可任意指定(預設是 WordPress 管理員信箱)。

至於「 訊息 」的欄位,預設值是 Elementor 提供的短代碼 [all-fields],這短代碼作用會抓取表單的所有欄位,並放進要寄送的信件內容中。

Elementor Pro 客製化表單:設定寄件相關訊息
設定寄件相關訊息

至於其他的欄位,大多是顯示文字的差別而已,這裡就不多提起。

Step4:其他選項設定

如果想修改提交表單後的顯示文字,可以把「 自訂訊息 」打開,裡面可以做相關調整,或維持預設值也行。

Elementor Pro 客製化表單:其他選項設定
其他選項設定

Step5:表單樣式調整

點選「 樣式 」可調整表單的間距、顏色、按鈕、訊息文字等 .. 相關的樣式調整,就調為自己喜愛的樣子吧!

Elementor Pro 客製化表單:設計表單樣式
Elementor Pro 客製化表單:設計表單樣式

Step6:測試表單

最後來看一下表單成品、表單留言內容,還有儲存在 Elementor 的 Submissions 功能的表單資料。

首先,是設計完成的表單。恩~感覺還不錯!

Elementor Pro 客製化表單:聯絡表單設計完成
聯絡表單設計完成

再來,檢查一下剛設定的信箱,會發現有多了一封表單留言的信件囉。

Elementor Pro 客製化表單:收取表單信件
Elementor Pro 客製化表單:收取表單信件

最後是 Elementor 的相關功能,我們前往 Elementor > Submissions(提交),會看到多了一筆表單內容的資料囉。

Elementor Pro 客製化表單:Elementor 的 Submissions 功能
Elementor 的 Submissions 功能

好囉,以上就是使用 Elementor Pro,製作聯絡 / 問卷表單的小教學:)


3. 製作電子報訂閱表單

這章節,跟大家分享如何使用 Elementor Pro,製作電子報訂閱表單。

因為電子報訂閱表單的製作,跟上一章流程大致上是一樣的,只是新增的欄位不同而已,所以這章節會分享不同的。

也就是,教大家如何把訂閱表單,和 MailChimp 這款知名的電子報行銷軟體,進行串接。更多 MailChimp 電子報教學

這樣當訪客提交表單後,相關資料就會傳到 MailChimp 建檔,方便站長做 Email 的統一管理。

備註:Elementor 也有跟其他的電子報行銷軟體整合,像是 MailerLite、ConvertKit、Drip 等 ..(依照自己狀況選擇即可),串接流程都大同小異,也能參考這章節的示範。

Step1:新增表單欄位

首先,一樣新增「 Forms 表單 」功能,這次分別新增姓名 & 電子信箱。

Elementor Pro 客製化表單:新增訂閱電子報
新增訂閱電子報

Step2:提交後的動作

在「 提交後的動作 」選項,這次額外新增 MailChimp 的標籤,會看到多了一個 MailChimp 選項卡。

Elementor Pro 客製化表單:設定提交後的動作
設定提交後的動作

Step3:MailChimp 選項卡設定

切換到「 MailChimp 」選項卡,API 密鑰選擇 Custom,然後輸入自己的 MailChimp API。有關 MailChimp API 位置,可參考 這篇說明

MailChimp API 正確輸入後,Elementor 會自動抓取你的 MailChimp 帳戶,就能進行指派。

有關「 欄位對應 」的 Email & 姓名,分別選擇自己表單的欄位,就能進行綁定(下圖)。

Elementor Pro 客製化表單:設定 Elementor & MailChimp 串接,相關資料
設定 Elementor & MailChimp 串接,相關資料

Step4:表單測試&確認 MailChimp 訂閱者列表

當表單製作完成後,我們輸入另一個信箱測試一下,看是否能順利訂閱成功。

Elementor Pro 客製化表單:電子報訂閱表單測試
電子報訂閱表單測試

順利的話,在信箱應該會收到相關通知信,還有 Elementor > Submissions 也會有資料。

最後前往+登入 MailChimp,前往 Audience > All contacts,就會發現新的 Email 資料,也被整合進來囉。更多 MailChimp 電子報教學

Elementor Pro 客製化表單:信箱整合到 MailChimp 成功!
信箱整合到 MailChimp 成功!

好囉,以上就是使用 Elementor 製作電子報表單的教學:)


4. 製作會員登入表單(搭配 Ultimate Addons for Elementor)

Astra 是一款輕量快速的多功能主題,可架設多種類型網站,像是 Blog 建立公司網站設計架設購物網站 等 ..,並完美的支援 Elementor。

而這章節提到的 Ultimate Addons for Elementor,是屬於 Astra Pro 進階版 的功能之一,提供多達 40 多種 Elementor 元素、100+ 個網站模板、200+ 個區塊模板,讓網站客製化能力變的更強。

Ultimate Addons for Elementor 教學:多種擴充功能
Ultimate Addons for Elementor 教學:多種擴充功能

Ultimate Addons for Elementor 的 Login Form(登入表單)、User Registration Form(註冊表單),可用來製作會員登入 & 註冊表單。

這章節,我會使用 Login Form(登入表單)進行示範,至於註冊表單的操作流程也差不多,同樣都能參考。

Step1:套用登入表單

首先,選擇 Login Form 登入表單,並拖曳到編輯區裡面。

Ultimate Addons for Elementor 教學:使用會員登入表單
Ultimate Addons for Elementor 教學:使用會員登入表單

Step2:設定表單欄位

Field Label 選擇 Custom(客製化),然後更改一下欄位標題等 ..。

Ultimate Addons for Elementor 教學:設定表單選項
Ultimate Addons for Elementor 教學:設定表單選項

Step3:設定社群登入(註冊)

Ultimate Addons for Elementor 有提供 Google、FB 社群註冊+登入功能,可依自己需求選取。

這裡先示範 Facebook 社群登入功能,如果不知該如何做,也能參考 Astra 的 這篇教學

Send Email(寄送信件)可選 User(給註冊會員),就是當訪客註冊為會員後,會收到 WordPress 寄送的歡迎+資料信件。

Ultimate Addons for Elementor 教學:開啟社群登入註冊功能
開啟社群登入註冊功能
  • Send Email 寄送信件:有提供 4 個模式,分別是 No(都不寄送)、Admin(寄給管理員)、User(寄給會員)、Admin & User(管理員&會員都寄)。

Step4:設定 Separator 分割線 & Button 按鈕

可以開啟分割線功能,也可幫按鈕取個名字&修改樣式。

Ultimate Addons for Elementor 教學:設定分隔線&按鈕
Ultimate Addons for Elementor 教學:設定分隔線&按鈕

Step5:設定 Additional Options 其他選項

可設定會員登入&登出後,是否跳轉到指定頁面。還有相關註冊、忘記密碼的設定調整。

Ultimate Addons for Elementor 教學:額外設定
Ultimate Addons for Elementor 教學:額外設定
  • Redirect After Login:會員登入後的跳轉頁面。
  • Redirect After Logout:會員登出後的跳轉頁面。

Step6:表單樣式設定

接著,就是來設計表單樣式囉!

點選 Elementor 的樣式(或進階),這邊能修改間距、表單欄位、社群登入、網站按鈕等 ..,就依照自己的喜愛調整即可。

Ultimate Addons for Elementor 教學:設定表單樣式
設定表單樣式

如此一來,登入表單就完成囉!如果想瞭解更多,也能參考 官方介紹

Ultimate Addons for Elementor 教學:登入表單設計成功!
登入表單設計成功!

5. 製作會員註冊表單(搭配 Essential Addons Elementor)

Essential Addons Elementor 是 Elementor 生態圈強大的合作夥伴之一,算是非常知名的 Elementor 擴充外掛。

它提供了非常多可用的元素功能,補足 Elementor 免費版可用元素較少的缺陷,所以如果你預算有限,也能搭配這款外掛架站。

Essential Addons For Elementor 多種可用元素(僅部分截圖)
Essential Addons For Elementor 多種可用元素(僅部分截圖)

因為會員登入&註冊表單的設計,流程其實差不多,下面我就用 註冊表單 示範(登入表單也是差不多流程),那就開始吧!

Step1:套用註冊表單&一般設定(General)

首先,搜尋 Register Form(註冊表單),會看到元素右上角有一個 EA 的標誌,把功能拖曳到視覺編輯器裡面。

Essential Addons For Elementor 的會員註冊&登入表單
Essential Addons For Elementor 的會員註冊&登入表單

表單類型選擇 Registration(如果是登入表單就選 Login),編輯區就會自動切換成註冊表單。

Hide all Forms from Logged-in Users,這是如果處於已登入狀態,註冊表單會自動隱藏,不讓訪客看到。

切換為 Registration 註冊表單
切換為 Registration 註冊表單

Show Login Link 可看是否要顯示「 登入 」按鈕,如果有開啟可取個名字(下圖)。

Login Link Action 是點了登入連結,系統會做的動作,下圖是選 Show Login Form 會自動跳轉到會員登入頁面。

註冊表單相關設定
註冊表單相關設定

上圖 Enable Google reCAPTCHA 是 Google 的資安驗證功能,可防範駭客用機器人註冊(依自己需求開啟,但需到 Google 申請憑證)。可參考 這篇文章,有完整設定流程。

Step2:註冊表單欄位設定(Register Form Fields)

接下來,就是來設定表單欄位啦!

點「 新增項目 」就可新增欄位,然後可設定欄位種類、是否顯示必填、欄位寬度等 ..,就依自己需求選取。

Show Required Mark 可顯示必填標誌。

Elementor 註冊表單相關設定
Elementor 註冊表單相關設定

Step3:表格註冊後的行動(Register Form Options)

Register Actions 是表單送出後的行動,這裡我把 3 個類型都選起來,分別是 Redirect(導向)、Auto Login(自動登入)、Notify User By Email(通過電子郵件通知客戶),下面有詳細介紹。

New User Role 建議選擇「 Subscriber 訂閱者 」,這是權限最低的等級,不用怕會影響到網站資安性,訂閱者只能修改自己個人資料。更多角色權限詳解,可參考 WordPress 教學 相關章節。

表單送出後的行動
表單送出後的行動
  • Redirect 導向:會員註冊後,會自動導向到指定網址(需填寫網址),可依照自己需求設定。
  • Auto Login(自動登入):會員註冊後,會直接處於登入狀態。
  • Notify User By Email(通過電子郵件通知客戶):會員註冊後,WordPress 會寄送通知信給會員。

備註:以上的設定,可依照自己需求調整,這裡因為教學示範,所以功能都有選進去。

Step4:註冊成功後,會員收到的歡迎信件(Register User Email Options)

預設的註冊成功信件,裡面都是英文,我們可做個調整。

首先,在 Email Template Type(模板類型) 選擇 Custom(客製化),可更改信件標題,還有信件內容。

模板預設裡面會有短代碼,像是 [username][password] 等 ..,這是系統的動態文字,傳到會員那邊會自動改成它們填寫的資料。

註冊成功後,會員收到的歡迎信件
註冊成功後,會員收到的歡迎信件

Step5:註冊成功後,管理員信箱會收到信件。

一樣可改為 Custom 自訂信件模板,更改信件標題&信件內容。

Essential Addons for Elementor 教學:註冊成功後,管理員信箱會收到信件
註冊成功後,管理員信箱會收到信件

有關 Essential Addons for Elementor 提供的短代碼形式,有下面這幾個(僅列舉部分,依官方提供的為主)。

Essential Addons for Elementor 教學:多種短代碼類型
Essential Addons for Elementor 教學:多種短代碼類型
  • [username]:使用者帳號
  • [email]:電子郵件
  • [firstname]:姓名
  • [lastname]:同上(兩者可二選一使用)
  • [website]:網站路徑
  • [loginurl]:會員登入表單的路徑
  • [sitetitle]:網站標題

Step6:Terms & Conditions (會員服務&條款)

可開啟同意會員服務&條款欄位,並設定相關文字&網址路徑。

Essential Addons for Elementor 教學:確認會員服務&條款
Essential Addons for Elementor 教學:確認會員服務&條款

Step7:Validation Messages(驗證訊息)

Essential Addons for Elementor 在不同欄位,有完整的驗證功能,我們只需把預設英文字改為中文即可。

Essential Addons for Elementor 教學:驗證訊息
Essential Addons for Elementor 教學:驗證訊息

Step8:設計表單樣式

最後就是設計表單樣式囉,Essential Addons for Elementor 有很多可調整的選項。

像是整體背景、表格樣式、登入 / 註冊按鈕等 ..,都可依照自己需求調整。

Essential Addons for Elementor 教學:設計表單樣式
Essential Addons for Elementor 教學:設計表單樣式

如此一來,註冊表單就完成囉!我們也能參考一下 官方表單設計 感覺,打造自己的註冊表單!

Essential Addons for Elementor 教學:官方設計的註冊表單參考
官方設計的註冊表單參考

6. 製作檔案提交表單

如果打算讓訪客上傳檔案,像是圖片檔之類的,Elementor 也有提供這樣的欄位。

因為表單製作流程,跟前幾個章節的流程差不多,這邊就只挑重點功能介紹。

首先,一樣新增「 Forms 表單 」功能,這次比較不同的地方,是欄位類型可選擇「 檔案上傳 」。

Elementor Pro 教學:選擇檔案上傳類型
Elementor Pro 教學:選擇檔案上傳類型

如此一來,就能製作類似上傳檔案的功能囉。


常見問題

Elementor Pro 可以製作什麼類型的表單?

可以製作像是聯絡表單、電子報訂閱表單、會員註冊表單、作品提交表單等 ..,幫你一次解決表單上的煩惱。

Elementor Pro 還有提供其他功能嗎?

Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。

完整的 Elementor Pro 教學文

想使用 Elementor 製作會員登入&註冊表單,要如何做?

可以試看看 Elementor 生態圈的擴充外掛,像是 Ultimate Addons for ElementorUltimate Addons for Elementor 等 ..,都有提供會員登入 & 註冊表單功能。

Elementor 跟我使用的主題有辦法兼容嗎?

Elementor 跟絕大多數主題都保持良好的相容度,因為 Elementor 在 WordPress 領域是非常知名的頁面編輯器,所以通常不用擔心此問題。

但如果你的主題有內建自己的頁面編輯器了,那會建議使用內建的即可,因為通常整合度會比較高。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端