使用 Ninja Forms 让用户提交数据并将其显示在您网站上的表格中

联系表单插件 Ninja Forms 在网站前端显示表格

想在您网站的前端显示 Ninja Form 条目吗? 我们会告诉你怎么做。 在本指南中,您将学习设置 Ninja 表单以让用户提交数据、将表单条目存储在自定义帖子类型中,并将这些条目显示在您网站前端的可搜索、可过滤的表格中。

Ninja Forms 是世界领先的表单生成器之一。 他们提供了一系列出色的表单模板来帮助用户向您的网站提交信息。 但是,它们不提供在您网站的前端以可过滤和可搜索的格式显示用户提交的数据的方法。

这正是我们的插件所做的。

您可以使用 Ninja Forms 收集信息,然后借助我们的插件之一 – Posts Table Pro、WooCommerce Product Table 或 Document Library Pro 显示工作列表、文档库、事件列表等等。

这是我们在一个演示站点上构建的表格:

使用 Posts Table Pro 构建表格

职位列表显示在可过滤和可搜索的表格中

对本教程有什么期望

您将学习:

  1. 使用户能够使用 Ninja Forms 在您的网站上提交数据
  2. 创建自定义帖子类型以存储用户提交的数据
  3. 使用 Posts Table Pro 在可过滤和可搜索的表格中显示用户提交的数据

现在,让我们开始吧……

1. 使用户能够使用 Ninja Forms 在您的网站上提交数据

  1. 下载并安装 以下插件:
    1. 忍者形态
    2. 前端发布
    3. 文件上传(仅当您计划允许用户上传图像、pdf 等文件时)
  2. 建立用户需要在表单上填写的所有字段的列表。 在我们的演示网站上,我们正在构建一个表格,使企业能够发布职位空缺。 所以我们需要用户向我们提供以下信息:
    • 职称
    • 类别
    • 工作类型
    • 城市
    • 职位描述
    • 怎样申请
    • 公司名
    • 公司详情
    • 商标
    • 验证码
  3. 前往您的 WordPress 仪表板。 您应该会在左侧的菜单中看到 Ninja Form 选项。
  4. 现在,去 忍者表格→添加新 并选择一个模板。
  5. 我们选择了 空白表格 模板。
  6. 插入您之前列出的字段。 请按照本指南了解如何做到这一点:表单构建指南。
  7. 当您对表格感到满意时,点击 发布 按钮。

以下是我们为使企业能够在我们的演示网站上发布职位空缺而构建的表格。

使用 Ninja Forms 制作的表单 - 前端

使用 Ninja Forms 制作的表单,使用户能够提交数据

保护表格(可选)

尽管科技公司在打击垃圾邮件方面取得了长足的进步,但它仍然是对每个人的巨大威胁,尤其是商业网站。

垃圾邮件发送者总是在寻找带有表单的网站,因为不安全的表单提供了进入网站的通道。 因此,您在网站上发布的任何表格都会吸引垃圾邮件。

Ninja Forms 带有内置的垃圾邮件防护技术,但您仍然可以安装 Akismet Spam Protection 之类的插件来保护它免受垃圾邮件攻击。

或者,您可以使用 Ninja Forms 的 Anti-Spam 和 Google reCAPTCHA 字段来实现相同的目的。 详细了解 Ninja Forms 的垃圾邮件预防技术。

如果您已构建表单以仅与少数人共享,您可能希望保护页面,以便只有授权用户才能访问它。 这是一个有用的指南: 使用密码保护.

你也可以 去索引 该页面并阻止 Google 在 SERP 上显示它。

2.创建自定义帖子类型来存储用户提交的数据

Ninja Form 将其所有用户提交的数据存储在 Submissions 下。 但您可以选择将其存储为页面、帖子或新的自定义帖子类型。

我们强烈建议使用自定义帖子类型,因为常规帖子或页面会使您的网站混乱。 但是,如果您仍然喜欢以常规方式存储它,请直接跳到第 7 步。

在下面的指南中,您将学习如何创建新的自定义帖子类型并将其与 Ninja Forms 连接以存储用户提交的数据。

开始吧…

指示

  1. 安装并激活 免费 自定义帖子类型 UI 插入。
  2. 在您的 WordPress 仪表板上,您应该能够看到一个 中华映管左侧菜单中的 I 选项。 去 CPT UI → 添加/编辑帖子类型.
  3. 接下来,根据 基本设置 填写这 3 个字段 – 柱式弹头, 复数标签, 和 单数标签.

以下是我们的基本设置:

创建自定义帖子类型

创建自定义帖子类型
  1. 在同一页面上向下滚动并花一些时间查看下的所有选项 附加标签. 继续修改它们以满足您的需求。
  2. 进一步向下滚动到 设置 → 支持. 在支持下,有很多选择。 选择自定义帖子类型所需的选项。
  3. 准备好后,点击 添加帖子类型 按钮。

