如何创建 ACF 前端表单 [无代码!]

已发表: 2022-12-14

希望在您的 WordPress 网站上使用高级自定义表单但不知道如何编码? 本指南将帮助您立即创建 ACF 前端表单!

如何创建 ACF 前端表单

大概阅读时间: 6分钟

高级自定义字段 (ACF) 是一个强大的工具。

能够自定义您的字段并完全按照您的需要构建表单,您的可能性几乎是无限的。

但是有一个问题。 您必须知道如何编码才能在您网站的前端获取 ACF 表格。

Formidable Forms 是最好的 WordPress 表单生成器插件。 免费获取!

或者你呢?

这篇文章将向您展示如何在 WordPress 中轻松创建 ACF 前端表单,无需代码! 这一切都是使用完美的 ACF 表单生成器Formidable Forms完成的。

让我们开始吧。

使用高级自定义字段前端表单有什么问题?

实际上,使用 ACF 创建您的高级自定义字段前端表单并没有错

ACF 是一个强大的工具; 如果您知道如何使用 PHP 进行编码,则可以快速创建独特的表单。

但是,如果您不知道如何编码,您就会对眼前的外语摸不着头脑。

只需查看下面的 ACF 表单示例代码:

ACF的前端表单需要编码知识

所以,你有两个选择:

  1. 学习使用 ACF 编写代码和创建前端表单
  2. 让 Formidable Forms 为您完成所有艰苦的工作

虽然我们在 Formidable 拥有一支由优秀开发人员组成的团队,但我们认为您没有。

因此,我们今天将重点关注高级自定义字段前端表单教程的选项 #2。

如何使用 Formidable 显示 ACF 前端表单

在 YouTube 上订阅

要开始,您需要一些东西:

  1. 强大的形式商业计划书
  2. ACF 插件(免费或专业版)

立即获取 Formidable Forms!

要在 ACF 前端使用一些更高级的字段,需要专业版。 但是,对于基本字段,您可以使用免费版本。

如果您想了解更多信息,请务必查看我们的 ACF 知识库文档!

因此,一旦安装并激活了 Formidable Forms,请转到Formidable → Add-ons并单击ACF Form WordPress 插件安装按钮。

然后,只需几个简单的步骤:

  1. 创建 ACF 表单域
  2. 在 Formidable 中创建您的 ACF 前端表单
  3. 映射您的字段

    让我们开始吧。

    强大的表格专业计划

    第 1 步:创建 ACF 表单域

    对于我们的示例,我们有一个名为Here Birdie Birdie 的观鸟博客。

    Here Birdie Birdie 示例网站

    我们希望为用户提供一种方式,让他们的观鸟提交能够自动显示为博客上的自定义帖子类型。

    所以,我们要创建几个字段供用户输入信息:

    1. 姓名
    2. 日期
    3. 时间
    4. 鸟锯清单
    5. 附加评论

    因此,我们要做的第一件事是进入 ACF 自定义字段。 幸运的是,Formidable 支持 19 种不同的 ACF 字段类型的映射。 所以,你有很多选择。

    为此,请转至自定义字段 → 字段组,然后单击新增

    单击添加新按钮以创建您的 ACF 字段

    接下来,您可以通过单击“添加字段”按钮来添加您的字段。

    因此,我们将创建上面列出的字段并自定义它们以满足我们的需要。

    ACF 示例字段

    我们将使用 ACF Repeater字段让访问者更容易地显示他们看到的所有鸟类。 转发器字段允许用户添加或删除任意数量的条目。

    我们将在这些字段中使用下拉(ACF 中的选择)字段,以便访问者可以从鸟类列表中进行选择。 我们还将添加一个数字字段来输入他们看到每只鸟的时间。

    ACF 选择菜单示例

    您可以根据自己的需要随意定制。 但是,要获得更多高级功能(如中继器,您必须购买 ACF Pro)。

    完成后,点击保存更改

    第 2 步:在 Formidable 中创建 ACF 前端表单

    现在,我们将创建将显示在您网站前端的表单。

    因此,转到 WordPress 管理面板中的Formidable → Forms

    接下来,单击页面顶部的新增,然后选择从空白表单或 Formidable 的模板之一开始。

    单击添加新以创建新表单

    请随意选择最适合您情况的选项。 我们将从空白表单开始,根据自己的喜好对其进行自定义。

    接下来,为您的表单命名,然后单击Create

    该插件会将您带到 Formidable 的拖放式表单构建器,您可以在其中添加任何表单元素。 姓名、电子邮箱、电话号码、地址——随便你说,都在这里。

    Formidable 的拖放式表单生成器

    由于我们已经在 ACF 中创建了表单字段,因此我们只需添加匹配的字段以便轻松连接它们。

    示例观鸟表

    我们在顶部添加了一个字段,因此用户可以为他们的博客帖子命名,使它们独一无二!

    完成创建表单后,单击更新以保存更改。

    没有什么比因为你没有保存而失去你创造的一切更让你想起 90 年代的了。

    第 3 步:映射您的字段

    现在我们已经创建了表单,我们需要启用 ACF 字段映射。

    因此,单击页面顶部的设置选项卡,然后转到操作和通知

    接下来,选择创建帖子操作以自定义表单字段的显示方式。

    单击创建帖子表单操作

    Create Post form 操作中,向下滚动到 Custom Fields 部分并单击Map form fields to Advanced Custom Fields开关。

    启用 ACF 表单功能

    从下拉列表中选择您的 ACF 字段组,然后通过单击添加开始将您的自定义字段映射到 Formidable 字段。

    将您的 ACF 字段映射到您的 Formidable 字段

    此外,如果您使用转发器字段,则必须正确匹配转发器和子字段。

    映射字段后,单击更新以保存更改。

    就是这样! 用户现在可以将他们的条目提交到您的 WordPress ACF 前端表单,您的 ACF 和 Formidable Forms 字段将映射并发送信息。

    在这里,您可以使用 View 或使用支持 ACF 的主题在前端显示信息,然后编辑帖子、帖子标题、内容等等!

    这个 ACF 前端表单插件还能做什么?

    强大的形式横幅

    Formidable 看起来像是 ACF 的简单表单生成器,但它远不止于此。

    凭借数十个 ACF 表单函数、模板文件以及与所有顶级主题(包括 Elementor)的兼容性,Formidable 做到了这一切。

    它还有很多额外的功能和选项来增强您的表单:

    • 多步骤表格、测验和对话表格
    • 多种垃圾邮件防护选项
    • 内置视觉表单样式器
    • 100 多个表单模板
    • 壮丽景色

    这些只是您获得的部分功能。 如果我们自己这么说,他们会很棒。

    那么,在前端放置 ACF 表单是多么容易,而且您获得了如此丰富的功能,您还在等什么?

    今天,Formidable 已准备好让您的网站更上一层楼

    准备好制作您的 ACF 正面表格了吗?

    如果您想知道“如何向前端添加 ACF 字段?” 你现在已经得到了答案。

    借助 Formidable 简单的无代码解决方案,您可以在几分钟内启动并运行。 这篇文章向您展示了具体操作方法。

    无论您使用 WordPress ACF 专业版还是免费版,Formidable 都是完美的合作伙伴插件。

    因此,如果您准备好开始,请立即获取 Formidable Forms 并将其放在您的网站上。

    立即获取 ACF 前端表格!

    在 Facebook、Twitter 和 YouTube 上关注我们,了解更多令人难以置信的 WordPress 提示和技巧。

    阅读有关 WordPress 表单的更多信息!