如何在聯繫表格中嵌入谷歌地圖（使用地圖圖釘）

您想在您網站的聯繫表上顯示地圖嗎？

您可以使用地理位置來預先填寫用戶的地址，並通過在地圖上放置圖釘來指示他們的位置。 這使得填寫表格更容易和更快，從而提高了完成率。

在本文中，我們將向您展示如何使用地圖圖釘將 Google 地圖嵌入到聯繫表單中。

為什麼在您的聯繫表中嵌入谷歌地圖？

當您創建 WordPress 網站時，您很可能添加了一個聯繫表格，以便訪問者可以輕鬆就您的產品和服務與您取得聯繫。

如果您的企業有實體位置，那麼您可能也添加了您所在位置的 Google 地圖，以鼓勵人們訪問您的商店。

許多企業主不知道的是，您可以使用地理位置自動填寫聯繫表上的地址字段，並在地圖上顯示用戶的位置。 這改善了整體用戶體驗並有助於減少表單放棄。

了解用戶的位置還可以讓您使用地理位置定位來顯示個性化內容並提高轉化率。

話雖如此，讓我們來看看如何在聯繫表單中嵌入谷歌地圖。

如何在聯繫表中嵌入谷歌地圖

在本教程中，我們將使用 WPForms，這是 WordPress 的最佳聯繫表單插件。 它使您可以使用簡單的拖放表單構建器輕鬆創建任何類型的表單。

有一個免費版本的 WPForms 具有創建基本聯繫表單所需的所有功能。 但是，對於本教程，我們將使用 WPForms Pro，因為它包含 Google 地圖插件。

您需要做的第一件事是安裝並激活 WPForms 插件。 有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

激活後，您需要訪問WPForms » 設置頁面以輸入您的許可證密鑰。 您可以在您的 WPForms 帳戶區域中找到此信息。 確保單擊“驗證密鑰”按鈕以激活您的許可證。

接下來，您需要導航到WPForms » Addons並找到 Geolocation Addon。 您可以使用屏幕頂部的搜索選項，或者簡單地滾動瀏覽可用的插件。

找到它後，您應該通過單擊“安裝插件”按鈕來安裝插件。

現在地理定位插件已激活，您需要配置其設置。 為此，請導航至WPForms » 設置，然後單擊地理位置選項卡。

在此頁面上，您需要選擇一個地理位置提供商。 在本文中，我們將選擇 Google Places API。

您還應該單擊“當前位置”複選框。 這將在用戶填寫聯繫表時檢測並自動填寫地址，從而節省時間並提高準確性。

接下來，您需要向下滾動到 Google Places API 設置。 系統將要求您填寫您的 Google API 密鑰。 您可以從 Google 獲取您的密鑰，然後將其粘貼到該字段中。 我們將在下一節中向您展示如何做到這一點。

生成 Google Places API 密鑰

您可以通過訪問 Google Cloud Console 網站獲取 Google Places 的 API 密鑰。

系統會要求您從下拉菜單中選擇您所在的國家/地區並同意服務條款。 在某些國家/地區，您可能還會有機會註冊郵件列表。

當您準備好進入下一步時，請單擊“同意並繼續”。

接下來，您需要為 API 密鑰選擇一個項目。 只需單擊“選擇一個項目”，然後從列表中單擊您要使用的項目。

如果您之前沒有創建過項目，或者這是一個尚未添加到 Google 的新網站，那麼您應該點擊“新建項目”進行設置。

您現在應該位於“API 和服務”頁面上，您可以在其中啟用在您的網站上顯示 Google 地圖所需的 API。 您需要單擊頁面頂部的“+ 啟用 API 和服務”按鈕。

這將帶您進入 Google 的 API 庫，您需要在其中啟用三個不同的映射 API。

您可以使用頁面頂部的搜索功能或單擊“地圖”部分旁邊的“查看全部”鏈接找到它們。

首先，您需要找到並啟用 Places API。 找到它後，您需要單擊它。 在下一頁上，您應該單擊“啟用”按鈕。

之後，您應該對 Maps JavaScript API 和 Geocoding API 執行相同的操作。

現在您已經啟用了三個 API，您可以創建一個 API 密鑰。

在左側菜單中，您需要導航到APIs & Services » Credentials 。

在此處，您將能夠單擊屏幕頂部的“+ 創建憑據”按鈕，然後選擇“API 密鑰”選項。

您的 API 密鑰將被創建並顯示在彈出窗口中。

在本教程的後面，您需要將該密鑰複製到 WPForm 的設置中。 現在，讓我們看看如何對 API 密鑰的使用進行一些限制。

限制您的 Google Places API 密鑰

過度使用 API 密鑰可能會使您退出免費計劃，並且花費超出您的預期。 我們建議您限制密鑰以防止未經授權或意外使用。

為此，您需要單擊上面屏幕截圖中“已創建 API 密鑰”彈出窗口底部的“限制密鑰”鏈接。

