构建网页表单的选项

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

网络上有很多表单构建服务、插件和框架,它们使繁琐的表单设计和开发任务变得更加轻松。我们将在本文中介绍其中的一些。

为什么不自己动手?

构建表单是前端开发中的一项任务,直到被要求去做,我才意识到它有多么困难。如果我们只是说几个文本输入和一个提交按钮,那没什么大不了的,但我们通常会遇到更复杂的情况。单选按钮、数字输入、Ajax 验证和提交——天哪!这甚至还没有开始讨论浏览器不一致性、输入状态、支付集成和可访问性。

没有什么比构建表单更跨学科了。表单需要设计。表单需要前端开发。表单需要后端开发。表单也是服务器和数据库人员关注的问题。新表单和对现有表单的更改可能是一项难以协调的跨学科工作。

从头开始构建表单完全没问题,但也不要羞于站在巨人的肩膀上,他们已经完成了艰苦的工作。这样做可以最大程度地降低客户的成本和时间,并带来更好的最终用户体验。

托管表单服务

一种选择是为您的表单使用托管服务。这样,您就可以将团队原本需要承担的大部分表单相关工作转移出去。当表单涉及许多复杂因素(例如条件逻辑、分页和报告)时,我倾向于使用托管表单服务。这些公司已经为我们解决了所有这些问题,并且考虑到时间,价格也低于我们自己开发。

Wufoo / SurveyMonkey

这些服务如今属于同一个体系。您可能知道,Chris 在 WufooSurvey Monkey 收购之前曾在那里工作过。Wufoo 是 CSS-Tricks 上的广告客户,但并未为本文的收录付费。 我们包含这些服务是因为它们确实有效。Wufoo 适用于任何类型的网络表单,而 SurveyMonkey 可能更适合于网络表单调查。

我们使用 Wufoo 为 CSS-Tricks 上的联系表单提供支持,并且多年来一直如此,无需更换为其他任何东西。由于 Wufoo 提供了简单的支付集成,因此我们也多次使用它来销售产品。他们甚至不抽成,它只是包含在付费计划中!

Wufoo 界面

我个人最喜欢 Wufoo 的一点是它提供的自定义程度。有几种方法可以将表单嵌入到网站上,以及使用其主题或自定义 CSS 自定义外观的选项。这样,除了开箱即用之外,它还可以扩展。我很久以前写过一篇文章,介绍了如何使用 Wufoo 作为获取客户服务反馈的工具。

Polldaddy

Polldaddy 来自 Automattic,WordPress 背后的力量。与 Wufoo 一样,它也是一项托管服务,适用于复杂的表单,例如调查。我个人喜欢的一点(除了它简洁的界面)是它提供了一个不错的 iOS 应用程序,用于在网站以外的其他地方收集表单数据。这非常适合会议、签售会或其他一些现场活动,在这些活动中,亲自收集信息将是一大优势。

Polldaddy 表单编辑器

Google 表单

Google 表单 在此组中是独一无二的,因为它完全免费。它是 Google Docs 世界的一部分,与幻灯片和表格一起(您可以将表单数据导出到表格)。作为该世界的一部分意味着邀请协作者参与您在那里构建的表单。

编辑 Google 表单

这是一个非常不错的表单构建器,由于免费且功能强大而引人注目,但也相当有限。没有支付、没有逻辑、设计控制非常有限、iframe 嵌入可能有点奇怪(需要滚动)等。

Typeform

Typeform 使用独特的界面构建表单:每个问题一次一个,更像是现实生活中的对话。

Formstack

Formstack 也是一项完全托管的表单服务,具有一些非常独特的特性,可能对大型企业和营销需求特别有用。例如,他们跟踪部分提交,因此即使用户没有完全完成表单,您也可以收集信息。他们允许 A/B 测试并跟踪用户停止的地方,以识别瓶颈并提高转化率。

在线表单构建器

托管平台对您的项目来说有点过头了吗?另一种选择是使用在线表单构建器。

托管表单服务和表单构建器之间存在细微的差别。SaaS 提供您可能需要的一切并为您托管,而表单构建器提供您接收数据和通知所需的操作。您在自己的网站上托管表单,表单构建器的服务器将为您处理提交。

