西安佛系SEO西安佛系SEO西安佛系SEO

如何在联系人表单中嵌入谷歌地图(使用地图Pin)

“西安seo”是否要在网站的联系人表单上显示地图?

您可以使用地理位置预先填充用户的地址,并通过在地图上放置pin来指示其位置。这使得填写表格更容易、更快,从而提高了完成率。

在本文中,我们将向您展示如何使用地图pin在联系人表单中嵌入谷歌地图。

为什么要在联系人表单中嵌入谷歌地图?“西安seo”当您创建WordPress网站时,您可能会添加一个联系表单,以便访问者可以轻松地与您联系您的产品和服务。如果您的企业有一个物理位置,那么您可能还会添加一个您自己位置的谷歌地图,以鼓励人们访问您的商店。

许多企业主不知道的是,您可以使用地理位置自动填写联系人表单上的地址字段,并在地图上显示用户的位置。这改善了总体用户体验,并有助于减少表单放弃。

“西安SEO”了解用户的位置还可以让您使用地理位置定位来显示个性化内容并提高转化率。

说到这里,让我们看看如何在联系人表单中嵌入谷歌地图。

如何在联系人表单

中嵌入谷歌地图在本教程中,我们将使用WPForms,这是WordPress的最佳联系人表单插件。它允许您使用简单的拖放表单生成器轻松创建任何类型的表单。

有一个免费版本的WPForms,提供创建基本联系人表单所需的所有功能。然而,在本教程中,我们将使用WPForms Pro,因为它包含Google Map插件。

您需要做的第一件事是安装并激活WPForms插件。有关更多详细信息,请参阅我们关于如何安装WordPress插件的分步指南。

激活后,您需要访问WPForms»设置页面以输入许可证密钥。您可以在WPForms帐户区中找到此信息。确保单击“验证密钥”按钮激活许可证。

接下来,您需要导航到WPForms»加载项并找到地理位置加载项。您可以使用屏幕顶部的搜索选项,或者只需滚动浏览可用的插件。

找到该插件后,应单击“安装插件”按钮安装该插件。

地理位置加载项激活后,您需要配置其设置。要执行此操作,请导航到WPForms»设置并单击地理位置选项卡。

在此页面上,您需要选择地理位置提供程序。对于本文,我们将选择Google Places API。

您还应该单击“当前位置”复选框。这将在用户填写联系人表单时检测并自动完成地址,节省时间并提高准确性。

接下来,您需要向下滚动到Google Places API设置。您将被要求填写您的Google API密钥。您可以从Google获取密钥,然后将其粘贴到字段中。在下一节中,我们将向您展示如何做到这一点。

生成Google Places API密钥

您可以访问Google云控制台网站获取Google Places的API密钥。

系统将要求您从下拉菜单中选择您所在的国家,并同意服务条款。在某些国家,您还可能有机会注册邮件列表。

准备好进入下一步时,单击“同意并继续”。

接下来,您需要为API密钥选择一个项目。只需单击“选择项目”,然后从列表中单击要使用的项目。

如果您之前没有创建过项目,或者这是一个尚未添加到Google的新网站,则应单击“新建项目”进行设置。

注意:谷歌将要求您启用billin为了使用Google Places API,对该项目进行g。他们免费提供第一张300美元的地图,这足以覆盖我们在本教程中创建的简单地图嵌入。流量较小的网站不需要支付任何费用,他们会在收取任何费用之前请求您的许可进行升级。

您现在应该在“API和服务”页面上,您可以在该页面上启用在站点上显示Google地图所需的API。您需要单击页面顶部的“+启用API和服务”按钮。

这将带您访问Google的API库,您需要在其中启用三种不同的映射API。

您可以使用页面顶部的搜索功能或单击“地图”部分旁边的“全部查看”链接来查找它们。

首先需要查找并启用Places API。找到它后,需要单击它。在下一页中,您应该单击“启用”按钮。

之后,您应该对地图JavaScript API和地理编码API执行相同的操作。

现在,您已经启用了这三个API,可以创建一个API密钥。

在左侧菜单中,您需要导航到API&Services»凭据。

从这里,您可以单击屏幕顶部的“+创建凭据”按钮,然后选择“API密钥”选项。

您的API密钥将被创建并显示在弹出窗口中。在本教程后面的

中,您需要将该键复制到WPForm的设置中。现在,让我们看看如何对API键的使用施加一些限制。

限制您的Google Places API密钥

过度使用API密钥可能会使您脱离免费计划,并且成本超出您的预期。我们建议您限制密钥,以防止未经授权或意外使用。

要做到这一点,您需要单击上面屏幕截图中“API密钥创建”弹出窗口底部的“限制密钥”链接。

在下一页中,您可以设置许多不同的限制。第一个是“应用限制”。在本节中,您应该单击“http referers(web站点)”选项。然后,该密钥将仅在网站上使用。

