Elementor 表格教學
WordPress 外掛 Elementor 表單
本 Elementor 表單教學會講如何通過 Elementor Pro WordPress 外掛去創建聯繫表單 (contact forms)。
Elementor 是一個功能強大的 WordPress 網站視覺編輯器 (外掛)。
Elementor Pro (付費版) 外掛中提供一個可創建表單 (Elementor Form) 的 widget (部件)。
在本 Elementor 表單教學文章中，我們會用一個例子，並使用 Elementor Form 部件去創建一張可實際使用的表單 (form)。
安裝 Elementor 和 Elementor Pro
你必須下載並安裝 2個 WP 外掛 (plugins)：
- Elementor：免費版 WordPress 網站視覺編輯器
- Elementor Pro：付費版
獲取 Elementor 外掛
Elementor 是免費外掛，你可從 WordPress 帳戶你的 Plugins 頁面中搜尋，下載和安裝。
獲取 Elementor Pro 外掛
Elementor Pro 是付費版外掛，需要在 Elementor 官網上購買，下載外掛文件，並上傳/安裝到你的 WP 網站。
Elementor Form 是 Elementor Pro (付費版) 外掛中提供一個可創建表單 (Elementor Form) 的 widget (部件)。免費版本的 Elementor 外掛並不提供這個表單功能/部件。
Elementor 官網網址：
https://elementor.com/
創建一張 Elementor 頁面 (Page)
首先，你需要在 WordPress 裡創建一張 Elementor 頁面 (Page)。
在左邊主菜單選中 Pages，點擊 Add New。
給新頁面填寫頁面標題，並點擊 Publish (去發布成新頁面)。這樣同時會將頁面保存。
保存好後，點擊 Edit with Elementor (藍色按鈕)。
創建第一個 Elementor 表單
點擊 Edit with Elementor 後，會將頁面在 Elementor 網頁視覺編輯器中打開。
Drag-and-drop 創建第一張表單
在左邊菜單的搜尋框中輸入 form。
將鼠標移動到 Form (表單)，並拖拉 (drag) 到右邊的頁面 section 中，並同時釋放 (drop) 鼠標的左 button。
現在你的頁面上會顯示一個最基礎的 Elementor 默認表單。表單上會有 3個欄位：
- Name / 名字：輸入欄類型是 Text
- Email / 電郵地址：輸入欄類型是 Email
- Message / 信息：輸入欄類型是 Textarea
並有 1個 button：
- Send / 發送
點擊左下角的 Update 按鈕去保存你剛才對頁面的所有修改。
表單名稱
你可輸入一個表單名稱。
表單的其他輸入欄
除了默認的 3個輸入欄，你還可點擊 + ADD ITEM 去添加其他類型的輸入欄，包括：
- Text / 文字輸入
- Email / 電子郵箱地址輸入
- Textarea / 多行文字輸入
- URL / 網址
- Tel / 電話號碼
- Radio / 單選選項
- Select / 下拉框選項
- Checkbox / 可多選選項
- Acceptance / 驗收
- Number / 數字
- Date / 日期
- Time / 時間
- File Upload / 上傳文件
- Password / 密碼
- HTML / 網頁代碼
- Hidden / 隱藏
- Step / 翻頁表單
- reCAPTCHA (和 v3 版本) / 表單輸入驗證
- Honeypot / 蜜糖罐
表單上的其他設定
你可設定表單上的：
- 輸入欄空間的大小
- 是否顯示每一個輸入欄的 label (文字描述)
- 是否顯示每一個輸入欄是否必填的 * 標註
Elementor 表單按鈕 (Button)
Button 大小、寬度、置中
你可調整 Elementor 表單 button 的：
- 大小 (size)，例如 Extra Small、Small、Medium、Large、Extra Large
- 寬度比例，例如 100%
- 置中、左、右
Button 顯示文字、Icon
Button 上的默認顯示文字是 Send，但你可修改做 Submit 或其他。
你可給 Button 選擇一個 Icon，或不使用 Icon。
並可給 Button 輸入一個 ID，或不輸入 ID。
表單風格
在 Style tab 下，你可設定表格的風格，包括以下。
你可調整輸入欄之間的間隔、label 文字的間隔、HTML 的間隔。
你可調整輸入欄中 placeholder 提示文字的顏色、字體類型、字體大小、背景顏色、輸入欄的邊框大小/顏色。
你可設定 button 顯示文字的大小、button 字體類型、button 顯示文字的顏色、button 底色。
並可設定 button 4個角落的半徑大小、等。
你可設定網站訪問者成功提交表單後會見到信息文字的風格，包括 success message color (表單提交成功信息的文字顏色)、等。
如果你使用重定向網頁網址 URL，可不需要設定 Messages 風格。
或你可直接使用默認風格，這樣就不需要做任何設定的修改。
表單提交成功後的行動
點開 Actions After Submit。
在這個 Add Action 的可多選下拉框中選擇 3個選項：
- Email 2
- Redirect
接下來我們需要設定：
- 自動發送電郵：這個電郵是自動發送給你自己的電郵地址 (email address)，作為網頁訪問者提交表單成功的即時通知。
- 自動回覆電郵：這個電郵是在網頁訪問者提交表單成功後，自動發送給訪問者所填寫的電郵地址 (email address)。
- 輸入一個重定向網頁網址 URL。
Actions After Submit 中的其他選項
Elementor Form 也提供其他表單提交成功後的行動選項，包括：
- Webhook
- Mailchimp (可參考這個 Mailchimp 教學)
- Drip
- ActiveCampaign (可參考這個 ActiveCampaign 教學)
- GetResponse
- ConvertKit
- MailerLite
- Slack
- Discord
- Popup
創建自動發送和自動回覆電郵
你可設置在網頁訪問者成功提交表單後，Elementor 自動發送一封電郵給你自己的電郵地址 (email address)。這個就是網頁訪問者提交表單成功後給你的即時通知。
在 Email 部份下輸入：
- To Email / 收件電郵地址 (即，你的 email address)
- Subject / 電郵標題
- Message / 電郵中的信息：你可輸入 [all-fields]
- From Email / 基礎電郵信息的 email address：最好填寫帶有你網站網域 (domain) 的電郵地址
- From Name / 填寫你網域名稱或你個人名稱
- Reply-To / 收件人按回覆鍵後，電郵會直接回覆到這個 email address，最好輸入帶有你網站網域的 email address
Email 2
Email 2 是自動回覆電郵：這個電郵是在網頁訪問者提交表單成功後，自動發送給訪問者所填寫的電郵地址 (email address)。
Email 2 的創建/填寫過程，跟 Email (第一封電郵) 的創建/填寫過程是一樣的。
輸入重定向網頁網址
在 Redirect 部份的 Redirect To 輸入重定向網頁網址 URL。
通常網址 URL 會是一張 thank you 頁面。
設定完成的 Elementor 表單
你可隱藏表單上的 label 提示文字，這樣表單看起來會更加美觀和乾淨。
在 Content tab 下點開 Form Fields 部份。
點開 Name (表格的第一個輸入欄)。
給 Label 輸入空白 (默認是 Name)。
這個就是設定完成後的表單。
Elementor 外掛與 WP 佈景主題的兼容
Elementor 外掛可跟不同的 WordPress 佈景主題 (themes) 一起使用，一般都能很好兼容，包括例如 OceanWP 佈景主題。
可參考這個 OceanWP 教學。
我寫過這篇文章的英文版：Elementor Form Builder Tutorial
WordPress 外掛, 設定, 優化技巧
WordPress 網站 SEO：
WordPress 網站的設定與優化技巧：
- WordPress 教學 (安裝)
- OceanWP 教學 (佈景主題)
- WordPress Google Analytics 教學 (3個安裝方法)
WordPress 外掛：
WordPress 網店外掛：