如何使用Elementor創建聯繫表單

使用Elementor創建聯繫表單

使用Elementor創建聯繫表單可以透過使用Elementor Pro中嘅表單小部件嚟實現。只需把表單小部件由編輯器面板拖到您的頁面，然後使用控件即可在您的網站上創建美觀且響應靈敏的表單。

編輯您的表格

在編輯器面板中，您可以創建和編輯您希望在表單中捕獲的所有字段。表單小部件支持大多數流行嘅字段類型，例如文本、文本區域、單選按鈕、選擇器等。如果需要，呢啲字段都可以設置為必填。

你可以透過設置列寬布局嚟設置表單款式以使用同一行上嘅字段。 

表單內容content設置

表單字段Form Fields

Elementor表單小部件嘅此部分允許你添加和管理將包含喺表單中嘅每個表單字段。除咗手動添加內容之外，好多選項仲使用動態標籤。呢啲標籤允許你檢索WordPress數據，或由插件源（例如高級自定義字段）或WooCommerce產品中檢索數據。能夠使用動態數據嘅項目將喺字段輸入旁邊有“堆棧”圖標。

表單名稱–為表單命名。

表單字段–表單中嘅字段列表。你可以根據需要複製、添加或刪除字段。你可以拖放嚟更改它們的順序。

單擊某個字段可查看其設置。

1. 類型–選擇你想要嘅字段類型
2. 標籤label–字段嘅名稱，顯示喺表單同你由用戶收到嘅電子郵件上。
3. 霸位符placeholder–字段嘅前端顯示名稱。
4. 必填–將其打開以將該字段設置為必填字段。
5. 列寬–允許你設置字段嘅寬度。如果你想要一個表格喺一行中有兩個字段 – 把每個字段設置為 50%。

字段類型

1. 文本–一個簡單嘅文本字段。即名稱
2. 電子郵件–電子郵件類型。包括電子郵件驗證
3. 文本區域–文本區域類型。你可以設置行數
4. URL –網站URL字段
5. Tel –電話號碼類型
6. 收音機radio–收音機類型。單選。你可以滑動內聯列表以獲得水平款式
7. 選擇–選擇類型。選項下拉列表。可以設置為多選。
8. 複選框–複選框類型。檢查一個或多個選項。你可以滑動內聯列表以獲得水平款式。
9. 接受–添加條款複選框供用戶接受
10. Number –數字類型
11. 日期–添加日期選擇器字段
12. 時間–添加時間選擇器字段
13. 文件上傳–允許您的用戶上傳文件
14. 密碼–添加密碼字段
15. .HTML –添加 HTML字段
16. 屈–添加隱藏字段。對用戶隱藏，但對管理員可見
17. reCAPTCHA –添加reCAPTCHA。reCAPTCHA驗證用戶唔係機械人
18. 蜜罐Honeypot- 把蜜罐添加到您的表單中（重點）。蜜罐係一個隱藏字段，旨在作為填寫表單嘅垃圾郵件機械人嘅誘餌。人類睇唔到呢個字段，所以佢哋唔會填寫它。因為機械人無法判斷該字段係隱藏嘅，所以它會填寫它。如果提交時蜜罐字段唔為空，則該表單顯然係由機械人填充嘅垃圾郵件提交，將被自動拒絕。

提交按鈕button

1. 大小–設置提交按鈕嘅大小
2. 列寬 –設置按鈕嘅寬度
3. 對正方式——設置對正方式

步驟按鈕

1. 下一步：輸入你想要顯示嘅文字
2. 上一篇：輸入你想要顯示嘅文字

提交按鈕

1. 提交：選擇“提交”按鈕上顯示嘅文本
2. 圖標–從Font Awesome圖標列表中添加圖標或上傳自定義SVG
3. 按鈕ID：透過喺字段中輸入值嚟為按鈕分配ID

提交後的操作Action after submit

用戶提交表單後，然之後呢?

初次使用表單設計者嘅一個常見問題係：“我有設置Elementor表單，但提交後冇任何反應。點解?”

答案通常係：“你仲未設置“提交後”操作。”

提交Elementor表單後，你將需要執行一項或多項操作，而每項操作都需要進行少量設置。一些常見嘅操作包括：

