如何使用 Elementor 在 WordPress 中創建聯繫我們頁面

已發表: 2022-09-22

聯繫我們頁面是網站上最重要的頁面之一。 它允許訪問者與網站背後的公司或個人取得聯繫。 一個好的聯繫我們頁面將包含一個表單,允許訪問者提交他們的姓名、電子郵件地址和消息。 它還將包括一種讓網站所有者回复訪問者的方式,例如電話號碼或電子郵件地址。 有許多插件和工具可用於創建聯繫我們頁面。 在本文中,我們將向您展示如何使用 Elementor 在 WordPress 中創建聯繫我們頁面。 Elementor 是一個流行的 WordPress 頁面構建器插件,它允許您通過拖放創建自定義頁面和帖子。

大多數網站所有者和設計師都沒有意識到擁有聯繫頁面的重要性。 在本文中,我們將了解聯繫頁面的基礎知識以及如何構建一個出色的頁面。 我們公司的聯繫我們頁面將使用 Elementor 的頁面構建器和 PowerPack 插件設計。 第一步應添加聯繫表格。 Contact Form 7 插件用於自定義聯繫表單。 第 3 步:將信息列表小部件分佈在同一行的列中。 圖標、顏色、文本、間距和填充都應該改變。

第三步,拖拽PowerPack的谷歌地圖小部件。 您可以通過使用緯度和經度坐標來獲取辦公室的位置。 要發布更改,請單擊頁面左下角的發布按鈕。

如何在 WordPress Elementor 中創建聯繫表?

學分:WPForms

您可以按照以下步驟在 WordPress Elementor 中創建聯繫表單: 1. 登錄到您的 WordPress 帳戶並轉到您的儀表板。 2. 在左側邊欄中,將鼠標懸停在 Elementor 上,然後單擊添加新的。 3. 為您的聯繫表單命名,然後單擊“使用 Elementor 編輯”按鈕。 4. 在 Elementor 編輯器中,將聯繫表單小部件拖放到您的佈局中。 5. 配置聯繫表格設置並點擊發布按鈕。

Elementor 是一個頁面構建器,提供了廣泛的特性和功能。 Fluent Forms 是用於創建表單的最簡單易用的表單構建器。 在本文中,我們將學習如何創建最好的 Elementor 聯繫表。 您將學習如何使用兩種方法之一創建 Elementor 聯繫表。 Elementor Forms 插件不包括常規表單構建器插件的所有功能。 系統中沒有用於管理提交的內置功能。 具有各種字段、功能和集成的表單構建器以及數據管理服務將幫助您分析您生成的潛在客戶。

使用 Fluent Forms,您可以完全控制如何在Elementor 頁面構建器中自定義表單。 Fluent Forms 的安裝方式與任何其他 WordPress 插件相同。 如果您沒有 WordPress 儀表板,您可以通過訪問 WordPress.org 來安裝和激活它。 您需要升級到專業版才能訪問免費版的所有功能。 Fluent Forms 允許您選擇任何您想要的元素或聯繫人,您還可以向其中添加自己的設計。 輸入字段可以重新排列,文本可以優化,漸變背景顏色可以改變,排版內容可以改變。 您的表單可以發佈在不同的頁面或博客內,以您方便的為準。

如何將 Contactor 7 頁面添加到 Elementor?

信用:foliovision.com

這個問題沒有萬能的答案,因為將接觸器 7 頁面添加到 Elementor 的過程會因您嘗試添加的特定接觸器 7 頁面而異。 但是,一般來說,您需要先在 Elementor 中創建一個新頁面,然後使用“添加頁面”按鈕將聯繫人 7 頁面添加到該頁面。 添加接觸器 7 頁面後,您可以使用各種 Elementor 工具根據自己的喜好對其進行自定義。

