如何在 WordPress 中轻松创建联系表格

已发表: 2022-03-17

当您浏览任何网站以查找信息或产品时,您不止一次想要了解更多信息或询问更多信息。 如果您想防止这种情况在您的网站上发生,请确保您提供所有设施,以便任何访问者都可以在您的网站上与您联系。

目录

  • 为什么我的网站需要联系表?
  • Nelio 表格
    • 安装 Nelio Forms 插件
    • 创建您的第一个表单
    • 编辑联系表
    • 提交填妥的表格
    • 将表单添加到您的页面和帖子
    • 接收访客的联系请求
  • 结论

为什么我的网站需要联系表?

无论您是小型企业、在线商店还是信息博客,您迟早都会希望访问者能够与您联系。 最快和最简单的解决方案可能是在您的网络上包含一个电子邮件地址,以便他们可以与您联系,但恐怕这可能不是一个好主意:您会收到很多垃圾邮件,您不知道他们在哪里找到了你(如果他们是因为在网上或其他任何地方看到了地址而来的),而且在你收到的电子邮件中,你肯定会遗漏一些你想知道的信息。

联系表格示例
使用 Nelio Forms 创建的联系表单示例。

联系表格允许您以结构化的方式接收信息,并以最适合您的方式正确存储信息。 此外,它们还有许多其他优点,例如,您可以:

  • 在页面、帖子、小部件上定义不同的表单。
  • 指出您希望他们填写的所需信息。
  • 填写表格时显示确认或错误消息。
  • 指明您希望从已完成的表格中接收信息的位置。
  • 按照 RGPD 存储联系人数据。
  • 了解收到的信息的来源。
  • 控制垃圾邮件。
  • 将信息发送给多个用户。
  • 将它们与其他平台等集成。

让我们看看如何快速轻松地在我们的网站上创建免费的联系表格。 如您所知,新安装的 WordPress 不提供创建自定义联系表单的选项。 如果要创建自定义表单,则需要安装包含联系表单的主题或使用插件。

有很多插件可供选择。 最流行的联系表单插件之一,Contact Form 7,易于使用,但它没有可视化编辑器来创建表单,您必须学习它的语法。 大多数插件(例如 WPForms、Fomidable Form Builder、HubSpot 或 Ninja Forms 等)提供的替代方案是添加一个带有控制面板的 WordPress 框架,用于设计联系表单。

在这篇文章中,我们想讨论一个与以前不同的联系表单插件:Nelio Forms。

Nelio 表格

Nelio Forms 是我们刚刚发布的一个插件。 您可以在 WordPress 插件目录中找到它的免费版本。

WordPress.org 中的 Nelio Forms 插件
WordPress.org 中的 Nelio Forms 插件。

如果已经有其他可用的插件,为什么我们要发布新的联系表单插件? 因为我们一直在使用其他插件来创建表单,而我们的经验并不是我们想要的。 Nelio Forms 是一个集成到 WordPress 块编辑器中的插件,因此不实现自定义表单构建器框架。

让我们看看您需要遵循哪些步骤才能使用 Nelio Forms 轻松创建联系表单。

安装 Nelio Forms 插件

Nelio Forms 的安装方式与任何其他插件一样。 在 WordPress 仪表板中,单击“添加新”并在搜索引擎中输入“Nelio Forms”,然后安装并激活插件。

安装并激活 Nelio Forms 插件
安装并激活 Nelio Forms 插件。

创建您的第一个表单

安装并激活后,在侧边菜单栏中,您将找到 Nelio Forms 选项。 点击“添加新的:”

使用 Nelio Forms 添加新的联系表格
使用 Nelio Forms 添加新的联系表格。

块编辑器将打开,您会很快注意到它看起来与帖子和页面编辑器非常相似,但在这种情况下,它会显示您必须包含在任何表单中的最少信息:用于识别它的表单名称,一个字段 (默认情况下,它会显示一个文本字段)来填写,以及“提交”按钮。

使用 Nelio Forms 创建新的联系表格
使用 Nelio Forms 创建新的联系表单。

编辑联系表

命名表单后,如果您希望每个字段可访问,您应该为每个字段添加一个描述性标签(您可以选择是否在表单上显示此标签)。

每个字段必须包含一个描述性标签
每个字段都必须包含一个描述性标签。

在侧边栏中,您可以看到正在编辑的块的属性。 因此,例如,当您编辑文本输入字段时,除了描述性标签和添加占位符的能力之外,您还会看到您还可以指示该字段是否需要提交表单以及是否需要显示描述性标签。

文本输入字段属性
文本输入字段属性。

与在 WordPress 块编辑器中添加任何新块的方式相同,您可以通过修改其布局并添加不同的块来编辑表单。

可添加到表单的块
可用于添加到表单的块。