• 把表單結果透過電子郵件發送到一個或多個電子郵件地址。
• 把用戶重定向到“多謝”頁面。
• 將訂閱者信息添加到新聞通訊自動回復服務中
• 把用戶信息添加到CRM
• 把表單數據發送到Slack或Discord頻道
• 打開或關閉彈出窗口。

Elementor表單操作為您提供強大的選項。你可以連接第 3 方服務（例如Mailchimp、Drip、Hubspot、Slack或Convertkit ）嚟處理表單信息。Elementor內置咗呢啲以及其他幾個服務集成，但你不僅限於僅使用內置集成進行連接。您的表單仲可以透過Webhook操作與Zapier等服務連接。Zapier連接到 1000 多個其他服務，並充當您的表單和這些服務之間的橋樑。請在此處閱讀有關把Elementor與Zapier結合使用嘅詳細指南。

提交後的操作詳解

透過在“添加操作”字段內單擊嚟添加新操作。將顯示可供選擇嘅可用操作列表。

透過電子郵件發送結果

選擇電子郵件操作。將添加一個電子郵件選項卡。

單擊“電子郵件”選項卡打開其選項。

1. 收件人：表單提交結果將發送到嘅電子郵件地址。添加以逗號分隔嘅其他電子郵件地址。
2. 電子郵件主題：電子郵件嘅主題
3. 電子郵件內容：電子郵件嘅正文。默認情況下，所有表單字段都透過短代碼發送：[all-fields]。想要自定義發送哪些字段？ 複製你要發送嘅字段中顯示嘅短代碼並將其粘貼到此處。
4. 發件人電子郵件：“發件人”電子郵件地址
5. 發件人姓名：鬈發件人徜徉姓名
6. Reply-To：發送回覆嘅電子郵件地址
7. 抄送: 抄送電子郵件地址
8. 密件抄送：密件抄送嘅電子郵件地址
9. 元數據：默認情況下包含可用嘅元數據。單擊每個上嘅“x”可刪除你唔希望包含喺電子郵件中嘅任何內容。
10. 發送方式：選擇發送電子郵件嘅格式，HTML或純文本

向提交表格嘅用戶發送確認電子郵件（重點）

配置電子郵件2

電子郵件2非常有用。例如，它可能是您網站的訪問者在您的網站上發送表單後立即收到的確認電子郵件。

要創建電子郵件，請執行與上述電子郵件相同嘅過程。

注意：在“收件人”字段中，你應該輸入電子郵件字段高級選項卡中嘅短代碼[field id="email"]。

提示：你可以使用提交者嘅名 ( ‘Howdy [field id="name"]’) 嚟個性化確認電子郵件。

呢度有一個如何使用 HTML構建成個電子郵件內容嘅示例1：

<p>
     <p>You got a new message!</p>
</p>
<p>
     <p>Username: [field id="name"]<br />
</p>
<p>
     <p>Email:  [field id="email"]<br />
</p>
<p>
     <p>Phone:  [field id="tel"]<br />
</p>
<p>
     <p>Message: [field id="message"]</p>
</p>
<p>
     <p>Don’t forget to call them back soon 🙂 </p>
</p>

HTML示例2

<h1>You have a new wedding to plan.</h1>

<p>[field id=”first_name”] would like you to contact them about planning their wedding on [field id=”eventdate”] at [field id=”location”].</p>

<p>The couples vision and plans so far are as follows:<br>

[field id=”message”] </p>

<h2>Contact Information</h2>

<ul>

<li>First Name: [field id=”name”]</li>

<li>Last Name: [field id=”last_name”] </li>

<li>Email Address: [field id=”email”] </li>

<li>Phone Number: [field id=”phone”]</li>

</ul>

<p><strong>Good luck at the event!</strong></p>

注意：只能使用位於表單字段細部件嘅高級選項卡中嘅短代碼。你不能使用此處其他任何地方嘅簡碼。從其他插件或其他地方添加其他短代碼將導致服務器錯誤消息。短代碼需要完全按照表單字段嘅高級選項卡中顯示嘅方式編寫。

把糢闆添加到表單

