外貿詢價表單，是把網站訪客變成商機的第一個入口。在B2B外貿站裡，它一邊把客戶的興趣、聯絡方式與需求高效收集，一邊提供清晰、可信、可預期的溝通方式，既方便公司業務員跟進，也讓採購商感到專業與安心。
透過Elementor Pro強大的Form小工具，我們可以輕鬆設計出符合業務需求的客製化詢盤表單。
然後透過簡單的SMTP配置，確保每次表單提交都能及時收到電子郵件提醒，即時掌握潛在客戶的資訊。
本篇Elementor教學課程將詳細介紹如何利用Elementor打造功能全面的B2B詢盤表單，幫助我們即使了解使用者需求、跟進並轉換為實際訂單。
*本文需要用到Elementor Pro。如果你沒有Elementor PRO，那麼你也可以WordPress的表單外掛來實現，例如WPForms。
第一步：使用Elementor建立表單模板
我們透過Templates > Add New新建一個Template，使用Elementor來編輯。
我們新建一個Section的Template。
進入到視覺化編輯頁面，點選左上角的「+」號，搜尋Form，然後新增Form小工具。
第二步：給表單設定自訂字段
我們拖曳產生的Form表單都是預設給我們三個欄位：Name、Email和Message。我們需要按照自己的需求來調整這些字段，從而讓使用者填寫你想要了解的資訊。一般的B2B詢價表單欄位設定有：
- Name 姓名
- Company Name 公司名
- Email 信箱
- WhatsApp WhatsApp號碼；中東、中美和非洲地區較多用戶使用
- Country/Region 國家
- Message 訊息
根據自己的需求進行調整，例如增加Skype、Phone、Interested Product等字段。
我們每個欄位分別對應一個Form Field，而每一個Form Field需要設定：
1、Type。決定「這個欄位讓使用者怎麼輸入」。瀏覽器會配合做基礎校驗，手機端還會彈出更合適的鍵盤，常見設定有：text（通用文字）、tel（電話/WhatsApp）、email（會幫我們自動校驗郵箱格式）、number、select、multiselect、radio（單選框）、textarea（長文本，用來放需求說明）、條款
2、Label。字段真正的標題。讓用戶知道這裡要填什麼。對於提高欄位的可讀性很關鍵。
3、Placeholder。替代文字。在輸入框裡以灰字範例使用者怎麼填、填什麼訊息
4、Required。控制這個欄位是不是必須填入才能提交。B2B詢盤的最小集合一般是：姓名、公司名、郵箱、國家、WhatsApp、需求資訊。
5、Column Width。控製字段在一行中佔多寬。決定排版佈局與閱讀節奏。
1. 對於Name欄位，我們設定如下：
2. 對於Company Name字段，我們設定如下：
3. 對於Email字段，我們設定如下：
4. 對於WhatsApp字段，我們設定如下：
5. 對於Country字段，我們設定如下：
我們設定Type為Select（下拉框），Options裡面填寫全球各國，每個國家之間需要換行。我們可以在此處找到全球國家列表，複製貼上進Options框即可。
6. 對於Message字段，我們設定如下：
Row代表的是Message輸入框的高度。
第三步：設定表單提交後的動作
Elementor的「表單提交動作」（Actions After Submit）就是訪客點「提交按鈕」後，系統要自動做的事——比如發郵件、把數據保存到後台、跳到感謝頁（方便後續做轉換追蹤，同時引導、鼓勵使用者造訪其他更多頁面）
如何設定表單提交動作？
我們打開Form小部件的Actions After Submit選項卡。
預設Elementor Pro會為我們增加兩個動作：
- Collection Submissions
這兩個動作我們保留即可，裡面的設定則是根據實際需求來修改：
Collection Submissions動作
Collection Submissions是Elementor Pro提供給我們的表單詢價管理功能。設定這個動作後，透過Elementor製作的表單提交的所有詢價資訊都會記錄在Elementor > Submissions當中。
你可以理解成這是Elementor提供給我們的一個極簡版的詢盤管理系統（需要PRO版本）。
我們點開就能看得到用戶提交詢問資訊。
Email動作
Email動作用於在使用者提交詢盤後觸發WordPress的寄信動作。
我們在已經在WordPress SMTP服務設定教學課程中使用WP Mail SMTP by WPForms這個外掛程式取代了WordPress的wp_mail() 調用，因此所有表單郵件都會由我們在WP Mail SMTP中指定的Mailer 發送（Gmail、Outlook、SendGrid、Mailgun、Amazon SES等）。
推薦設定參數：
To：用於詢盤接收位址，可用逗號新增多個收件者（如sales@ecomools.com, support@ecomools.com）
Subject：詢盤的主題，可以像我一樣這麼寫：New Inquiry from Ecomools [替換你的品牌名即可]
Message：保留預設的[all-fields]即可，自動把所有表單欄位列出來。若你想更美觀，可改為自訂模板，把重要欄位放前面。
From Email：寄件者信箱。我們設定成與SMTP指定的Mailer郵箱一致，提升到達率。
From Name：寄件人姓名。可以用品牌名或網站名，這樣辨識度會比較高。
Meta Data（元資訊）：保持預設即可。
- Date：提交時間
- Page URL ：來源頁面，判斷轉換入口；
- User Agent：設備/瀏覽器；
- Remote IP：定位與風控（防垃圾）；
- Credit：提交來源標識/歸因（用於統計）。
Redirect動作
這裡我們再增加第三個動作：
Redirect。Redirect這個動作是為了我們在後續使用GTM和GA4做詢盤表單轉換追蹤（附感謝頁面）的時候使用的（當然也能夠有其他方式可以用來做轉換追踪，感謝頁追踪只是其中一種）。
如果你的詢盤表單需要在GA4中做轉換追踪，那麼就把這個動作加入到Action After Submit中。
新增Redirect後我們會看到Form設定裡面多出了Redirect選項卡。
我們打開Redirect選項卡，將感謝頁面的網址輸入其中（例如：https://ecomools.com/thank-you/）。
這樣設定後，當使用者提交詢盤表單，那麼就會重新導向使用者到感謝頁面。
用戶觸達感謝頁面，我們就在GA4中記錄為一次轉換事件。
如果你的網站中還沒有感謝頁面，那麼可以先製作一個。
第四步：更改詢價表單樣式
Form Fields選項
我們點擊Form小工具，打開要Form Fields選項進行一些設置，如下圖所示：
- Input Size：設定每個表單欄位輸入框的大小
- Label：是否顯示欄位標籤
- Require Mark：是否在表單中顯示欄位為必填項，需要勾選Label後才有該選項。建議勾選。
設定完成後可以初步看到我們的詢盤表單樣式如上圖。
Button選項
這邊我們可以設定表單提交按鈕的文字和樣式。按需修改即可。
Style選項設定
Form裡面可以調整輸入框左右與上下之間的距離，調整標籤的樣式。
- Form。說明：設定兩個輸入框左右/上下之間的距離；設定Label 的樣式等
- Field。說明：設定輸入框的樣式、替代文字（Placeholder）的樣式
- Buttons。說明：設定提交或逐步按鈕的樣式
- Messages。說明：設定的是表單提交成功/失敗後的提示訊息的樣式，不是下方Message 輸入框的樣式
- Steps。說明：如果你製作的是逐步表單，那麼對應的樣式在這設定
第五步：發布詢價表單模板
我們將欄位、詢價提交後的動作以及表單樣式設定好以後，點選右上角的Publish按鈕發佈我們的詢問表單範本。
我們的詢盤表單範本是一個Section，不需要設定展示條件。
第六步：插入詢盤表單
然後就可以在需要的地方插入這個詢盤表單，例如我們使用Elementor編輯器開啟「聯絡我們」頁面：
我們點擊左上角的「+」號，搜尋小工具，我們搜尋Template小工具，然後將其拖曳到適當的地方。
將Template小工具放置到適當的位置後，我們搜尋我們的詢盤表單範本的名字。
選擇詢盤表單模板，新增至「聯絡我們」頁面。
點選右上角Publish，我們的詢盤表單頁面就製作好了。