如何將谷歌地圖添加到 WordPress 聯繫表?

已發表: 2022-05-30

如果您正在尋找將 Google 地圖添加到 WordPress 聯繫表單的最佳方式,那麼本文是您的完美指南。

將 Google 地圖添加到聯繫表單可幫助您跟踪用戶的位置。 您可以使用這些數據來提高對話率、開展有效的營銷活動等。

因此,在本指南中,您將學習以最有效的方式將 Google 地圖添加到 WordPress 聯繫表單。

但在此之前,讓我們了解為什麼您應該在聯繫表單中添加 Google 地圖。

目錄

為什麼要在聯繫表單中添加 Google 地圖?

將 Google 地圖添加到聯繫表有助於您的網站以多種方式發展。

首先,它允許您收集有關用戶位置的數據。 因此,將來,您可以在營銷您的品牌時針對特定的客戶和用戶。

此外,了解用戶的位置可以改善您的地理位置定位,並且您可以向他們展示個性化的內容。 反過來,這會大大提高您的潛在客戶、轉化率並增加您的網站收入。

因此,這些是將 Google 地圖添加到聯繫表單的一些主要好處。 現在,讓我們知道最好的方法。


將 Google 地圖添加到 WordPress 聯繫表的最佳方式

您可以使用 Google Maps WordPress 插件將 Google Maps 添加到您的聯繫表單中。 或者,您可以使用支持 Google Maps 集成的表單插件。 WordPress 市場上有許多這樣的插件。

但是,與眾不同的是 Everest Forms,一個強大的 WordPress 表單構建器插件。

為什麼珠穆朗瑪峰形式? 嗯,它是一個多功能的插件,具有廣泛的特性和功能。 它是構建任何形式的完整解決方案。 捐贈表格、工作申請表格、酒店預訂表格; 你的名字!

此外,它具有用戶友好的界面。 因此,您可以使用簡單的拖放方法構建任何類型的表單。

最重要的是,它提供了地理定位插件,允許您通過表單收集用戶的位置數據。 您可以根據 IP 地址獲取用戶的數據,例如國家、城市、郵政編碼和緯度/經度。

使用相同的插件,您將能夠在前端的聯繫表單中添加地圖。

迄今為止,已成功積累了100000+用戶的信任。 因此,毫無疑問,這是將 Google 地圖添加到 WordPress 聯繫表單的最佳插件選項之一。


使用 Everest 表單將 Google 地圖添加到 WordPress 聯繫表單

將 Google 地圖添加到您的聯繫表單中非常容易。 只需按照我們在下面解釋的步驟操作,您就會立即獲得帶有 Google 地圖的 WordPress 聯繫表格。

1. 安裝並激活 Everest Forms Pro 和 Geolocation 插件

首先,讓我們澄清一下,無論您使用哪個插件將 Google 地圖添加到您的聯繫表中,您都需要購買高級插件。

同樣,您還需要購買 Everest Forms 的高級計劃才能訪問此功能。 但不要擔心; 這個插件的高級計劃價格實惠。

因此,您可以通過訪問其官方網站 WPEverest 購買其高級計劃。

然後查看本文以安裝和激活 Everest Forms Pro

現在,我們相信您已經成功激活 Everest Forms Pro。 因此,要激活 Geolocation 插件,請轉到 WordPress 儀表板的Everest Forms >> Add-ons部分。

珠穆朗瑪峰形式插件

通過向下滾動,您將看到Geolocation插件,然後單擊Install Add-on選項。

地理位置插件

然後,按下激活按鈕。

激活地理定位插件

2.設置地理定位插件

現在您已成功激活 Geolocation 插件,是時候生成 API(應用程序編程接口)密鑰了。

一般來說,API 將一個程序連接到另一個程序,並控制這些程序之間的請求。 然而,API 密鑰將這些程序相互連接以共享數據並連接到系統。

一、從谷歌控制台生成API Key

請記住,您需要一個計費帳戶才能從 Google 控制台生成 API 密鑰,以便將 Google 地圖添加到您的聯繫表單中。 所以訪問他們的官方賬單頁面來獲得一個。

現在,購買結算帳戶後,轉到您的 Google 控制台儀表板。 然後,單擊我的第一個項目

在 Google 控制台中添加項目

之後選擇New Project

添加新項目

然後,按儀表板左側的漢堡菜單並單擊APIs & Services

API 和服務

之後,它將打開 API 庫,然後在此處按+ 啟用 APIS 和服務按鈕。

啟用 API 和服務

啟用後,您將被定向到一個新頁面,您需要在其中搜索Places API選項。