在下一頁上，您可以設置許多不同的限制。 其中第一個是“應用程序限制”。 在本節中，您應該單擊“HTTP 引薦來源網址（網站）”選項。 然後密鑰將僅在網站上使用。

接下來，您應該確保它僅在您自己的網站上使用。 為此，您應該向下滾動到“網站限制”部分，然後單擊“添加項目”按鈕。

現在您應該使用*example.com/*模式在“新項目”字段中輸入您的網站域名。

如果您將在多個網站上使用 Google 地圖，則可以單擊“添加項目”按鈕並根據需要添加任意數量的域。

既然您已將 API 密鑰限制為僅用於您自己的網站，您還可以將其限制為僅與您在上面添加的 Google API 一起使用。

您需要向下滾動到頁面的“API 限制”部分並選擇“限制鍵”選項。 這將顯示一個下拉菜單，您應該在其中選中“Geocaching API”、“Maps JavaScript API”和“Places API”框。

完成後，您應該單擊“確定”鏈接來存儲您的設置。 最後，確保單擊頁面底部的“保存”按鈕以激活您選擇的所有限制。

請注意，設置可能需要 5 分鐘才能生效。

將 Google API 密鑰添加到 WPForms 設置

您現在將看到列出的 API 密鑰以及您可用的任何其他密鑰。 您應該單擊“複製”圖標，以便將密鑰添加到 WPForms 地理位置設置頁面。

請注意，如果您需要更改任何 API 的設置或限制，則可以單擊右側的編輯圖標

現在您需要返回您的網站，該網站仍應位於WPForms » 設置 » 地理位置頁面上。

在那裡，將密鑰粘貼到 WPForms 設置中的 Google Places API 字段中。 完成後，請確保單擊“保存設置”按鈕。

在 WordPress 中使用嵌入式 Google 地圖創建聯繫表格

現在您已經配置了 WPForms 和 Google Places，您可以在 WordPress 中創建聯繫表單了。 您可以按照我們關於如何在 WordPress 中創建聯繫表單的指南開始。

製作基本表單後，您需要添加地址字段。 您可以使用地址塊或單行文本字段。 對於本教程，我們將使用單行文本字段。

只需將單行文本塊拖到表單上。

接下來，我們將自定義該字段的設置。 為此，您需要單擊該字段以顯示單行文本設置。

首先，您應該將字段的標籤更改為“地址”。 這將使您的用戶清楚他們應該在該字段中輸入什麼。

之後，您需要更改字段的設置，以便它在表單上顯示地圖。 為此，您需要單擊“高級”選項卡。

在那裡，您應該在設置底部查找“啟用地址自動完成”選項並將其切換到“打開”位置。 然後，您將看到另一個選項“顯示地圖”，您也應該啟用它。 您可以選擇在字段上方或下方顯示地圖。

將聯繫表添加到您的網站

將聯繫表添加到您的網站的最簡單方法是單擊“嵌入”按鈕。 您會在表單編輯器屏幕頂部的“保存”按鈕旁邊找到它。

系統將詢問您是將表單添加到現有表單還是創建新頁面。

對於本教程，我們將單擊“創建新頁面”按鈕。

接下來，您應該為頁面命名，然後單擊“Let's Go！” 按鈕。

將創建一個具有該名稱的新頁面，並自動添加您的聯繫表格。

您需要做的就是單擊“發布”按鈕以實時推送表單。

在聯繫表中查看 Google 地圖

當用戶訪問您的聯繫表時，系統會詢問他們是否希望允許您的網站訪問您的位置。

如果他們單擊“允許”按鈕，那麼他們的當前位置將被輸入到地址字段中，並且該位置的圖釘將被添加到地圖中。

此自動完成功能可以讓您更快、更輕鬆地輸入他們的地址，從而節省訪問者的時間。

如果他們需要更改地址，則只需鍵入新地址或將圖釘拖到地圖上的其他位置即可。

如何在表單上查看用戶位置數據

啟用地理定位後，WPForms 還將在每個用戶填寫您的表單時記錄他們的位置。 了解用戶的位置可以幫助您找到更好的潛在客戶。

您需要導航到WPForms » 條目，然後單擊您的聯繫表。

您現在將看到用戶為該表單填寫的條目列表。

要查看特定條目，只需單擊右側的“查看”鏈接。

您現在將看到用戶填寫的表單數據，例如他們的姓名、企業電子郵件、企業電話號碼，以及一些位置數據。

這包括 Google 地圖上的圖釘、用戶的位置、郵政編碼和國家，以及他們的大致緯度和經度。

當然，如果用戶沒有授予表單知道其位置的權限，則不會顯示任何位置數據。

就是這樣，您已成功在聯繫表單中添加了 Google 地圖。 您還可以使用 WPForms 在 WordPress 中構建調查、創建支付表單以接受在線支付等等。

我們希望本教程能幫助您了解如何在聯繫表單中嵌入 Google 地圖。 您可能還想了解如何舉辦贈品或競賽，或查看我們為所有商業網站挑選的最佳 WordPress 插件的專家。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您也可以在 Twitter 和 Facebook 上找到我們。