现在您需要确保用户提交的数据存储在新的自定义帖子类型中。 您将通过将之前创建的 Ninja 表单与新的自定义帖子类型连接起来来完成此操作。 这是如何做:

  1. 导航到 Ninja Forms → Dashboard,然后 打开表格.
  2. 电子邮件和操作. 在屏幕的右上角,有一个蓝色背景的加号按钮。 单击它,将弹出一个侧边栏。
  3. 转到 帖子类型,将出现一个下拉菜单。 选择 自定义帖子类型. 或者,选择 邮政 要么 页面 如果您想将它们存储为帖子和页面。
  4. 记得打 发布 按钮。

将 Ninja 表单与自定义帖子类型连接起来

将 Ninja Forms 与自定义帖子类型连接起来

3. 在可过滤和可搜索的表格中显示表单条目

有两种方法可以做到这一点:手动方式或插件方式。

我们将完全忽略手动方法,因为它超级难、耗时且极易出错。 即使是经验最丰富的 WordPress 开发人员也很难手动构建表格。 每次用户通过 Ninja Forms 提交信息时,您都必须自己添加条目。 这是很多工作。

至于插件……我们在 Barn2 构建了无忧、响应和可定制的 WordPress 表格插件。 它们是 Posts Table Pro、Document Library Pro 和 WooCommerce Product Table。 在花了十年时间构建和改进插件之后,我们可以自豪地说,今天我们的插件是 WordPress 社区中最受欢迎的表格插件。

  我们新的 WooCommerce Bulk Variations 插件已发布!

我们的每个表格插件都旨在显示某种内容。 让我们来看看每个提供什么:

  1. 帖子表专业版:帮助显示自定义帖子类型、帖子和页面。
  2. WooCommerce 产品表e:帮助展示 WooCommerce 产品。
  3. 文档库专业版: 帮助构建文档资源。

它们都在可搜索、可过滤的表格中显示数据。 但是每个插件都提供了不同的方式来显示不同类型的内容。 选择最适合您的用户提交的数据类型的一种。

现在让我们建立一个表……

指示

  1. 下载并安装 您从 Barn2 选择的表格插件. (如果您喜欢视频演练,这里有一个 帖子表专业版.)
  2. 现在导航到 插件设置页面 并输入您的许可证密钥。
  3. 留在同一页面并向下滚动。 您应该能够看到许多选项。 这些选项决定了表格在前端的外观和行为。

查看此帮助文档以了解每个选项的含义以及如何操作 修改它们 以满足您的需求。

例如,我们在列部分添加了分类法和自定义字段。 对于任何有兴趣的人,我们使用 高级自定义字段 首先创建自定义字段和分类法。

Posts Table Pro 许可证密钥

Posts Table Pro 设置页面
  1. 页面 → 添加新的. 给你的页面一个标题。 我们将其命名为:职位列表。
  2. 然后在页面中添加一个简码: [posts_table] 要么 [doc_library] 要么 [product_table] (取决于您使用的表格插件)。
  3. 现在,预览页面并检查表格是否符合您的想法。 提醒:该表将反映您之前选择的选项。 您可以随时返回并更改这些设置。

这是我们在演示网站上构建的表格:

使用 Posts Table Pro 构建表格

使用 Posts Table Pro 构建的职位列表表

都好? 打 发布 按钮。

就是这样,伙计们。 该表已准备好供您的网站访问者使用。

有疑问? 以下常见问题解答可能会有所帮助。

常问问题

问:如何从其他流行的表单插件(如 Gravity Forms 或 WPForms 等)显示用户提交的数据?

A: 如果您想使用其他表单插件来收集用户提交的数据并将其显示在您的网站上,请按照以下指南进行操作:

  • 重力形式
  • 工作表
  • 联系表格 7
  • 强大的形式

Q:用户以后如何修改自己的数据?

A: 您可以允许用户通过安装以下任一插件来更改其数据:

  • 通用前端编辑器:它会在表格上方和下方添加一个编辑按钮。 通过单击它,用户可以转到前端编辑器并修改提交的数据。
  • 编辑:它会将用户带到存储其数据的页面。 从那里,他们可以更改他们的数据。

问:如何选择要在表格中显示的内容?

A: 这取决于您希望网站访问者看到的内容。 例如,如果您创建一个职位列表页面,那么您会想要展示职位名称、公司名称、位置、职位类别和职位类型。

如果您不确定要包含哪些内容,我们建议您查看您的竞争对手在做什么。 列出其他网站正在显示的内容,然后决定将哪些内容放入您的表格中。

立即开始显示 Ninja Forms 条目!

在本教程中,我们使用了 5 个插件。 您只需单击以下链接即可获取它们:

  • Ninja Forms & Front End Posting 构建用于收集访问者数据的表单。 仅当您计划允许用户上传图像、pdf 等文件时才获取文件上传。
  • 自定义帖子类型 UI 用于创建将存储数据的自定义帖子类型。
  • Posts Table Pro、WooCommerce Product Table 或 Document Library Pro,用于构建可过滤、可搜索的表格,在前端显示数据。

这将我们带到了指南的结尾。 我们希望您发现它对您有所帮助且易于理解。 如果您有任何疑问,请在下面发表评论。

类似文章