搜索地點 API

找到它後,單擊它,然後按啟用按鈕。

啟用地點 API

啟用它時,單擊將出現在左側頂部的漢堡菜單。 然後,導航到APIs & Services >> Credentials。

Google 控制台憑據

然後,單擊+ CREATE CREDENTIALS部分。 並從這裡選擇API 密鑰選項以生成 API 密鑰。

創建憑證和 API

現在,API 密鑰將出現在彈出窗口中。 您需要做的就是複制它。



二、 在 Everest 表單中將 API 密鑰添加到地理位置設置

現在,返回您的 WordPress 儀表板並將 API 密鑰添加到珠穆朗瑪峰表單中的地理位置設置

複製密鑰後,返回您的 WordPress 儀表板。 導航到Everest Forms >> Settings ,然後單擊頂部的Geolocation選項。

地理位置設置

在這裡,您將看到Google Places API 密鑰選項,您需要在其中粘貼您之前複製的 API 密鑰。 之後,按下面的保存更改按鈕。

粘貼 Google Place API 密鑰

3.創建一個新的聯繫表

現在您已經生成了一個 API 並將其添加到您的網站,是時候創建一個聯繫表單了。

使用 Everest Forms 創建聯繫表格是小菜一碟。 首先,轉到您的 WordPress 儀表板,然後單擊Everest Forms >> Add New

添加新表格

Everest Forms 提供了一系列模板,您只需單擊一個按鈕即可使用這些模板,或者從頭開始構建您的表單。

在這裡,我們將從頭開始構建表單,並將其命名為Contact Form

創建聯繫表

然後,您可以從“添加字段”部分拖放聯繫人表單中的字段。

使用珠穆朗瑪峰表格建立聯繫表格

此外,使用 Everest 表單,您可以更改表單的字段標籤元鍵描述等。為此,請單擊任何表單字段並轉到字段選項並進行更改。

Everest 表單字段選項

如果您在表單構建過程中需要更多幫助,請閱讀我們關於如何使用 Everest Forms 創建聯繫表單的文章。

在完成所有必要的自定義之後,請確保通過單擊頂部的“保存”按鈕來保存它們。 您還可以在前端預覽表單的外觀。


4. 將 Google 地圖地址字段添加到您的表單

首先,您需要在聯繫表單中添加地址字段,以便在您的聯繫表單中添加 Google 地圖地址功能。

因此,轉到Add Fields部分,然後向下滾動到Advanced Fields

Everest Forms 高級字段選項

然後,將地址字段添加到您的聯繫表單中。

添加地址字段

之後,單擊右側的地址字段以在左側面板上打開其高級選項

高級選項

默認情況下,表單顯示一個文本地址。 由於我們需要向表單添加地圖而不是文本地址,因此從下拉列表中將樣式選項更改為地圖

在聯繫人字段上添加地圖

這會將地圖和地址行 1添加到聯繫表單中。 當用戶在地圖上選擇一個地點時,下面的地址字段會自動填充所選位置。

而已! 您已使用 Everest Forms 成功地將 Google 地圖添加到 WordPress 聯繫表單!


5. 發布 WordPress 表單

完成上述所有步驟後,就可以發布您的聯繫表格了。

只需從表單構建器頂部複製您的聯繫表單簡碼。

表單簡碼

然後,打開要展示表單的帖子或頁面。 在這裡,使用塊插入器 ( + ) 添加一個簡碼塊。

添加簡碼塊

然後,將短代碼粘貼到塊中。

粘貼簡碼

最後,點擊左上角的發布按鈕。

發布表格

或者,要發布您的聯繫表格,請單擊如圖所示的塊插入器 ( + ) 按鈕。 在搜索欄中輸入 Everest Forms,然後在結果中出現該塊時單擊它。

添加珠穆朗瑪峰形式

之後,從下拉菜單中選擇您剛剛創建的聯繫表單並發布

這樣,您與穀歌地圖的聯繫表將在您的網站上生效。

使用 Google 地圖顯示聯繫表

結論

因此,這就是我們關於如何將 Google 地圖添加到 WordPress 聯繫表單的文章的全部內容。 如您所見,使用 Everest Forms 之類的插件非常簡單。 然而,這還不是全部。

使用 Everest Forms,您還可以將轉發器字段添加到表單並更改提交按鈕的顏色。 您甚至可以在提交表單後發送確認電子郵件。

但這只是冰山一角。 如果您有興趣了解有關此插件的更多信息,可以訪問我們的博客和官方文檔頁面。

另外,別忘了關注我們 推特 和臉書 接收更多有用文章的更新。