您想在 WordPress 中构建 AJAX 联系表单吗?

AJAX 联系表单允许用户无需重新加载页面即可提交表单。这使您能够提高用户参与度,同时为用户提供更好的表单提交体验。

在本文中,我们将向您展示如何通过分步说明轻松构建 WordPress AJAX 联系表单。

什么是 AJAX 以及为什么将它用于表单?

AJAX 是异步 Javascript 和 XML 的缩写,是一种 JavaScript 编程技术,允许开发人员在不重新加载页面的情况下传输数据。

它最常用于 Web 表单,允许用户无需重新加载页面即可提交表单数据。这使得表单提交变得简单快捷,从而改善了整体用户体验。

Gmail 和 Facebook 等网络应用程序广泛使用此技术来保持用户的参与度,同时使一切在后台无缝运行。

哟您可以在 WordPress 网站上使用 AJAX 表单。它将帮助用户避免不必要的页面重新加载,并让他们专注于当前正在查看的页面。

当您经营电子商务商店并希望在不分散用户注意力的情况下收集用户反馈时,这会派上用场。

您还可以对网站上的其他自定义表单使用相同的 AJAX 功能。例如,自定义用户登录表单将允许用户无需额外加载页面即可登录。

话虽如此,让我们看看如何通过 4 个简单步骤轻松制作 WordPress AJAX 联系表单。

  • 第 1 步:安装 WPForms 插件
  • 第 2 步:创建您的第一个表单
  • 第 3 步:启用 AJAX 表单提交功能
  • 第 4 步:在 WordPress 中添加支持 AJAX 的表单

第 1 步:安装 WPForms 插件

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

WPForms 是市场上最好的 WordPress 表单构建器插件。它还允许您轻松创建 Ajax 支持的表单。

激活后,您需要访问 WPForms » 设置页面以输入您的许可证密钥。

输入许可证密钥后,您将能够接收自动更新并安装附加组件。

您现在已准备好在 WordPress 中制作漂亮的 AJAX 表单。

第 2 步:创建您的第一个表单

让我们继续创建您的第一个表单。

只需访问 WordPress 管理区域中的 WPForms » 添加新页面即可。系统会要求您提供表单标题并选择一个模板作为起点。

为了本教程的目的,我们将创建一个联系表单。但是,您可以创建所需的任何其他类型的表单。

WPForms 现在将加载已添加基本字段的表单。您只需指向并单击任何表单字段即可对其进行编辑。

您还可以通过单击左列添加任何新的表单字段。

新字段将出现在表单底部、“提交”按钮上方。

您可以轻松地拖放表单字段,以在表单中上下移动它们。

完成表单编辑后,您可以继续下一步。

第 3 步:开启 AJAX 表单提交功能

WPForms 默认情况下不启用 AJAX 表单提交。您需要为您的表单手动启用它。

只需切换到表单构建器中的“设置”选项卡即可。在“常规设置”选项卡中,单击“启用 AJAX 表单提交”选项旁边的开关。

现在让我们设置 t 之后会发生什么表单提交。

首先,切换到设置下的“确认”选项卡。您可以在此处通知用户您已收到他们提交的表单。

WPForms 允许您以不同的方式做到这一点。例如,您可以将用户重定向到某个 URL、向他们显示特定页面,或者只是在屏幕上显示一条消息。

由于我们已经为表单启用了 AJAX 功能,因此将用户重定向到另一个页面将达不到创建 AJAX 表单的目的。

您需要选择消息选项并编辑确认消息。请随意使用编辑器上的格式工具栏或添加一两个链接来告诉用户下一步该去哪里。

之后,您可以设置您希望如何收到有关表单提交的通知。

切换到表单设置中的“通知”选项卡并配置通知电子邮件设置。

完成后,您可以保存表单并退出表单生成器。

第 4 步:在 WordPress 中添加支持 AJAX 的表单

WPForms 让您可以非常轻松地向 WordPress 帖子、页面和侧边栏小部件添加表单。

只需编辑要添加表单的帖子或页面,然后将 WPForms 块插入到您的内容区域即可。

之后,您需要从块的设置中选择刚刚创建的表单。

WPForms 将立即在内容编辑器中加载表单的实时预览。

您现在可以保存或发布您的内容,然后访问您的网站来测试表单的 AJAX 功能。

以下是我们演示网站上 AJAX 支持的表单的快速浏览。

您还可以将表单添加到 WordPress 的侧边栏小部件中。

为此,请转到外观 » 小部件页面并将 WPForms 小部件块添加到侧边栏。

选择您之前创建的表单,然后单击“更新”按钮用于存储小部件设置。您现在可以访问您的网站来查看 AJAX 支持的表单的运行情况。

我们希望本文能帮助您了解如何为您的网站创建 WordPress AJAX 联系表单。您可能还想查看我们关于如何在 WordPress 中创建联系表单弹出窗口的指南,或者我们的专家精选的最佳电子邮件营销服务来发展您的业务。

如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。

By

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注