如何在 WordPress 表單中添加地址自動完成字段?
已發表: 2023-02-06想知道如何將地址自動完成 WordPress 表單添加到您的網站? 那麼,這篇文章正是您現在所需要的。
如果您的 WordPress 表單有地址字段,我們建議您為其添加自動完成功能。 這樣,您的用戶可以更輕鬆地填寫地址字段並成功提交表單。
這就是為什麼我們準備了有關如何創建地址自動完成 WordPress 表單的詳細指南。 所以,讀到最後。
但在本教程之前,讓我們討論一下地址自動完成功能的好處以及將其添加到表單的最佳方式。
目錄
地址自動完成選項對在線表格有何幫助?
您可以為任何 WordPress 表單使用常規地址字段。 那麼,為什麼要添加地址自動完成選項呢?
那麼,以下是地址自動完成選項有用的一些重要方式:
- 地址自動完成字段會根據用戶的輸入自動向他們推薦地點。
- 用戶可以從可用的地址建議列表中選擇準確的地址。
- 由於用戶不必鍵入完整地址,因此他們可以相對更快地填寫表格。
- 自動完成功能使表單填寫變得簡單快捷。 這有助於增加成功的表單提交並減少表單放棄。
因此,在您的表單中包含一個自動完成的地址字段是明智的。
但是,WordPress 默認不提供此功能。 那麼,您最好的選擇是什麼?
我們將在下一節介紹添加地址自動完成字段的最佳方法。
創建地址自動完成 WordPress 表單的最佳方式
由於 WordPress 默認不允許添加地址自動完成功能,因此您將不得不依賴插件。
正確的 WordPress 插件可以讓您輕鬆地將功能添加到您的表單中。 Everest Forms 就是這樣一種插件。

流行的拖放式表單構建器插件可能是您 WordPress 網站的完美補充。
這個強大的工具可以做到這一切! 它允許您創建自定義表單,而無需觸及一行代碼。
您可以使用它的 20 多個表單字段來構建聯繫表單、請假請求表單、訂單表單或您需要的任何表單。
此外,它提供了一個地址字段,您可以在其中輕鬆啟用自動完成選項。 因此,我們推薦 Everest Forms 插件作為為您的表單配備此功能的最佳方式。
如何在 WordPress 表單中添加地址自動完成字段?
在本教程中,我們使用 Everest Forms 來演示製作地址自動完成 WordPress 表單的過程。
按照以下 7 個簡單步驟在您的表單中添加 WordPress 谷歌地址自動完成選項。
第 1 步:安裝並激活 Everest Forms Pro
首先在您的站點上安裝並激活 Everest Forms Pro 插件。 此高級版本在核心免費 Everest Forms 插件之上運行。
因此,您需要設置插件的免費版和高級版才能使地址自動完成功能正常工作。
注意:您需要高級版本,因為提供自動完成功能的 Geolocation 附加組件是高級擴展。
它在 Plus 計劃及更高版本中可用。 因此,您必須購買 Plus、Agency 和 Professional 中的任何計劃才能獲得附加組件。
我們有一個單獨的指南,介紹如何在您的網站上正確設置 Everest Forms Pro。 因此,如果您需要幫助安裝和激活插件,請檢查一下。
第 2 步:安裝並激活地理定位插件
如果您已正確設置 Everest Forms Pro,您應該能夠訪問所有可用的附加組件。 請記住,您可以訪問的附加組件取決於您購買的計劃。
因此,在您的 WordPress 儀表板中打開Everest Forms >> Add-ons 。

向下滾動以找到Geolocation插件並單擊Install Addon 。 要完成安裝,請在之後按激活按鈕。

這將設置附加組件供您在 WordPress 表單中使用。
第 3 步:從 Google 控制台獲取 API 密鑰
第三步是從 Google 控制台獲取 API 密鑰。 這將幫助您將 Everest Forms 插件連接到 Google 控制台。
首先,訪問 Google 控制台儀表板。 您必須通過您的Google 帳戶登錄才能訪問此信息中心。

然後,從儀表板頂部選擇您的項目。

如果您還沒有項目,可以通過單擊新建項目來創建一個。 接下來,為您的項目命名並按Create 。

選擇項目後,您將到達該項目的APIs & Services頁面。

假設您沒有自動重定向到此頁面。 在這種情況下,您可以每年從左上角的導航菜單中打開它。
按菜單並打開APIs & Services >> Enabled APIs & Services 。

在這裡,單擊+ENABLE APIS AND SERVICES 。

在 API 庫中,搜索Places API並啟用它。

注意:要成功啟用 API,您必須有一個計費帳戶。 因此,在繼續之前為您的 Google Cloud Console 啟用計費。

啟用 API 後,導航至APIs & Services >> Credentials 。 現在,點擊+Create Credentials然後選擇API Key 。

這會為您生成一個新的API 密鑰。 但在復制 API 密鑰之前,您必須對其添加一些限制。 為此,單擊Edit Key 。


首先,你必須設置一個應用程序限制。 這讓您可以限制哪些網站、IP 地址或應用程序可以使用 API 密鑰。 在我們的例子中,讓我們選擇Websites 。

接下來,添加 API 密鑰有效的網站,然後按完成。 如果需要,您可以添加多個網站。

