使用 Netlify Forms 将联系表单添加到 React 应用程序-51CTO.COM

将联系表单添加到 React 应用程序可能需要编写服务器端代码来处理表单提交，但是使用 Netlify Forms，您可以从逻辑中解脱出来，因为当您的网站运行时，它会为您完成所有幕后工作部署在Netlify上。

先决条件

要想学习本教程，您应该熟悉 React、Git 和 GitHub。您还应该有一个 Netlify 并且在您的计算机上安装了 Node。如果您在设置方面需要任何帮助，可以查阅我们的指南，了解如何使用 nvm 安装 Node。

你会学到什么

在本教程结束时，您将知道如何执行以下操作：

将 React 应用程序部署到 Netlify。
将 Netlify Forms 与无状态的表单组件(不使用状态的表单组件)集成。
将 Netlify Forms 与有状态表单组件(使用状态处理其数据的表单组件)集成。

GitHub 上面提供了本教程的完整指南。

Netlify 表单简介

Netlify Forms 是 Netlify 的一项功能，用于管理和处理表单提交，而无需编写任何服务器端代码。通过向 HTML 表单标签添加一个简单的属性，您就可以启动并运行 Netlify Forms。表单也可以使用 JavaScript 异步提交，使其成为 Vue、React 和其他现代框架支持的网站的绝佳伴侣。

Netlify 表单定价

Netlify Forms 可以免费开始使用，但在免费计划中每个网站每月提交 100 个别表单的限制，并且在使用免费套餐时不包括后台功能和基于角色的访问控制等一些功能。

要超出表单提交限制或使排除的功能可用，您必须升级到不同的计划。您可以在Netlify 定价页面上执行此操作。

为 Netlify 表单创建表单

Netlify 表单可以与无状态表单(一种不使用状态来处理其数据的表单)和有状态表单(一种使用状态来处理其数据的表单)集成。在本教程中，我们将首先创建一个无状态表单来演示如何将 Netlify Forms 与其集成。但稍后，我们会将无状态表单重构为有状态表单，其中我们还将与 Neltify Forms 集成。

让我们重新创建和设置一个新的 React 应用开始。

创建和设置 React

在终端中输入以下命令来创建一个新的 React 应用程序：

$ npx create-react-app netlify_forms_app

这里我们的应用程序的名称是netlify_forms_app，但你可以给它任何你想要的名称，只要它不是一个受限的 npm 名称。安装完成后，切换到新创建的目录，然后npm start在终端中使用命令启动应用程序。

让我们稍微清理一下(可选)我们的应用程序。在src应用程序的目录中，删除以下文件：

App.test.js。
logo.svg。
setupTests.js。

我们删除了这些文件，因为它们在我们的构建中与我们无关。我们也可以删除reportWebVitals文件。这样做要求我们还reportWebVitals从index.js文件中删除 import 语句和函数调用，以便我们的 React 应用程序成功编译。同样，这都是可选的，所以如果你愿意，你可以跳过这个。

现在，清理App.js文件，使其看起来像这样：

// src/App.js
import './App.css';
function App() {
  return (
  );
}
export default App;

创建联系表单组件

在src我们的 React 应用程序的目录中，创建一个Form.js文件并向其中添加以下代码行：

// src/Form.js
import './form.css'
export default function Form() {
  return (
    <form 
      method='POST' 
      name='contactform' 
      className='contactForm'>

      <input 
        type='text' 
        name='name' 
        placeholder='Enter your name' />
      <input 
        type='email' 
        name='email' 
        placeholder='Enter your email' />
      <textarea 
        name='message' 
        placeholder='Messaage'></textarea>
      <button type='submit'>Submit</button>
    </form>
  )
}

在这里，我们有一个无状态的存在 React 表单。现在，转到目录App.js中的文件src并呈现表单。该App.js文件应如下所示：

import './App.css';
import Form from './Form'
function App() {
  return (
    <Form />
  );
}
export default App;