現時，我哋可以使用控件中嘅電子郵件選項將此 HTML添加到表單中。把 HTML粘貼到消息字段中，替換 [all-fields] 默認值。確保喺控件底部附近啟用了“以 HTML形式發送”選項。

重要的！ 只能使用位於表單字段細部件嘅高級選項卡中嘅短代碼。你不能使用此處其他任何地方嘅簡碼。從其他插件或其他地方添加其他短代碼將導致服務器錯誤消息。短代碼需要完全按照表單字段嘅高級選項卡中顯示嘅方式編寫，但有一個例外。如果高級選項卡中嘅簡碼格式為 [field id=email]，則必須把字段名稱用引號引起來，因此您需要將 [field id=email] 更改為[field id="email"]。

重定向至感謝頁面

選擇重定向操作。將添加一個“重定向”選項卡。

單擊“重定向”選項卡打開其選項。

1. 重定向至：輸入表單提交後重定向用戶嘅頁面URL。

將訂閱者添加到新聞通訊電子郵件營銷服務或把用戶信息添加到CRM

選擇任何第三方服務。將為該服務添加一個新選項卡。

單擊所選服務嘅選項卡以打開其選項。

1. API密鑰：在此處輸入所選服務嘅API密鑰。你必須首先喺集成設置中設置API憑據。你仲可以透過選擇“自定義”嚟設置不同嘅API憑據。
2. 列表/帳戶：選擇要把表單信息發送到嘅列表或账户。

使用Zapier把你嘅表單連接到數千種其他服務中嘅任何一個

選擇Webhook操作。

單擊Webhook選項卡打開其選項。