Simple Form

Simple Form 是在线表单构建器的完美示例。它为您提供了一个 API 令牌,然后可以将其添加到网站上表单的标记中,以发送和接收来自 Simple Form 服务器的数据。无需注册或登录;只需一个 API 令牌。这很酷。

FormKeep

FormKeep 是另一个可行的在线表单构建器。这里的主要区别在于,需要登录才能开始使用,并且一旦您开始使用,就可以选择升级表单以收集更多数据。否则,给定表单可以接受的提交数量会受到限制。

FormKeep 的一个非常酷的功能:它有很多Zapier Webhook,可以将您的表单与其他服务集成,例如 MailChimp、Trello、Salesforce 和许多 Google 的网络应用程序。

Formspree

Formspree 算是我们看过的其他两个在线表单构建器之间的一种折衷方案。无需注册或帐户即可获取表单操作,但在需要帐户和升级之前,每个表单的提交次数限制为 1000 次。

我最喜欢 Formspree 的一点是,它提供了一系列高级选项,可以使用标记中的 name 值来自定义表单的行为。

WordPress 插件

运行 WordPress 网站意味着您可以访问许多插件,这些插件使表单比从头开始更容易管理。以下是我最喜欢的几个,每个都有不同的原因。

Gravity Forms

这是一个高级插件(即需要付费),它在您网站的管理后台提供了一个真正的表单构建器。 Gravity Forms 允许您直接从 WordPress 仪表板创建无限数量的表单,包括一个流畅的拖放界面,并提供您可能期望在 Wufoo 等产品中看到的所有高级选项,例如条件逻辑、样式自定义和与流行服务的集成。

Gravity Forms 界面

您可以完全控制提交通知、电子邮件触发器和设计。我最喜欢的功能是 Gravity Forms 在每个级别上的控制水平。例如,每个输入都有一组高级设置,可用于自定义从输入的外观和行为到其可访问性和从同一表单中的其他字段提取数据的能力的所有内容。

然后,就像 Wufoo 一样,表单使用唯一的短代码嵌入到任何页面或帖子中。

Ninja Forms

我对这个插件越来越喜欢了。它是完全免费的,因为基本(但也很棒)的表单功能包含在内,然后是一堆可付费的附加组件。

目前,我认为 Ninja Forms 与 Gravity Forms 从界面到提供的功能都有着不错的对比。但是,我确实知道该团队正在 开发版本 3 的重大改进,这将以非常棒的方式彻底改变现状,并进一步将其与 Gravity Forms 区分开来。

Contact Form 7

这是 WordPress 表单插件的元老级产品。这是我记得在 WordPress 网站上使用过的第一个表单插件。它远不如 Gravity Forms 和 Ninja Forms 拥有高级功能,但它是完全免费的,并且仍然可以完成一些非常棒的事情,从通知设置到前端的 Ajax 加载。此外,它背后还有一个社区,该社区贡献了扩展和附加组件,以进一步定制体验。

在具有基本表单输入需求的小型 WordPress 项目中,我经常使用 Contact Form 7。在将项目移交给客户时,它可能需要一些额外的说明,但对于许多用例来说已经绰绰有余了。

表单框架

假设您是那种不需要任何帮助处理表单的 DIY 类型。您仍然可以从其他人的工作中受益,他们已经投入了大量精力来构建表单框架,这些框架不仅具有吸引力,而且还处理表单中经常出现的棘手方面,例如可访问性和浏览器兼容性。实际上,无需重点介绍这些工具,因为它们已经被广泛使用和记录,但我们至少可以链接它们。

Foundation 表单样式示例

总结

我根据我认为最适合特定项目的方案来选择表单解决方案。在大多数情况下,我都会使用某种表单解决方案,因为考虑到所有可能需要实现的功能,构建表单非常困难。

Zapier 也 整理了一份清单,其中包含一些选项。我根据个人使用各种服务的经验编写了这篇文章,但您还发现了哪些其他方案?请在评论中告诉我。