接下来,您应该确保它仅在您自己的网站上使用。为此,您应该向下滚动到“网站限制”部分,然后单击“添加项目”按钮。

现在,您应该使用pattern*示例在“New item”字段中键入您的网站域名。com/*。

如果您将在多个网站上使用谷歌地图,那么您可以单击“添加项目”按钮,并根据需要添加多个域。

现在您已经将API密钥限制为仅限于您自己的网站,还可以将其限制为仅与您上面添加的Google API一起使用。

您需要向下滚动到页面的“API限制”部分,并选择“限制键”选项。这将显示一个下拉列表,您应该在其中选中“Geocaching API”、“Maps JavaScript API”和“Places API”框。

完成后,应单击“确定”链接存储设置。最后,请确保单击页面底部的“保存”按钮以激活您选择的所有限制。

请注意,设置可能需要5分钟才能生效。

将Google API键添加到WPForms设置

您现在将看到API键与其他可用的API键一起列出。您应该单击复制图标,以便将密钥添加到WPForms地理位置设置页面。

请注意,如果您需要更改任何API的设置或限制,那么您可以单击右侧

上的编辑图标,现在您需要返回您的网站位于WPForms»Settings»Geolocation页面。

出现后,将密钥粘贴到WPForms设置中的Google Places API字段中。完成后,请确保单击“保存设置”按钮。

注意:Google Places要求您的站点具有SSL证书。要了解如何获取SSL证书,请查看我们的初学者指南,了解如何获取免费SSL证书。

在WordPress中创建带有嵌入式Google地图的联系人表单

现在您已经配置了WPForms和Google Places,可以在WordPress中创建联系人表单了。您可以按照我们关于如何在WordPress中创建联系人表单的指南开始。

创建基本表单后,需要添加地址字段。您可以使用地址块或单行文本字段。在本教程中,我们将使用单行文本字段。

只需将单行文本块拖到表单上。

接下来,我们将自定义字段的设置。为此,需要单击该字段以显示单行文本设置。

首先,您应该将字段的标签更改为“Address”。这将向用户明确他们应该在字段中键入什么。

之后,需要更改字段的设置,以便它在表单上显示映射。为此,您需要单击“高级”选项卡。

一旦出现,您应该在设置底部查找“启用地址自动完成”选项,并将其切换到“打开”位置。然后,您将看到另一个选项“显示地图”,您也应该启用该选项。您可以选择在字段上方或下方显示地图。

将联系人表单添加到网站

将联系人表单添加到网站的最简单方法是单击“嵌入”按钮。您可以在表单编辑器屏幕顶部的“保存”按钮旁边找到它。

将询问您是将表单添加到现有表单还是创建新页面。

对于本教程,我们将单击“创建新页面”按钮。

接下来,您应该为页面命名,然后单击“开始!”按钮

将创建具有该名称的新页面,并将自动添加您的联系人表单。

您只需单击“发布”按钮来推送表单live

查看联系人表单中的谷歌地图

当用户访问您的联系人表单时,会询问他们是否希望允许您的网站访问您的位置。

“西安SEO”如果单击“允许”按钮,则其当前位置将输入地址字段,并且该位置的pin将添加到地图中。

此自动完成功能可使访问者更快、更容易地键入地址,从而节省时间。

如果需要更改地址,则可以简单地键入新地址或将pin拖到地图上的其他位置。

如何在表单“西安SEO”上查看用户位置数据启用地理定位后,WPForms还会在填写表单时记录每个用户的位置。了解用户的位置可以帮助您找到更好的潜在客户。

您需要导航到WPForms»条目,然后单击您的联系人表单。

您现在将看到用户为该表单填写的条目列表。

要查看特定条目,只需单击右侧的“查看”链接。

您现在将看到用户填写的表单数据,例如他们的姓名、业务电子邮件、业务电话号码以及一些位置数据。

这包括谷歌地图上的pin码、用户的位置、邮政编码和国家,以及他们的大致纬度和经度。

当然,如果用户没有授予允许窗体知道其位置,则不会显示位置数据。

仅此而已,您已经成功地在联系人表单中添加了谷歌地图。您还可以使用WPForms在WordPress中构建调查,创建付款表单以接受在线付款,等等。

我们希望本教程能够帮助您了解如何在联系人表单中嵌入谷歌地图。您可能还想学习如何举办赠品或竞赛,或者查看我们为所有商业网站挑选的最佳WordPress插件。

如果你喜欢这篇文章,那么请订阅我们的YouTube频道,获取WordPress视频教程。你也可以在推特脸书上找到我们。

本文由西安SEO刘毅(www.mmpyo.cn)收集于网络不代表本站观点,如果您还想了解更多关于SEO的文章,请关注刘毅SEO,(微信:gh2636484259)

免责声明:

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理(2636484259@qq.com)。敬请谅解!