1. Webhook URL：輸入將接收表單提交數據嘅集成URL （如Zapier ）。
2. Advanced Data：滑動到YES將高級數據發送到webhook，其中將包括日期和時間、遠程IP等元數據。它仲會把數據作為數組發送，例如：[ ‘Name’ => ‘ John Doe’, ‘Email’ => ‘ john@doe.com ‘, ‘Message’ => ' 請聯繫我’ ]如果Advanced Data設置為NO，則數據將以Simple形式發送，即發送表單把字段作為文本消息發送到Webhook，例如：“姓名：John Doe，電子郵件：john@doe.com，消息：請聯繫我。”

把表單數據發送到Slack通道

選擇Slack操作。將添加一個新嘅Slack選項卡。

單擊Slack打開其選項。

有關更多詳細信息，請參閱Slack集成文檔。

打開或關閉彈窗

提交表單後可以打開或關閉彈出窗口。

選擇彈出操作。將添加一個彈出選項卡。

單擊彈出窗口打開其選項

1. 選擇徜徉打開彈出窗口徜徉以選擇提交表單後將打開嘅彈出窗口。輸入一個或多個字符以生成可供選擇的可用彈出窗口的下拉選項。
2. 選擇關閉彈出窗口可在表單提交後關閉當前彈出窗口。你仲可以把彈出窗口設置為Don’t Show Again。

表單嘅郵箱設置

表單小部件電子郵件設置允許你指定表單發送到嘅位置並自定義發送嘅數據。

除咗手動添加表單嘅電子郵件設置之外，呢啲選項仲使用動態標籤。呢啲標籤允許你檢索WordPress數據，或從插件源（例如高級自定義字段）檢索數據。能夠使用動態數據嘅項目將喺字段輸入旁邊有“堆棧”圖標。

設置

1. To 收件人：輸入表格收件人嘅電子郵件地址（兩個用逗號隔開）
2. Subject 主題：輸入你希望喺電子郵件主題中顯示嘅文本
3. Message 消息：喺呢度你可以使用表單字段嘅短代碼嚟創建表單發送嘅消息。默認情況下使用“所有字段”選項。在本教程中了解如何為表單創建自定義消息
4. From Email 發件人電子郵件：輸入發件人地址或使用norepy@
5. From Name 發件人姓名：輸入你希望喺電子郵件中顯示嘅姓名、職位或公司
6. Reply To 回覆：輸入發件人地址或使用norepy@
7. Cc 抄送：輸入要抄送嘅收件人嘅電子郵件地址（抄送）
8. Bcc 密件抄送：輸入要密件抄送嘅收件人嘅電子郵件地址（密件抄送）
9. Meta Data 元數據：您可以在此處添加或刪除顯示在表單底部的其他元數據。默認顯示所有選項
10. Send As 發送為：在下拉列表中，選擇是否以 HTML或純文本形式發送表單。

步驟表格設置Steps setting多

步驟表單允許你創建具有多個步驟多嘅表單，以便用戶填寫一些字段，單擊“下一步”，再填寫一些字段，單擊“下一步”或“上一步”等，直到完成最後一步，此時可以提交表格。

附加選項–表格

1. 表單ID –設置表單ID。
2. 自定義消息–滑動唻自定義消息唻按鈕以自定義表單中的消息（例如成功消息、錯誤消息等）。 

注意：自定義消息唔係服務器提供嘅標準消息。標準服務器消息無法控制或定製。用戶好少會睇到呢啲自定義消息。当存在阻止發送表單嘅服務器衝突時，有時可能會生成自定義消息。另請注意，自定義消息係瀏覽器唔顯示其自身錯誤時嘅後備消息。

表單Style款式

表單表格Form款式

1. 列間隙 –設置列之間嘅空間
2. 行間隙 –設置行之間嘅間距
3. 標籤–設置標籤嘅間距、標籤顏色同版式。
4. HTML字段 –設置表單上 HTML字段（如果存在）嘅間距、顏色同排版。

表單風格Field設置

你可以輕鬆設置表單字段嘅色水、字體同邊框嘅款式

1. 文本顏色–設置輸入文本嘅色水（用戶填寫嘅文本）
2. 版式–設置輸入文本嘅版式
3. 背景顏色–設置字段嘅背景顏色
4. 邊框顏色–設置字段嘅邊框顏色
5. 邊框寬度–設置字段邊框嘅寬度
6. 邊框半徑–設置邊框嘅半徑

表單按鈕button款式

你可以設置提交按鈕嘅正常和懸停狀態嘅款式。

1. 背景顏色 –設置背景顏色
2. 文本顏色 –設置文本嘅色水
3. 版式–設置文本嘅版式
4. 邊框類型 –喺不同嘅邊框款式之間進行選擇。
5. 邊框寬度 –如果設置了邊框，則設置字段邊框嘅寬度
6. 邊框顏色 –設置字段嘅邊框顏色
7. 邊框半徑 –設置邊框嘅半徑
8. 文本填充 –設置文本嘅填充

表單消息messages款式

你可以設置提交表單後向用戶顯示的消息嘅款式。

1. 版式：設置消息文本嘅版式。
2. 成功消息顏色：選擇成功消息嘅色水
3. 錯誤消息顏色：選擇錯誤消息嘅色水。
4. 內聯消息顏色：選擇內聯消息嘅色水。

Form Submissions表格提交

借助Elementor表單提交功能，你可以備份表單提交數據、隨時訪問並由一個位置打理所有數據。有了您的提交信息，你可以收集見解、分析活動數據，抑或只係喺WordPress儀錶板中管理您的提交。

注意：係一個實驗。確保在Elementor >設置>實驗選項卡下將其打開。

1. 創建新頁面或編輯現有頁面，然後單擊“使用Elementor編輯”
2. 把表單小部件拖到您的頁面
3. 默認情況下，唻提交後嘅操作桎梏部分包括唻收集提交內容唻選項
   
4. 要查看收集嘅提交內容，請轉至Elementor >提交內容
   
5. 單擊可查看、編輯、刪除任何表單提交並將其“標記為已讀”

注意：不適用於舊表單，要啟用此功能，只需將其添加到“提交之後嘅操作”的

導出提交內容

你可以透過以下方式導出您的提交內容：頁面名稱、表單名稱、時間範圍同全部。單擊徜徉全部導出至CSVó以導出您選擇的提交內容。

出現服務器錯誤或表單唔發送電子郵件？

如何解決WordPress無法透過表單發送電子郵件和“服務器錯誤”問題。。

首先，在您的WordPress網站上運行測試，看看它是否可以發送電子郵件。

要確認電子郵件嘅送達能力，你可以使用任何SMTP插件並選擇不同嘅SMTP服務器（例如SendGrid ）嚟檢查其是否正確送達。如果它與其他協議正常工作並顯示默認SMTP錯誤，則需要將其報告畀託管。

做乜嘢會出現此服務器錯誤？

Elementor使用WordPress嘅wp_mail函數發送電子郵件。您的網絡主機接收已發送嘅電子郵件，對其進行處理並發送。90%嘅問題都發生喺呢度。

有時，託管服務器會禁用用于發送電子郵件嘅 PHP功能。佢哋基本上會阻止您的電子郵件。

這樣做通常是為了確保您不會通過您的站點發送垃圾郵件（您的主機不希望您將其服務器用作垃圾郵件服務器）。

從技術上講–wp_mail函數默認使用 PHP send_mail函數。但如果在該服務器上禁用它，則電子郵件發送失敗。要解決此問題，請聯繫您的託管服務並請求他們啟用它，抑或改用SMTP服務器。

SMTP究竟係乜嘢？

SMTP代表“簡單郵件傳輸協議”。SMTP係一種電子郵件服務器，它把表單中嘅電子郵件路由到列出嘅客戶嘅收件箱中。佢係一個外部電子郵件服務器（例如，Gmail可以用作SMTP服務器），有助於確保您的電子郵件更快地送達，並有助於防止您的電子郵件最終進入用戶嘅垃圾郵件文件夾。

嘗試使用任何流行嘅SMTP插件 ( https://wordpress.org/plugins/search/SMTP/ )。

有關服務器錯誤嘅更多故障排除提示

除咗聯繫您的主機提供商之外，你仲可以嘗試執行以下幾個步驟嚟解決此問題：

1. 表單嘅發件人電子郵件地址通常需要來自與您的網站相同嘅域。因此，如果您的網站係 example.com，那麼您需要使用 admin@example.com 或 bob@example.com 等發件人電子郵件地址。你可以使用回復字段選擇訪客嘅電子郵件地址進行回復根據用戶嘅要求。
2. 你可以使用Elementor表單提交功能嚟檢查表單是否正常運行。
3. 使用其他電子郵件地址（您的電子郵件可能被註冊為垃圾郵件）。為咗避免被標記為垃圾郵件，請嘗試更改電子郵件主題行嘅長度（更短或更長）。
4. 如果您正在使用任何第三方集成，請嘗試禁用它們。例如，MailChimp或ActiveCampaign。如果這成功了，請閱讀我哋嘅集成指南中嘅更多內容。基本上，你必須檢查自動回復帳戶和表單小部件內的字段映射。確保你冇喺表單小部件中將必填字段設置為“無”。另請確保你冇喺MailChimp帳戶嘅字段映射設置中添加“地址”字段或“生日”字段
5. 如果提交表單後頁面刷新，通常係由於插件或主題代碼衝突。喺呢種情況下，請停用除Elementor同Elementor Pro之外嘅所有插件，並檢查電子郵件是否正確發送。如果這不起作用，請切換到WordPress嘅默認主題並檢查是否可以解決問題。
6. 確保表單字段嘅ID （字段緊嘅“高級”選項卡中）已填充；如果冇有效嘅字段ID，如果使用”[all-fields]“短代碼，則喺發送畀提交內容接收者嘅電子郵件中將睇唔到表單字段值。
7. 確保你對電子郵件框中嘅每個字段使用正確嘅短代碼，如“高級”選項卡中所示。

高級Advanced設置

Layout設置

1. 邊距–設置表單嘅邊距
2. 填充–設置表單嘅填充
3. Z-Index –設置表單嘅Z-index
4. CSS ID –設置表單ID
5. CSS類–設置表單類

運動效果Motion Effects

運動效果 係組功能強大嘅控件，用于為您的設計添加靚嘅過渡同動畫。

到目前為止，想要合併動畫和運動效果的網頁設計師需要使用外部庫和/或自定義代碼。

碌效果Scrolling Effect

 当用戶轆頁面時，使用碌效果創建令人驚嘆嘅動畫同交互。以下係轆效果列表：

垂直滾動Vertical Scroll

就係你一直在等待的經典视差效果。垂直滾動使元素在滾動時以與頁面不同的速度移動，按照你揀嘅方向同速度。

水平滾動Horizontal Scroll

水平轆意味住当訪問者上下滾動時，元素相應咁左右移動。使用示例 – 当訪問者向下滾動時，帶有雲嘅部分會向右移動。

透明度Transparency

透明度可讓您逐漸使元素變得更加透明或更明顯，與訪問者嘅轆相關。一個例子係標題出現然後根據捲軸消失。

有4種可能嘅效果方向：

淡入 ——意味住元素開始係透明嘅，然後逐漸變得可見。

淡出 –元素開始係可見嘅，然後逐漸變得透明。

淡出 – 元素開始時可見，然後淡出，然後再次變得可見。

淡入淡出 –元素開始時係透明嘅，然後變得可見，然後再次透明。

模糊Blur

此設置與透明度類似，只係元素變得模糊而唔係透明度。一個好好嘅例子係背景圖像，只有当用戶向下滾動時才會獲得正確嘅焦點。

旋轉Rotate

喺呢度，元素隨著您滾動而旋轉。下圖中恒星嘅旋轉就係一個好好嘅例子：

注意： X同Y錨啲兩個設置確定元素縮放或旋轉嘅軸。如果將方向設置為左上，則旋轉將圍繞元素嘅左上角進行。如果設置方向為center-center，則旋轉將圍繞其中心旋轉，就好似轆一樣。此設置僅與上面嘅“旋轉唻效果以及下面列出嘅桎梏縮放徜徉效果相關。

規模Scale

縮放可讓您根據滾動來放大和縮小元素。示例：碌時變大嘅背景。

注意：使用”將效果應用到朕嚟肯定是否把運動效果應用到移動設備、台式機或平板電腦上。鼠標效果只會影響桌面設備。

鼠標效果Mouse Effects

鼠標軌跡Mouse Track

透過令元素隨著訪問者嘅鼠標移動而移動，創造一種深度感。

3D傾斜3D Tilt

與鼠標軌跡相對于鼠標移動嚟移動元素嘅方式類似，3D傾斜效果根據光標嘅相同移動嚟傾斜元素。

運動效果瀏覽器兼容性

表格背景form background

你可以設置表單背景嘅唻正常唻和“懸停”狀態嘅款式。

1. 背景類型– 選擇經典同漸變
2. 顏色–設置顏色
3. 圖片–上傳背景圖
4. 位置– 背景圖像嘅位置選項
5. 附件–選擇滾動或固定
6. 重複–設置圖像重複屬性
7. 大小–設置圖像背景嘅大小

表格邊框Form border

你可以設置表單邊框嘅唻正常唻和“懸停”狀態嘅款式。

1. 邊框類型–選擇不同嘅邊框款式
2. 寬度–設置表單邊框嘅寬度
3. 顏色–設置表單邊框嘅色水
4. 邊框半徑–設置邊框嘅半徑
5. Box Shadow –為表單設置陰影

表單錯誤消息集合一覽

表單錯誤消息–X錯誤

在您的網站上填寫表格時，你可能會遇到以下錯誤消息：“x”錯誤。

当某些字段ID為空時，可能會出現此錯誤

請打開表單設置，選擇每個字段，然後切換到“高級”選項卡。如果您發現ID選項為空，請嘗試輸入一個值（必須係表單內其他任何地方未使用嘅唯一ID值）。  

表單錯誤消息 – 此錯誤對於網站訪問者來說係唔可見嘅

在您的網站上填寫表單時，你可能會遇到以下錯誤消息：“This Error Is Not Visible For Site Visitors. 此錯誤對於網站訪問者來說不可見。”

当Elementor同MailChimp之間嘅字段映射存在問題時，通常會彈出此錯誤：

表單錯誤消息–表單無效

在您的網站上填寫表格時，你可能會遇到以下錯誤消息：““an error occurred” / “there is something wrong the form is invalid. 發生錯誤“/”出現問題，表格無效。”

当某些字段ID為空時，通常會發生呢種情況。

請打開表單設置，選擇每個字段，然後切換到“高級”選項卡。如果您發現ID選項為空，請嘗試輸入一個值（該值必須係表單中其他任何地方未使用嘅唯一ID值）。 

其他潛在原因：

–兩個字段具有相同嘅ID。

–集成無法正常工作。要確認這一點，你可以取消與電子郵件營銷服務嘅集成。

–用于集成嘅字段映射尚未正確完成。