Contact Form 7 是一個 WordPress 聯繫表單構建器,已經存在了很長一段時間。 Contact Form 7 插件不包含允許您直接將其與 Elementor 集成的內置功能。 通過使用第三方插件和插件,例如 PowerPack Addons for Elementor,您可以設計 Contactform 7 以滿足您的特定需求。 在下拉菜單中,選擇 Contact Form 7。使用 elementor 編輯器,您可以創建新頁面或編輯現有頁面。 您可以將剛剛創建的小部件拖放到剛剛創建的頁面上。 為您的表單添加有吸引力且獨特的標題和描述是一種選擇。

此外,無需運行任何代碼即可顯示驗證消息。 可以使用聯繫表 7 樣式器小部件將自定義樣式添加到 PowerPack 聯繫表 7 中的單選按鈕。 通過更改排版、添加背景和文本顏色以及配置邊框和邊距設置,您可以輕鬆自定義您的消息。 PowerPack Elementor 插件附帶 80 多個小部件和 200 多個預先製作的頁面和部分模板。

Elementor 聯繫表不起作用

學分:WordPress

如果您的 Elementor 聯繫表無法正常工作,您可以檢查一些事項。 首先,確保您在“收件人”字段中輸入了正確的電子郵件地址。 接下來,檢查表單的操作 URL 以確保它是正確的。 最後,檢查電子郵件通知設置以確保它們已打開。

Elementor 聯繫表簡碼

向您的網站添加聯繫表單的最簡單方法是使用聯繫表單簡碼。 有許多可用的聯繫表單簡碼,但最受歡迎的是 [contact-form-7] 簡碼。 此短代碼可用於創建簡單的聯繫表單或更複雜的包含多個字段的聯繫表單。 要使用 [contact-form-7] 短代碼,只需將其添加到頁面內容或發布您希望顯示聯繫表單的位置。 然後,用所需的字段和值填寫短代碼。 例如,要創建一個包含姓名字段、電子郵件字段和消息字段的簡單聯繫表單,您可以使用以下簡碼:[contact-form-7] name=”Your Name” email=”[email protected] ” message=”Your Message” [/contact-form-7] 此簡碼將創建一個包含指定字段的聯繫表單。 姓名和電子郵件字段是必需的,但消息字段是可選的。 如果您想在聯繫表單中添加其他字段,只需將它們添加到簡碼中。 例如,要添加電話號碼字段,您可以使用以下短代碼:[contact-form-7] name=”Your Name” email=”[email protected]” phone=”Your Phone Number” message=”Your Message ” [/contact-form-7] 您還可以指定表單的提交方式。 默認情況下,表單將通過電子郵件提交,但您也可以指定一個 URL 來提交表單數據。 例如,要將表單數據提交到 URL,您可以使用以下短代碼:[contact-form-7] name=”Your Name” email=”[email protected]” action=”http://example.com /form-handler” message=”Your Message” [/contact-form-7] 此短代碼會將表單數據提交到指定的 URL。 表單數據將作為 GET 請求提交,因此數據將在 URL 中可見。 如果要將表單數據作為 POST 請求提交,也可以指定方法屬性。 例如,將表單數據作為 POST 提交

Mad Lemmings 向您展示瞭如何使用 Elementor:三種簡單的方法來做到這一點。 所有這些選項都很簡單,但根據您的要求和所需的插件,您可能需要升級它們。 Elementor Pro 插件是最常見和最簡單易用的插件。 我一直在考慮的另一個選擇是 WPForms。 我的客戶喜歡使用此表單構建器,而不是標準的聯繫表單 7。如果您接受聯繫表單 7 默認設置,則 Elementor 可以完全簡單地用於創建聯繫表單。 要創建包含姓名、電子郵件地址、主題和消息的基本聯繫表單,您必須首先下載並安裝插件。

