Elementor 表格教學

首頁 » 開網店 » Elementor 表單教學

WordPress 外掛 Elementor 表單

本 Elementor 表單教學會講如何通過 Elementor Pro WordPress 外掛去創建聯繫表單 (contact forms)。

Elementor 是一個功能強大的 WordPress 網站視覺編輯器 (外掛)。

Elementor Pro (付費版) 外掛中提供一個可創建表單 (Elementor Form) 的 widget (部件)。

在本 Elementor 表單教學文章中,我們會用一個例子,並使用 Elementor Form 部件去創建一張可實際使用的表單 (form)。

200多個給你網站獲取用戶的方法
不需要廣告費用去推廣你的網站
Free Traffic Sources Guide by Gordon Choi
下載 PDF 電子書
fts-200

安裝 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 (Button)

保存好後,點擊 Edit with Elementor (藍色按鈕)。

創建第一個 Elementor 表單

點擊 Edit with Elementor 後,會將頁面在 Elementor 網頁視覺編輯器中打開。

Elementor Elements Form Drag & Drop

Drag-and-drop 創建第一張表單

在左邊菜單的搜尋框中輸入 form。

將鼠標移動到 Form (表單),並拖拉 (drag) 到右邊的頁面 section 中,並同時釋放 (drop) 鼠標的左 button。

Elementor Form Sample

現在你的頁面上會顯示一個最基礎的 Elementor 默認表單。表單上會有 3個欄位:

  • Name / 名字:輸入欄類型是 Text
  • Email / 電郵地址:輸入欄類型是 Email
  • Message / 信息:輸入欄類型是 Textarea

並有 1個 button:

  • Send / 發送

點擊左下角的 Update 按鈕去保存你剛才對頁面的所有修改。

表單名稱

Fields Form Name (Elementor Form)

你可輸入一個表單名稱。

表單的其他輸入欄

Fields Default (Elementor Form)

除了默認的 3個輸入欄,你還可點擊 + ADD ITEM 去添加其他類型的輸入欄,包括:

  • Text / 文字輸入
  • Email / 電子郵箱地址輸入
  • Textarea / 多行文字輸入
  • URL / 網址
  • Tel / 電話號碼
  • Radio / 單選選項
  • Select / 下拉框選項
  • Checkbox / 可多選選項
  • Acceptance / 驗收
  • Number / 數字
  • Date / 日期
  • Time / 時間
  • File Upload / 上傳文件
  • Password / 密碼
  • HTML / 網頁代碼
  • Hidden / 隱藏
  • Step / 翻頁表單
  • reCAPTCHA (和 v3 版本) / 表單輸入驗證
  • Honeypot / 蜜糖罐

表單上的其他設定

Field Input Size, Label, Required Mark (Elementor Form)

你可設定表單上的:

  • 輸入欄空間的大小
  • 是否顯示每一個輸入欄的 label (文字描述)
  • 是否顯示每一個輸入欄是否必填的 * 標註

Elementor 表單按鈕 (Button)

Button 大小、寬度、置中

Button Size, Width, Alignment (Elementor Form)

你可調整 Elementor 表單 button 的:

  • 大小 (size),例如 Extra Small、Small、Medium、Large、Extra Large
  • 寬度比例,例如 100%
  • 置中、左、右

Button 顯示文字、Icon

Submit Button Text, Icon, Button ID (Elementor Form)

Button 上的默認顯示文字是 Send,但你可修改做 Submit 或其他。

你可給 Button 選擇一個 Icon,或不使用 Icon。

並可給 Button 輸入一個 ID,或不輸入 ID。

表單風格

在 Style tab 下,你可設定表格的風格,包括以下。

Form Style (Elementor Form)

你可調整輸入欄之間的間隔、label 文字的間隔、HTML 的間隔。

Field Style (Elementor Form)

你可調整輸入欄中 placeholder 提示文字的顏色、字體類型、字體大小、背景顏色、輸入欄的邊框大小/顏色。

Buttons Style (Elementor Form)

你可設定 button 顯示文字的大小、button 字體類型、button 顯示文字的顏色、button 底色。

並可設定 button 4個角落的半徑大小、等。

Messages Style (Elementor Form)

你可設定網站訪問者成功提交表單後會見到信息文字的風格,包括 success message color (表單提交成功信息的文字顏色)、等。

如果你使用重定向網頁網址 URL,可不需要設定 Messages 風格。

或你可直接使用默認風格,這樣就不需要做任何設定的修改。

表單提交成功後的行動

Actions after submit (Elementor Form)

點開 Actions After Submit。

在這個 Add Action 的可多選下拉框中選擇 3個選項:

  • Email
  • Email 2
  • Redirect

接下來我們需要設定:

  • 自動發送電郵:這個電郵是自動發送給你自己的電郵地址 (email address),作為網頁訪問者提交表單成功的即時通知。
  • 自動回覆電郵:這個電郵是在網頁訪問者提交表單成功後,自動發送給訪問者所填寫的電郵地址 (email address)。
  • 輸入一個重定向網頁網址 URL。

Actions After Submit 中的其他選項

Elementor Form 也提供其他表單提交成功後的行動選項,包括:

創建自動發送和自動回覆電郵

Email

你可設置在網頁訪問者成功提交表單後,Elementor 自動發送一封電郵給你自己的電郵地址 (email address)。這個就是網頁訪問者提交表單成功後給你的即時通知。

Email Auto Notification (Elementor Form)

在 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 to Page URL (Elementor Form)

在 Redirect 部份的 Redirect To 輸入重定向網頁網址 URL。

通常網址 URL 會是一張 thank you 頁面。

設定完成的 Elementor 表單

你可隱藏表單上的 label 提示文字,這樣表單看起來會更加美觀和乾淨。

Name Field Switch to Required (Elementor Form)

在 Content tab 下點開 Form Fields 部份。

點開 Name (表格的第一個輸入欄)。

給 Label 輸入空白 (默認是 Name)。

Elementor Form Sample (No Label)

這個就是設定完成後的表單。

Elementor 外掛與 WP 佈景主題的兼容

Elementor 外掛可跟不同的 WordPress 佈景主題 (themes) 一起使用,一般都能很好兼容,包括例如 OceanWP 佈景主題。

可參考這個 OceanWP 教學

我寫過這篇文章的英文版:Elementor Form Builder Tutorial

WordPress 外掛, 設定, 優化技巧

WordPress 網站 SEO:

WordPress 網站的設定與優化技巧:

WordPress 外掛:

WordPress 網店外掛: