如何在 WordPress 中创建 AMP 表单
已发表: 2020-07-07为了让网站在移动设备上加载得更快,谷歌开发了一个名为 Accelerated Mobile Pages 或 AMP 的项目。 而且,虽然它确实通过加快网页加载速度提供了出色的移动浏览体验,但它也会禁用您网站上的许多有用功能。 可以被认为是巨大损失的那些功能之一是联系表格。 由于 AMP 使用一组有限的 HTML 和 JavaScript,它无法在 AMP 页面上正确加载您的 WordPress 表单。 幸运的是,有一个简单的解决方案可用。 WPForms 是一个相当适合初学者的 WordPress 表单插件,可帮助您创建支持 AMP 的 WordPress 表单。 因此,在接下来的文章中,我们将详细解释如何使用 WPForms 在 WordPress 中创建 AMP 表单。

了解如何在 WordPress 中创建 AMP 表单
因此,AMP 对于使您的网站适合移动设备使用非常有用。 而且,安装和激活 WordPress 的官方 AMP 插件是在 WordPress 中使用 AMP 的先决条件。 激活后,该插件将自动为您的 WordPress 站点添加 Google AMP 支持。 但是,您可以通过从仪表板转到 AMP > 常规来更改您网站的 AMP 设置。 当您在 AMP 设置页面上时,您可以在您的网站上启用或禁用 AMP,还可以为 AMP 选择网站模式,并选择支持的模板。 配置 AMP 后,您必须在 WordPress 网站上创建与 AMP 兼容的联系表单。
使用 WPForms 创建 WordPress 表单
要启动该过程,您必须在您的站点上安装并激活 WPForms Lite 插件。 这是 WPForms Pro 插件的精简版。 WPForms 的专业版和精简版都允许您创建一个基本的 AMP 就绪联系表。 在这里,我们将讨论免费版本。 安装并激活插件后,您必须前往 WPForms > 添加新页面以创建新的 WordPress 表单。 在表单设置屏幕上,您将能够选择表单模板以快速开始。
如果您想从头开始,我们建议您选择空白表格。 然后它将打开表单构建器页面。 从这里,您可以添加或删除表单域。 要在表单中添加新字段,只需单击左侧面板中的表单字段,它就会出现在右侧的表单构建器面板中。 完成后,您可以配置字段选项。 为此,请单击一个字段,然后将出现字段选项。 以类似的方式,您可以自定义所有其他字段。

之后,单击“设置”选项卡以配置您的表单设置。 通过常规设置,您可以更改表单名称、提交按钮文本、提交按钮处理文本、启用反垃圾邮件蜜罐等。 转到通知选项卡以设置电子邮件通知,当用户完成表单时通知您。 确认选项卡将帮助您设置在用户提交表单时显示的确认消息。 配置完成后,请务必保存您的表单。
将 AMP 表单添加到页面
准备好 WordPress 表单后,您可以将其添加到页面中。 首先,您需要创建一个新页面或打开一个要添加表单的现有页面。 打开页面编辑屏幕,单击添加新块图标,然后继续选择 WPForms 块。 这样做后,您将能够看到添加到页面编辑屏幕的 WPForms 小部件。 您只需要选择之前创建的表单,小部件就会立即将其加载到页面编辑器中。 您还可以发布或更新您的页面。 这就是全部。 您无需配置任何其他内容。 WPForms Lite 插件现在将为您的表单添加完整的 AMP 支持。 如果您对它的外观感兴趣,可以在手机上打开该页面。

如何将 google reCAPTCHA 添加到您的 AMP 表单
WPForms 包含反垃圾邮件蜜罐,默认情况下可以捕获和阻止垃圾邮件。 此外,您可以使用 Google reCAPTCHA 来减少垃圾邮件提交。 为了在您的 AMP 表单中使用 Google reCAPTCHA,您必须为您的网站注册 Google reCAPTCHA v3 并获取 Google API 密钥。 为此,请访问 Google reCAPTCHA 网站并单击页面右上角的“管理控制台”按钮。 然后,您必须使用您的 Google 帐户登录。 完成后,您将看到“注册新站点”页面。 通过在标签字段中输入您的网站名称开始填写它。 Google AMP 仅支持 reCAPTCHA v3,因此您必须从 reCAPTCHA 类型选项中进行选择。
完成后,在“域”部分下输入您的域名。 所有者部分将默认显示您的电子邮件地址。 请注意,如果您愿意,还可以添加另一封电子邮件。 接下来,您必须接受 reCAPTCHA 服务条款才能继续。 另外,不要忘记选中“将更改发送给所有者”复选框。 这将允许 Google 通知您有关您网站上的错误配置和可疑流量等问题。 完成后,单击提交按钮。 然后,您将看到一条成功消息以及站点密钥和在您的站点上添加 reCAPTCHA 的密钥。 此键允许您将 reCAPTCHA 添加到您的表单中。
额外调整
但是,您还需要进行一项调整。 它将确保 AMP 与 reCAPTCHA 的兼容性。 要访问它,请单击此处的“转到设置”链接。 这将引导您再次使用“允许此密钥与 AMP 页面一起使用”复选框进行 reCAPTCHA 设置。 只需选中该框,然后单击下面的保存按钮。

现在您拥有 Google API 密钥可以在 AMP 表单上添加 reCAPTCHA,请转到 WordPress 仪表板中的 WPForms > Settings > reCAPTCHA 页面。 然后选择 reCAPTCHA v3 选项并粘贴站点密钥和密钥。 单击保存设置按钮。 现在 Google reCAPTCHA 已添加到 WPForms,您可以根据需要在表单中自由启用它。 转到 WPForms > 所有表单,然后选择要启用 reCAPTCHA 的表单。 当表单设置屏幕出现时,单击“设置”选项卡并选择“常规设置”部分。 您将看到“启用 Google v3 reCAPTCHA”复选框。 选中该框并保存您的表格。 之后,重新访问您的联系页面并查看带有 reCAPTCHA 的 AMP 表单。
没那么多
如您所见,为了在 WordPress 中创建 AMP 表单,您无需费力。 尤其是当您身边有本指南时。 我们希望我们对您有所帮助,并且在完成这些简单的步骤后,您将看到 AMP 表单的所有好处。