這篇文章會分享使用 Elementor Pro 的「 Form 表單 」功能，協助你客製化設計多種表單類型。
可以製作像是聯絡表單、電子報訂閱表單、會員註冊表單、作品提交表單等 ..，幫你一次解決表單上的煩惱。
順利掌握這個功能，就不用再額外安裝其他表單外掛（除非還是無法滿足你，再考慮安裝即可），這樣也能讓網站輕量一點。
好囉，來看一下這篇的大綱。
- 1. 安裝＋啟用 Elementor Pro 功能
- 2. 製作聯絡 / 問卷表單
- 3. 製作電子報訂閱表單
- 4. 製作會員登入表單（搭配 Ultimate Addons for Elementor）
- 5. 製作會員註冊表單（搭配 Essential Addons Elementor）
- 6. 製作檔案提交表單
- 常見問題
- WordPress 學習資源
1. 安裝＋啟用 Elementor Pro 功能
這篇文章提到的「 Form 表單 」功能，屬於 Elementor Pro 進階版功能之一，如果你是用 Elementor 免費版 的，需進行升級才有辦法使用。更多 Elementor Pro 購買＋詳細教學。
當順利購買完成＋激活 Elementor Pro 憑證，就會看到專業版功能已經開啟，這時就擁有更強大的網站客製化能力啦！
2. 製作聯絡 / 問卷表單
這章節，來示範使用 Elementor Pro 製作很常見的「 聯絡表單 」或是「 問卷表單 」，協助你搜集訪客訊息。
首先，選擇「 表單 Form 」元素，並拖曳到頁面裡面，就會顯示預設的版型了。
接下來，我分成簡單幾個步驟，帶大家熟悉 Elementor 的表單功能。
Step1：表單欄位設計
首先，可幫表單取個名字，方便未來做辨認。
點「 新增項目 」就會出現欄位，然後在「 類型 」挑選自己需要的格式，最後在右側的視覺編輯區，就會出現囉！
有關於「 類型 」的欄位，有非常多種格式可使用（下圖），只要依照自己的需求選擇，就可以設計出各種類型的表單囉！
再來，可以切換到「 進階 」分頁，這裡的「 ID 」和「 短碼 」是連動的（下圖）。
「 ID 」的功用，是當訪客提交表單後，網站會發送信件給站長，而系統會針對「 ID 」進行欄位辨認，並把訪客在各欄位輸入的內容，分別寫到信件中提交給站長。
所以有關「 ID 」的命名，請記得在當前表單中，不能跟其他欄位的 ID 有重複（否則系統會不知道抓哪一個顯示到信件中）。
再來，可以新增其他欄位，像是電話、電子郵件、詳細需求等 ..，就依照自己的需求調整啦。
Step2：提交後的動作
當表格欄位、按鈕樣式都調整完成，就可以設定表單「 提交後的動作 」囉。
這功能簡單理解，就是當訪客提交表單後，你希望 Elementor 能幫你做哪些動作處理（下面挑選部分說明）。
- Collect Submissions（收集提交）：Elementor 會幫你把表單提交後的資料，存放在 Elementor > Submissions 裡面，方便你做查詢。
- 電子郵件：訪客提交表單後，WordPress 會寄送表單內的訊息，到你的指定信箱。
- MailChimp：這裡提交的資料，部分會傳到 MailChimp 裡面，協助你整合電子報名單。
- 彈出式視窗：訪客提交表單後，會跳出指定的彈出式視窗。
這裡我先選擇「 Collect Submissions 」、「 電子郵件 」這兩個動作。
Step3：電子郵件設定
到電子郵件的選項卡，可設定收件人信箱、標題、訊息等 ..，收件人信箱可任意指定（預設是 WordPress 管理員信箱）。
至於「 訊息 」的欄位，預設值是 Elementor 提供的短代碼 [all-fields]，這短代碼作用會抓取表單的所有欄位，並放進要寄送的信件內容中。
至於其他的欄位，大多是顯示文字的差別而已，這裡就不多提起。
Step4：其他選項設定
如果想修改提交表單後的顯示文字，可以把「 自訂訊息 」打開，裡面可以做相關調整，或維持預設值也行。
Step5：表單樣式調整
點選「 樣式 」可調整表單的間距、顏色、按鈕、訊息文字等 .. 相關的樣式調整，就調為自己喜愛的樣子吧！
Step6：測試表單
最後來看一下表單成品、表單留言內容，還有儲存在 Elementor 的 Submissions 功能的表單資料。
首先，是設計完成的表單。恩～感覺還不錯！
再來，檢查一下剛設定的信箱，會發現有多了一封表單留言的信件囉。
最後是 Elementor 的相關功能，我們前往 Elementor > Submissions（提交），會看到多了一筆表單內容的資料囉。
好囉，以上就是使用 Elementor Pro，製作聯絡 / 問卷表單的小教學：）
3. 製作電子報訂閱表單
這章節，跟大家分享如何使用 Elementor Pro，製作電子報訂閱表單。
因為電子報訂閱表單的製作，跟上一章流程大致上是一樣的，只是新增的欄位不同而已，所以這章節會分享不同的。
也就是，教大家如何把訂閱表單，和 MailChimp 這款知名的電子報行銷軟體，進行串接。更多 MailChimp 電子報教學。
這樣當訪客提交表單後，相關資料就會傳到 MailChimp 建檔，方便站長做 Email 的統一管理。
備註：Elementor 也有跟其他的電子報行銷軟體整合，像是 MailerLite、ConvertKit、Drip 等 ..（依照自己狀況選擇即可），串接流程都大同小異，也能參考這章節的示範。
Step1：新增表單欄位
首先，一樣新增「 Forms 表單 」功能，這次分別新增姓名 ＆ 電子信箱。
Step2：提交後的動作
在「 提交後的動作 」選項，這次額外新增 MailChimp 的標籤，會看到多了一個 MailChimp 選項卡。
Step3：MailChimp 選項卡設定
切換到「 MailChimp 」選項卡，API 密鑰選擇 Custom，然後輸入自己的 MailChimp API。有關 MailChimp API 位置，可參考 這篇說明。
MailChimp API 正確輸入後，Elementor 會自動抓取你的 MailChimp 帳戶，就能進行指派。
有關「 欄位對應 」的 Email ＆ 姓名，分別選擇自己表單的欄位，就能進行綁定（下圖）。
Step4：表單測試＆確認 MailChimp 訂閱者列表
當表單製作完成後，我們輸入另一個信箱測試一下，看是否能順利訂閱成功。
順利的話，在信箱應該會收到相關通知信，還有 Elementor > Submissions 也會有資料。
最後前往＋登入 MailChimp，前往 Audience > All contacts，就會發現新的 Email 資料，也被整合進來囉。更多 MailChimp 電子報教學。
好囉，以上就是使用 Elementor 製作電子報表單的教學：）
4. 製作會員登入表單（搭配 Ultimate Addons for Elementor）
Astra 是一款輕量快速的多功能主題，可架設多種類型網站，像是 Blog 建立、公司網站設計、架設購物網站 等 ..，並完美的支援 Elementor。
而這章節提到的 Ultimate Addons for Elementor，是屬於 Astra Pro 進階版 的功能之一，提供多達 40 多種 Elementor 元素、100+ 個網站模板、200+ 個區塊模板，讓網站客製化能力變的更強。
Ultimate Addons for Elementor 的 Login Form（登入表單）、User Registration Form（註冊表單），可用來製作會員登入 ＆ 註冊表單。
這章節，我會使用 Login Form（登入表單）進行示範，至於註冊表單的操作流程也差不多，同樣都能參考。
Step1：套用登入表單
首先，選擇 Login Form 登入表單，並拖曳到編輯區裡面。
Step2：設定表單欄位
Field Label 選擇 Custom（客製化），然後更改一下欄位標題等 ..。
Step3：設定社群登入（註冊）
Ultimate Addons for Elementor 有提供 Google、FB 社群註冊＋登入功能，可依自己需求選取。
這裡先示範 Facebook 社群登入功能，如果不知該如何做，也能參考 Astra 的 這篇教學。
Send Email（寄送信件）可選 User（給註冊會員），就是當訪客註冊為會員後，會收到 WordPress 寄送的歡迎＋資料信件。
- Send Email 寄送信件：有提供 4 個模式，分別是 No（都不寄送）、Admin（寄給管理員）、User（寄給會員）、Admin & User（管理員＆會員都寄）。
Step4：設定 Separator 分割線 ＆ Button 按鈕
可以開啟分割線功能，也可幫按鈕取個名字＆修改樣式。
Step5：設定 Additional Options 其他選項
可設定會員登入＆登出後，是否跳轉到指定頁面。還有相關註冊、忘記密碼的設定調整。
- Redirect After Login：會員登入後的跳轉頁面。
- Redirect After Logout：會員登出後的跳轉頁面。
Step6：表單樣式設定
接著，就是來設計表單樣式囉！
點選 Elementor 的樣式（或進階），這邊能修改間距、表單欄位、社群登入、網站按鈕等 ..，就依照自己的喜愛調整即可。
如此一來，登入表單就完成囉！如果想瞭解更多，也能參考 官方介紹。
5. 製作會員註冊表單（搭配 Essential Addons Elementor）
Essential Addons Elementor 是 Elementor 生態圈強大的合作夥伴之一，算是非常知名的 Elementor 擴充外掛。
它提供了非常多可用的元素功能，補足 Elementor 免費版可用元素較少的缺陷，所以如果你預算有限，也能搭配這款外掛架站。
因為會員登入＆註冊表單的設計，流程其實差不多，下面我就用 註冊表單 示範（登入表單也是差不多流程），那就開始吧！
Step1：套用註冊表單＆一般設定（General）
首先，搜尋 Register Form（註冊表單），會看到元素右上角有一個 EA 的標誌，把功能拖曳到視覺編輯器裡面。
表單類型選擇 Registration（如果是登入表單就選 Login），編輯區就會自動切換成註冊表單。
Hide all Forms from Logged-in Users，這是如果處於已登入狀態，註冊表單會自動隱藏，不讓訪客看到。
Show Login Link 可看是否要顯示「 登入 」按鈕，如果有開啟可取個名字（下圖）。
Login Link Action 是點了登入連結，系統會做的動作，下圖是選 Show Login Form 會自動跳轉到會員登入頁面。
上圖 Enable Google reCAPTCHA 是 Google 的資安驗證功能，可防範駭客用機器人註冊（依自己需求開啟，但需到 Google 申請憑證）。可參考 這篇文章，有完整設定流程。
Step2：註冊表單欄位設定（Register Form Fields）
接下來，就是來設定表單欄位啦！
點「 新增項目 」就可新增欄位，然後可設定欄位種類、是否顯示必填、欄位寬度等 ..，就依自己需求選取。
Show Required Mark 可顯示必填標誌。
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 提供的短代碼形式，有下面這幾個（僅列舉部分，依官方提供的為主）。
- [username]：使用者帳號
- [email]：電子郵件
- [firstname]：姓名
- [lastname]：同上（兩者可二選一使用）
- [website]：網站路徑
- [loginurl]：會員登入表單的路徑
- [sitetitle]：網站標題
Step6：Terms & Conditions （會員服務＆條款）
可開啟同意會員服務＆條款欄位，並設定相關文字＆網址路徑。
Step7：Validation Messages（驗證訊息）
Essential Addons for Elementor 在不同欄位，有完整的驗證功能，我們只需把預設英文字改為中文即可。
Step8：設計表單樣式
最後就是設計表單樣式囉，Essential Addons for Elementor 有很多可調整的選項。
像是整體背景、表格樣式、登入 / 註冊按鈕等 ..，都可依照自己需求調整。
如此一來，註冊表單就完成囉！我們也能參考一下 官方表單設計 感覺，打造自己的註冊表單！
6. 製作檔案提交表單
如果打算讓訪客上傳檔案，像是圖片檔之類的，Elementor 也有提供這樣的欄位。
因為表單製作流程，跟前幾個章節的流程差不多，這邊就只挑重點功能介紹。
首先，一樣新增「 Forms 表單 」功能，這次比較不同的地方，是欄位類型可選擇「 檔案上傳 」。
如此一來，就能製作類似上傳檔案的功能囉。
常見問題
Elementor Pro 可以製作什麼類型的表單？
可以製作像是聯絡表單、電子報訂閱表單、會員註冊表單、作品提交表單等 ..，幫你一次解決表單上的煩惱。
Elementor Pro 還有提供其他功能嗎？
Elementor 進階版，有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder（購物網站編輯器）等 ..，有更多功能可以使用。
完整的 Elementor Pro 教學文。
想使用 Elementor 製作會員登入＆註冊表單，要如何做？
可以試看看 Elementor 生態圈的擴充外掛，像是 Ultimate Addons for Elementor、Ultimate Addons for Elementor 等 ..，都有提供會員登入 ＆ 註冊表單功能。
Elementor 跟我使用的主題有辦法兼容嗎？
Elementor 跟絕大多數主題都保持良好的相容度，因為 Elementor 在 WordPress 領域是非常知名的頁面編輯器，所以通常不用擔心此問題。
但如果你的主題有內建自己的頁面編輯器了，那會建議使用內建的即可，因為通常整合度會比較高。
WordPress 學習資源
學習網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 3 項實用資源，可有效幫助大家做學習。
資源一：WP 高手架站課（線上課程）
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！
點擊下面了解課程，立馬擁有自己的品牌網站，並增加網路曝光度！
資源二：SEO 排名飆升課（線上課程）
網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？
這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。
點擊下面了解課程，帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
資源三：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
資源四：更多犬哥教學資源
如果你在操作過程中遇到問題，可以加入 犬哥研討社（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識，可關注 YouTube 頻道，或是歡迎追蹤 犬哥網站 IG。