在 Contact Force 7 中,我發現很難理解如何通過表單發送電子郵件消息(我也可以使用表單執行此操作)。 WPForms 存在幾個問題,這是一個基於文本的表單構建器,草率且容易出錯。 一些 Elementor 插件開發人員創建了一個插件,允許您編輯和設置表單樣式。 重要的是要記住,並非所有這些都始終是最新的。 您可以在頁面右側看到上次更新日期以查看更新時間。

如何將聯繫表添加到您的頁面

如果您使用的是可視化編輯器,請導航到小部件面板並將聯繫表單小部件拖到您的頁面上。 如果您包含聯繫表單短代碼,它將被添加到您的頁面內容中。

Elementor 聯繫表

Elementor 聯繫表是與客戶保持聯繫並從他們那裡獲得反饋的最佳方式之一。 這是一個簡單易用的表格,可以根據您的需要進行定制。 您可以添加字段、更改佈局,甚至添加自定義 CSS 以使其看起來完全符合您的要求。

即使訪問者不知道您的電子郵件地址,您也可以使用聯繫表格聯繫他們。 使用 WPForms 插件設置聯繫表單是最簡單的方法。 因為它與 Elementor 頁面構建器集成,所以它是 Elementor 網站的理想選擇。 按照這些說明,您將學習如何使用此插件和 Elementor 創建聯繫表格。 任何使用 WPForms 的人都會發現它使用起來非常簡單。 在表單構建器的左側,選擇設置,然後選擇通知。 在右側,您可以找到可以添加到聯繫表單中的所有字段。

您還可以上下拖動字段來移動它們。 在第 4 步中,Elementor 應該包含一個聯繫我們頁面。 Elementor 可以配置為使用表單構建器工具創建聯繫表單。 第六步是為您的公司創建一個 Elementor 聯繫我們頁面。 您唯一需要做的就是單擊屏幕底部的綠色發布按鈕。 使用該插件時,您可以輕鬆更改文本顏色、排版和背景顏色。 通過將您最喜歡的電子郵件營銷服務與表單相結合,您可以連接到它。 使用 WordPress 創建聯繫表單就像使用聯繫表單插件一樣簡單。

如何在 Elementor 中更改聯繫表?

導航到 Elementor 編輯器安裝插件後,所有小部件都將在編輯器中可見。 找到 Contact Form 7 小部件後,將該小部件拖放到新列中。 填寫完表格後,您將被帶到“編輯聯繫表格7”部分。

Forminator 的開發者 API 是開放且可訪問的

沒有比使用它作為起點更好的方法在 Forminator 之上構建新的東西了。 可以使用 Forminator 開發者 API 訪問平台的所有數據和功能。 如果您有興趣了解有關鉤子和過濾器的更多信息,請參閱我們的示例。
Forminator WordPress 插件允許您創建自定義表單並與其他應用程序集成。 因為它是免費的並且對數百萬用戶開放,所以您可以向您的 WordPress 網站添加功能或構建您自己的應用程序。
您可以使用 Forminator 開發人員 API 獲得對平台、其所有功能和所有數據的完全訪問權限。

Elementor 頁面構建器

Elementor 是 WordPress 的頁面構建器插件,可讓您在幾分鐘內創建漂亮、響應迅速的 WordPress 頁面,而無需編寫任何代碼。 Elementor 帶有一個強大的拖放編輯器,可讓您輕鬆添加、刪除和重新排列頁面上的元素。 您還可以使用 Elementor 創建自定義 WooCommerce 產品頁面、定價表等。

Elementor 是一個非常直觀和流行的前端 WordPress 網站構建器。 有了這個應用程序,用戶可以通過簡單的拖放和使用 90 多個小部件來訪問大量的自定義選項。 Elementor 通過允許添加登錄頁面、彈出窗口、動畫和表單,為設計體驗增加了一層新的交互性。 Elementor 是一個流行的 WordPress 網站構建器。 您無需成為編碼專家即可開始使用,您可以在幾分鐘內創建一個網站,包括電子商務網站。 截至 2016 年 8 月,Elementor 擁有超過 3,000,000 名活躍用戶。