添加表单

示例

表单通常用于捕获网站访问者的用户信息。它们的复杂程度各不相同，从简单的电子邮件订阅框，到详细的潜在客户捕获表单和需要访问者输入姓名、电子邮件以及一些额外的自我识别问题的注册页面。

自 1995 年创建以来，不起眼的 <form> 元素已经发生了很大的变化。默认情况下，<form> 会将其输入保存在内部，并在您 submit 时刷新页面。如今，开发人员通常希望将输入保存在 Javascript 中，以便您可以验证字段并将数据发送到第三方系统。

网站表单有几个“考虑因素”，例如数据输入存储、字段验证、表单提交、表单存储以及其他事件触发器。本文档将逐一介绍这些考虑因素。

Gatsby 使用 React，因此在一些地方，我们将链接到 React 文档以获取代码示例。此外，React 生态系统还提供了一些流行的、维护良好的库，如 Formik 或 Final Form，它们有助于处理更复杂的表单。

当用户在输入框中键入时，您希望将其存储在 JavaScript 字段中，该字段稍后可用于您的表单验证和提交逻辑。

React 文档中的“受控组件”部分在此处提供了良好的代码示例。

handleChange 函数接收用户正在输入的值，并将其内部存储在组件状态中。

通常，您会希望确保“电子邮件”字段中的条目是有效的电子邮件地址。

如果您需要对一个或多个字段进行验证，您可能希望使用 Formik 这样的库，因为添加逻辑和围绕错误消息的样式往往是相当样板化和重复的。

HTML 表单元素的默认行为是向 URL 发送 POST 请求并刷新页面。您将需要阻止默认行为并将信息发送到您正在使用的任何后端。

您可以通过将一个阻止页面刷新的函数作为 onSubmit prop 来实现此目的。同样来自 React 文档的“受控组件”部分。

handleSubmit 函数在事件上调用 preventDefault()，这会阻止页面刷新。在此之后，您将需要插入所需的行为，例如将数据发送到第三方服务。

提交后，您可能希望对表单的视觉显示进行其他更改，例如在提交后禁用表单提交按钮、显示一个旋转的轮子或更改按钮的颜色。

如果您需要使用任何身份验证令牌来提交数据，您可以使用 Gatsby Functions（Gatsby 对无服务器函数的实现）来运行此逻辑，同时保持任何凭据的安全。

有时您会希望触发表单提交的其他事件，这些事件需要对第三方服务进行身份验证调用。

一些例子

用户通常有两种方式来处理这些情况：要么将数据发送到 Zapier 等中间件服务，该服务可以根据数据提交触发多个事件。或者，他们使用 Gatsby Functions 来运行此逻辑，同时保持身份验证凭据安全。

如果您使用的是 Hubspot 或 Marketo 等营销自动化供应商，您有几种选择：您可以编写自己的表单并将数据发送到供应商的端点，或者您可以嵌入供应商的 Javascript。

供应商通常有用于其表单的 JavaScript 小部件。

我们发现这些表单往往非常臃肿，重达数百 KB。这通常比页面的其余部分加起来还要多，并且可能会使某些设备上的页面加载延迟一到两秒。对于转化至关重要的页面，这可能是一个不可接受的权衡。

或者，这些服务通常有一个用于发送数据的端点。如果您打算允许营销人员能够添加字段到例如 Hubspot 的表单中，您需要确保这些字段被拉入您的 Gatsby 表单，这可能需要一些工作或使用像 gatsby-source-hubspot-forms 这样的插件。