正如您在上图中看到的,除了您已经知道的段落类型块之外,表单可以按列设计,并且您有一组特定于联系表单的块:

  • 一个文本输入字段,
  • 一个文本区域字段,
  • 一个邮件字段,
  • 一个电话领域,
  • 密码字段,
  • 一个复选框字段,
  • 一个数字字段,和
  • 网址字段
Nelio Forms 中联系表单的字段
Nelio Forms 中联系表单的字段。

每个字段可能有自己的设置。 例如,对于数字字段,您不仅可以要求它和/或隐藏其标签,还可以指示最小和最大范围值以及每个步骤的数量。

Nelio Forms 中数字字段的属性
Nelio Forms 中数字字段的属性。

在复选框的情况下,您可以指示它是默认选中还是未选中:

Nelio Forms 中复选框的属性
Nelio Forms 中复选框的属性。

最后,您可以像编辑任何其他按钮一样编辑提交按钮。 也就是说,您可以更改其样式、颜色、边框、宽度、字体或尺寸,以及定义提交表单后要转到的 URL 或锚点。 您甚至可以向其中添加额外的 CSS 类。

联系表单提交按钮属性
联系表单的提交按钮的属性。

如您所见,创建一个像您在这篇文章的第一张图片中看到的那样的表单就像在块编辑器中写一篇文章一样简单。

编辑 Nelio Forms 联系表
编辑 Nelio Forms 联系表。

提交填妥的表格

创建表单后,您必须指明表单提交后要发送到的位置。 为此,您可以添加新的“提交操作”或编辑现有的。

在联系表单中添加提交操作
在联系表单中添加提交操作。

在插件的免费版本中,您只能添加电子邮件通知。 给定任何通知,您必须定义一些设置,例如收件人的电子邮件地址、发送电子邮件的人或消息本身。 对于每个电子邮件字段,您可以输入有效的电子邮件地址,从表单中选择一个电子邮件字段,或使用站点管理员的电子邮件。

在 Nelio Forms 中编辑发送电子邮件操作
在 Nelio Forms 中编辑发送电子邮件操作。

在消息本身中,您可以编写任何您想要的内容,但您也可以使用用户提交的全部或部分字段、表单的 URL 或站点管理员的电子邮件地址。

您可以在从联系表单发送的电子邮件中添加的字段
您可以在从联系表单发送的电子邮件中添加的字段

添加信息后,您的联系表就完成了。 同样,您可以根据需要创建任意数量的不同联系表格,所有这些表格都可以通过 Nelio 表格菜单中的“所有表格”选项进行编辑。

使用 Nelio Forms 创建的表单列表
使用 Nelio Forms 创建的联系表单列表。

将表单添加到您的页面和帖子

创建表单后,剩下的就是将其添加到您希望在网站上显示的位置。 为此,您必须在任何页面的编辑器中添加“表单”类型的块。

添加联系表单类型块
添加联系表单块。

从页面本身,添加表单块时,您可以选择以与上述完全相同的方式直接创建新表单,或者相反,添加您之前创建的表单之一。

添加新 Nelio Forms 表单的选项
添加新 Nelio Forms 表单的选项。

插入后,Nelio Forms 的一大优势是您可以像编辑任何其他块一样在编辑页面时直接修改表单。 修改它时,您会看到在“更新”按钮中,单词左侧出现一个白点(类似于更新模板),指示您是否希望保存对表单本身所做的更改。

通过这种方式,您可以在页面上添加、编辑和显示表单,就像使用任何其他可用块一样。

编辑 Nelio 表格页面
编辑 Nelio 表格页面。

接收访客的联系请求

就是这样! 我们只需要发布包含创建的表单的页面或帖子。 如果任何访客填写错误表格,他们将被警告检查填写的信息。

填写表格中的错误提示
填写表格中的错误通知。

您将很快收到通知,其中包含访问者按照您在表格中指定的方式填写的信息。

从 Nelio Popups 网站上的联系表中收到的电子邮件示例
从 Nelio Popups 网站上的联系表中收到的电子邮件示例。

这样,当您收到联系电子邮件时,您就会知道它来自哪里,您将拥有您所要求的所有信息,并且您将能够避免垃圾邮件。

结论

我们已经看到使用 Nelio Forms 创建联系表单,这要归功于它与 WordPress 编辑器的集成,就像创建任何页面或帖子一样简单。

目前,免费版本非常简单,但包含创建网站所需的联系表格所需的一切。 例如,您在本网站上找到的所有联系表格都是使用 Nelio Forms 创建的。

对于高级版本,我们希望您能在Nelio Forms页面上找到更多功能。 当然,如果您认为您需要任何附加功能和/或对高级版本感兴趣,我们邀请您填写该页面上的表格,我们将与您联系。

不要犹豫,安装和测试 Nelio Forms 插件(记住,它是免费的!)并在这里分享您的印象。

Brooke Cagle 在 Unsplash 上的特色图片