使用纯 CSS 样式化表单组件

在src目录中，创建一个form.css文件并添加以下样式：

// src/form.css
.contactForm{
  padding: 10px;
  width: 90%;
  max-width: 400px;
  margin: 30px auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contactForm input, button, textarea{
  height: 50px;
  padding-left: 5px;
  font-size: 18px;
}
.contactForm textarea{
  height: 100px;
}

无需编写任何花哨的 CSS，但如果您愿意，可以添加一些调整。使用我们添加的样式，我们的 HTML 表单现在看起来如下图所示。

要查看结果，您需要切换到netlify_forms_app文件夹并启动服务器：

cd netlify_forms_app
npm start

将打开一个浏览器，您可以在http://localhost:3000查看结果。

使用无状态 React 联系表单处理表单

无状态 React 表单的一个完美示例是我们之前创建的那个。在这种形式中，我们的输入值不受状态控制。在本节中，我们将学习如何使用 Netlify Forms 将联系表单添加到无状态的 React 应用程序。

添加表单的静态 HTML 版本

使我们的表单能够与 Netlify Forms 一起工作的第一步是将表单的静态 HTML 版本添加到我们的 React 应用程序目录中的index.html文件中。public为什么我们需要添加这个表单?添加这个 HTML 表单将有助于 Netlify 检测我们的 JSX 表单，因为后处理机器人只能解析 HTML。

对于此示例，我们将在打开文件中的标记后立即添加此 HTML 表单index.html：

<!-- public/index.html -->
<form name='contactForm' netlify hidden>
  <input type='text' name='name' />
  <input type='email' name='email' />
  <textarea name='message'></textarea>
</form>

在这种形式中需要注意两个属性：name和netlify。该name属性将使 Netlify 能够与我们的 JSX 表单连接，而该netlify属性将使 Nelify 的机器人能够解析我们的表单。我们还使用该hidden属性对用户隐藏表单。无需向此表单添加标签或提交按钮，因为它对我们的网站是隐藏的。

向 JSX 表单添加隐藏的输入元素

在目录中的Form.js文件中src，添加一个隐藏的 input 元素，其name属性设置为form-name，并且该value属性等于我们表单的 HTML 版本的名称。这些属性是使我们的表单与 Netlify Forms 一起工作所必需的：

// src/Form.js
<input 
  type='hidden' 
  name='form-name'
  value='contactForm' />

我们表单的最终版本现在看起来像这样：

// src/Form.js
<form 
  method='POST' 
  name='contactform' 
  className='contactForm'>
  <input 
    type='hidden'
    name='form-name'
    value='contactForm' />
  <input 
    type='text' 
    name='name' 
    placeholder='Enter your name' />
  <input 
    type='email' 
    name='email' 
    placeholder='Enter your email' />
  <textarea 
    name='message' 
    placeholder='Messaage'></textarea>
  <button type='submit'>Submit</button>
</form>

这个表单还需要一个步骤才能开始工作：将我们的 React 应用程序部署到 Netlify。我们将在下一节中介绍这一点。

部署到 Netlify

我们可以使用GitHub之类的版本控制系统将我们的站点部署到 Netlify ，也可以使用拖放的方法，这需要我们将build运行npm run build命令创建的文件传输到 Netlify拖放页面。以下部分将介绍这两种部署方法，但在本教程中，我们将使用 GitHub 进行部署。

使用 GitHub 部署

从 GitHub 部署我们的 React 应用程序将为我们设置持续部署，这意味着对我们的存储库所做的更改将自动触发我们站点的重新部署，这比使用拖放方法具有优势。

为了能够从 GitHub 进行部署，我们必须首先让我们的 React 应用程序可用。转到 GitHub 并创建一个新的存储库。

对于本教程，我们将存储库命名为“NelifyForms”。现在在页面底部，单击Create Repository按钮，我们将被重定向到新创建的存储库页面。

现在，这个存储库是空的。那是因为我们还没有将我们的 React 应用程序推送到它。为此，请在终端中输入以下命令：

$ git add *
$ git commit -m 'netlify forms with stateless form'
$ git remote add origin <Your_repoistory's_url>
$ git push -u origin master

这些命令将创建一个新的提交，将我们连接到我们的 GitHub 存储库，最后将我们的 React 应用程序推送到它。

确保更换使用新创建的 GitHub 存储库的 URL。这是一张图片，显示了在哪里可以找到新创建的存储库的 URL。

运行上述git命令后，刷新浏览器。你会发现我们的 React 应用已经被推送到了 GitHub。

现在我们的 React 应用程序在 GitHub 上可用，是时候在 Netlify 上部署它了。登录到您的 Netlify 帐户，转到仪表板，然后单击“从 Git 新建站点”按钮。我们将被带到创建新站点页面。

单击持续部署部分下的GitHub按钮。然后我们被重定向到授权页面，Netlify 将在该页面请求访问 GitHub。授予 Netlify 访问权限后，我们将看到如下所示的页面。

现在，我们之前创建的NetlifyForms存储库没有显示在存储库列表中，因为我们还没有配置 Netlify 来访问它。

为此，请单击页面底部的在 GitHub 上配置 Netlify 应用程序链接。我们将看到如下所示的页面。

滚动到存储库访问部分下的页面底部，然后单击选择存储库按钮。我们将看到我们的 GitHub 存储库列表。

选择NelifyForms存储库，然后单击保存以授予 Netlify 访问此存储库的权限。保存后，我们将被重定向到 Netlify 上的创建新站点页面。

我们的NetlifyForms存储库现在显示在列表中。点击它，我们会看到这样的页面。

在此页面上，我们可以设置站点的构建和部署选项，例如更改要部署的 Git 分支，或用于部署站点的命令。但是没有必要这样做，因为默认情况下一切看起来都很好。

最后，要将我们的站点部署到 Netlify，滚动到页面底部并单击部署站点按钮。部署可能需要一段时间，但一旦完成，我们将在站点仪表板页面的右上角看到指向我们站点的链接。

至此，我们的 React 应用程序已成功从 GitHub 部署到 Netlify。当我们单击链接时，我们将看到我们构建的 React 表单。

使用拖放进行部署

使用这种方法部署更简单，但缺点是我们的站点不会设置为持续部署。如果我们的 React 应用程序在 GitHub、GitLab 或 Bitbucket 上可用，我们可以在部署后手动设置。

要使用拖放方法，我们必须首先构建我们的 React 应用程序。打开终端并导航到我们的 React 应用程序所在的目录，然后输入以下命令：

$ npm run build

build构建完成后，在 React 应用程序的根目录中应该有一个名为的新文件夹。我们的目录结构现在看起来像这样：

> build
> node_modules
> public
> src

现在剩下的就是将这个文件夹拖放到Netlify的拖放页面中。

我们可以通过在系统文件资源管理器中导航到我们的 React 应用程序的位置来做到这一点，然后将build文件夹拖放到Netlify 的拖放页面。

这是一个 GIF 来说明这一点。

一旦我们将文件夹拖放build到 Netlify，它将被上传和部署。然后我们将被重定向到我们网站的仪表板页面。已部署站点的 URL 位于页面的右上角。

单击该 URL，您将看到我们构建的联系表。填写表格并点击提交按钮。您将被重定向到感谢确认页面。

凉爽的!我们已经成功地使我们的无状态 React 表单与 Netlify Forms 一起工作。现在，通过我们的应用程序提交的每个表单都由 Netlify Forms 处理。

目前，当提交新表单时，我们不会通过电子邮件收到任何通知，因为我们还没有设置表单提交将被发送到的电子邮件地址。我们将很快介绍这一点。

管理联系表单提交

Netlify 不仅使添加联系表格变得简单，而且还包括通过我们的联系表格提交的内容可以被删除、标记为垃圾邮件或下载的功能。还有空间将我们的表单与 Netlify 的无服务器功能集成。你可以在这里阅读。

要访问提交管理页面，请转到之前在 Netlify 上部署的站点仪表板页面，然后单击导航栏中的表单链接。

单击表单链接后，您将被重定向到表单仪表板页面。

点击Active forms部分下的contactForm以查看通过我们的联系表提交的管理页面。

添加通知和自定义确认页面

在本节中，我们将介绍如何添加通知功能，使我们能够接收新表单提交的电子邮件通知。我们还将介绍如何自定义表单成功提交后显示的感谢确认页面。

通过电子邮件接收通知

在我们站点的仪表板中，导航到站点设置>表单>表单通知。然后单击添加通知按钮。将弹出一个菜单。

Netlify 为我们提供了三个关于如何接收通知的选项。在本教程中，我们将使用电子邮件通知。

单击电子邮件通知并填写出现的表格。

我们更关心的字段是Email to notify字段。确保输入您希望接收电子邮件通知的电子邮件地址。

现在，当我们打开已部署的站点 URL 并提交新表单时，我们应该会收到一封电子邮件通知。

自定义确认页面

自定义确认页面，第一步是为目录中文件的元素添加一个action属性：formindex.htmlpublic。

// public/index.htmm
<form name="contactForm" netlify action="/confirmation-page" hidden>
...

我们已将action属性设置为 equal /confirmation-page。这将告诉 Netlify 在提交表单后重定向到此页面。虽然会重定向到确认页面，但 URL 路径不会发生变化。要同时更改 URL 路径，我们还需要将action属性添加到文件中的 JSX 表单Form.js：

// src/Form.js
...
<form 
  method='POST' 
  name='contactform' 
  className='contactForm'
  action='/confirmation-page'>
...

完成此操作后，接下来就是创建确认页面。

在public我们的 React 应用程序的目录中，创建一个confirmation-page.html文件并添加以下代码行：

<!-- public/confirmation-page.html -->
<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="utf-8">
    <title>confirmation0 page</title>
  </head>
  <body>
    <div style='text-align: center; font-size:1.5rem;'>
      <h2>Thank you</h2>
      <small>You will be replied to shortly</small>
    </div>
  </body>
</html>

为了测试确认页面是否有效，我们必须重新部署我们的站点。我们从 GitHub 部署了我们的网站，这是一件好事。我们现在要重新部署它所要做的就是编写一些 Git 命令，瞧!我们的网站将在 Netlify 上自动重新部署。

以下是命令：

$ git add *
$ git commit -m 'added confirmation page'
$ git push

这些命令创建一个新的提交并修改我们的 GitHub 存储库。由于我们已将 Netlify 连接到NetlifyFormsGitHub 上的存储库，因此当对其进行修改时，Netlify 会立即注意到该修改并重新部署我们的站点。

重新部署我们的网站并提交新表单后，我们将看到确认页面。

有状态的 React 表单中的表单处理

在本节中，我们将学习如何使用基于类的组件和 React 钩子使用 Netlify Forms 将联系表单添加到有状态的 React 应用程序。

我们将使用我们在“使用无状态 React 联系表单处理表单”部分中创建的表单。

注意：在本节中，我们不会介绍部署或如何接收电子邮件通知。我们已经在前面的部分中介绍过。

使用基于类的组件处理表单

要使用我们在上一节中创建的表单(以演示如何将 Netlify 表单与有状态的 React 表单一起使用)，我们首先必须将表单从无状态表单更改为有状态表单。

该Form.js文件应如下所示：

// src/Form.js
import './form.css'
import {Component} from 'react'
export default class Form extends Component{
  constructor(props){
    super(props)
    this.state = { name: '', email: '', message: '' }
  }
  handleChange = e =>
    this.setState({ [e.target.name]: e.target.value })
  render() {
    const { name, email, message } = this.state
    return (
      <form className='contactForm' >
        <input 
          type='text' 
          name='name' 
          value={name}
          placeholder='Enter your name'
          onChange={this.handleChange} />
        <input 
          type='email' 
          name='email' 
          value={email}
          placeholder='Enter your email'
          onChange={this.handleChange} />
        <textarea 
          name='message' 
          placeholder='Messaage'
          value={message}
          onChange={this.handleChange}></textarea>
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

下一步是创建一个负责发布表单提交的方法。为此，我们必须首先onSubmit向表单添加一个事件侦听器：

// src/Form.js
...
<form 
  className='contactForm' 
  onSubmit={this.handleSubmit}>
...

现在，让我们创建一个handleSubmit方法，它将新的表单提交发布到 Netlify Forms。

handleChange在组件中的方法后面添加如下代码Form：

// src/Form.js
...
handleSubmit = e => {
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({ 'form-name': 'contactForm', ...this.state })
  })
    .then(() => alert('Success!'))
    .catch(error => alert(error))
  e.preventDefault()
}
...

请注意，在请求的正文中，我们使用了一个encode函数。我们将很快创建它。此函数在发布之前对表单中的特殊字符 ( ?, =, /, ) 进行编码。

最后，在组件之前添加以下代码行Form：

...
const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&');
}
...

我们的Form.js文件现在应该如下所示：

// src/Form.js
import './form.css'
import {Component} from 'react'
const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&');
}
export default class Form extends Component{
  constructor(props){
    super(props)
    this.state = { name: '', email: '', message: '' }
  }
  handleChange = e =>
    this.setState({ [e.target.name]: e.target.value })
  handleSubmit = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'contactForm', ...this.state })
    })
      .then(() => alert('Success!'))
      .catch(error => alert(error))
    e.preventDefault()
  }
  render() {
    const { name, email, message } = this.state
    return (
      <form 
        className='contactForm' 
        onSubmit={this.handleSubmit}>
        <input 
          type='text' 
          name='name' 
          value={name}
          placeholder='Enter your name'
          onChange={this.handleChange} />
        <input 
          type='email' 
          name='email' 
          value={email}
          placeholder='Enter your email'
          onChange={this.handleChange} />
        <textarea 
          name='message' 
          placeholder='Messaage'
          value={message}
          onChange={this.handleChange}></textarea>

        <button type='submit'>Submit</button>
      </form>
    )
  }
}

此表单只有在我们为其部署和设置电子邮件通知时才能正常工作。这在前面的部分中有所介绍。

使用 React 钩子处理表单

我们将在本节中使用的 React 钩子是useState钩子。该useState钩子将让我们向功能组件添加状态。

要在我们之前创建useState的组件中使用钩子Form，我们首先需要导入useState钩子，然后将基于类的Form组件转换为函数式组件。

该Form.js文件应如下所示：

// src/Form.js
import './form.css'
import {useState} from 'react'
const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&');
}
export default function Form (){
  const [state, setState] = useState({name: '', email: '', message: '' })
  const handleChange = e =>
    setState({...state, [e.target.name]: e.target.value })
  const handleSubmit = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'contactForm', ...state })
    })
      .then(() => alert('Success!'))
      .catch(error => alert(error))
    e.preventDefault()
  }
  return (
    <form 
      className='contactForm' 
      onSubmit={handleSubmit}>
      <input 
        type='text' 
        name='name' 
        value={state.name}
        placeholder='Enter your name'
        onChange={handleChange} />
      <input 
        type='email' 
        name='email' 
        value={state.email}
        placeholder='Enter your email'
        onChange={handleChange} />
      <textarea 
        name='message' 
        placeholder='Messaage'
        value={state.message}
        onChange={handleChange}></textarea>
      <button type='submit'>Submit</button>
    </form>
  )
}

现在，为联系表单部署和设置电子邮件通知以开始工作。

结论

我希望你发现这个简单的练习表格教程很有用。我希望你会同意 Netlify 提供了一个可行的选项来向你的 React 应用程序添加一个联系表单——它可以节省你的时间并让你不必处理服务器端编码。