如何将谷歌地图添加到 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,您还可以将转发器字段添加到表单并更改提交按钮的颜色。 您甚至可以在提交表单后发送确认电子邮件。

但这只是冰山一角。 如果您有兴趣了解有关此插件的更多信息,可以访问我们的博客和官方文档页面。

另外,别忘了关注我们 推特 和脸书 接收更多有用文章的更新。