之後,您必須通過選擇限制密鑰單選按鈕來設置API 限制。 這讓您的密鑰知道它可以調用哪些已啟用的 API。
因為我們只需要 Places API,所以我們從下拉列表中選擇它。 您可以根據需要啟用和添加更多 API,例如 Maps JavaScript API。

最後,點擊保存按鈕。
您現在要做的就是複制密鑰以備後用。 請妥善保管它,因為下一步需要它。

第 4 步:將 API 密鑰添加到地理位置設置
回到您的 WordPress 儀表板,轉到Everest Forms >> Settings >> Geolocation 。

將您複製的API 密鑰粘貼到Google Places API 密鑰字段中。 然後,按保存更改按鈕。
這樣就完成了 Google Places API 和 Everest Forms 之間的連接。
在Geolocation設置中還有一個選項Current Location 。 當您打開此選項時,您的表單會自動檢測並在“地址”字段中填寫用戶的當前位置。
它是完全可選的,因此是否打開它取決於您的要求。
第 5 步:創建一個帶有地址字段的新表單
您已成功將 Everest Forms 連接到 Google Places API。 但是,您仍然需要適用自動完成地址功能的表單。
為此,您必須使用地址字段創建一個新的 WordPress 表單。
問題是:你製作什麼類型的表格? 好吧,這完全取決於你!
Everest Forms 最好的地方在於它可以讓你創建你需要的任何類型的表單。 聯繫表、調查表、工作申請表、預訂表等。
因此,轉到Everest Forms >> Add New 。
Everest Forms 為各種表單提供了多個預建模板。 因此,如果時間不夠,您可以自定義其中之一。

但從頭開始設計表單同樣簡單! 只需拖放所需的字段並自定義它們。
我們將從頭開始為本指南構建一個帶有地址字段的簡單聯繫表單。
因此,單擊從頭開始。 接下來,輸入表單標題並點擊Continue 。

這會將您帶到表單生成器。 如您所見,所有表單字段都在左側組合在一起。 您可以將它們拖放到右側的表單行中。

因此,將您需要的任何字段添加到表單中,例如Name 、 Email 、 Subject 、 Message ,最重要的是Address 。

地址自動完成 WordPress 表單完成後,按頂部的“保存”按鈕保存您的新表單。

第 6 步:為地址字段啟用地址自動完成
對於每個字段,您都會獲得大量自定義選項。 同樣,地址字段有多個選項,其中之一是地址自動完成功能。
雖然我們在這里關注地址字段,但請確保您也自定義了其他字段。
單擊要編輯的字段; 它的自定義選項將在左側打開。

從這裡,您可以更改字段Label 、 Description 、 Field Visibility等。您還可以啟用Required 、 Enable Tooltip 、 Hide Label和添加CSS Classes 。
此外,您還可以為各個字段設置條件邏輯。
但是讓我們回到我們的亮點領域。 當您單擊“地址”字段時,“字段選項”會顯示與我們上面討論的類似的選項。
但是,高級選項包括為地址字段策劃的一些功能。

例如,您可以更改Address Line 1 、 Address Line 2 、 Country等的佔位符和默認值。另外,您可以從Default Countries List中選擇要向用戶提供的國家。

最重要的是,您只需勾選複選框即可啟用地址自動完成功能。
點擊保存按鈕,您的地址字段將自動向填寫表格的用戶推薦地點。

如果你想顯示谷歌地圖而不是文本地址,你可以從樣式下拉列表中選擇地圖。 選擇Address With Map以顯示兩者。
我們有一篇關於將 Google 地圖添加到您的表單的文章。 因此,如果您有興趣,請檢查一下。
第 7 步:在您的站點上顯示地址自動完成 WordPress 表單
恭喜! 您正處在本教程的最後一步!
由於地址自動完成 WordPress 表單已準備就緒,您必須將其添加到您網站的前端。
Everest Forms 讓您只需幾個簡單的步驟即可完成。
首先打開要添加 WordPress 表單的頁面或帖子。
進入古騰堡編輯器後,選擇塊插入器 ( + ) 按鈕。

搜索Everest Forms塊並通過單擊將其添加到頁面/帖子。
接下來,從下拉列表中選擇帶有地址自動完成字段的表單。 這會自動將表單添加到頁面/帖子。

最後,點擊頂部的更新按鈕。
您還可以將表單添加到全新的頁面/帖子。 只需按照相同的步驟並在最後按“發布”按鈕即可。 你完成了!
您的用戶現在可以從前端訪問地址自動完成 WordPress 表單。
包起來
正如您現在所知道的,構建一個 WordPress 谷歌地址自動完成表單非常容易。 特別是當您手邊有 Everest Forms 插件時。
這個令人難以置信的插件可讓您快速將表單連接到 Google 控制台。 因此,您的用戶可以使用自動完成功能輕鬆填寫地址字段。
但是你知道嗎? Everest Forms 可以提供更多。
您可以使用它來自定義電子郵件模板、安排表單提交、自動填充表單字段等。
在我們的博客上閱讀有關此插件的所有信息。 如果您是視覺學習者,請查看我們的 YouTube 頻道以獲取簡單的視頻教程。
此外,請關注 Twitter 和 Facebook 以獲取每週帖子的更新。