用Netlify表单在React应用中添加一个联系表单的详细教程

热门技术勘探工
269 阅读4分钟

在本教程中，你将学习如何使用Netlify表单在React应用程序中添加一个联系表单。

在React应用程序中添加联系表单可能需要编写服务器端代码来处理表单提交，但使用Netlify表单，你可以从逻辑中抽身，因为当你的网站部署在Netlify上时，它为你做所有幕后工作。

前提条件

要跟上这个教程，你应该熟悉React、Git和GitHub。你还应该有一个Netlify账户，并在你的机器上安装Node。如果你需要任何帮助，你可以参考我们关于如何使用nvm安装Node的指南。

你将学到什么

在本教程结束时，你将知道如何做以下事情。

  • 在Netlify上部署一个React应用程序
  • 将Netlify表单与无状态表单组件（一个不使用状态的表单组件）整合起来
  • 将Netlify表单与有状态的表单组件（一个使用状态来处理数据的表单组件）集成。

本教程的完整指南可以在GitHub上找到。

Netlify表单简介

Netlify表单是Netlify的一项功能，用于管理和处理表单提交，而不需要编写任何服务器端代码。通过给您的HTML表单标签添加一个简单的属性，您就可以开始使用Netlify表单了。表单也可以用JavaScript异步提交，使其成为Vue、React和其他现代框架的网站的好伙伴。

Netlify表格定价

Netlify Forms是免费的，但在免费计划中，每个网站每月有100个表单提交的限制，而且在使用免费层时，一些功能，如后台功能和基于角色的访问控制被排除。

如果要超过表单提交的限制或使被排除的功能可用，你必须升级到另一个计划。你可以在Netlify定价页面上进行升级。

为Netlify表单创建一个表单

Netlify表单可以与无状态表单（不使用状态来处理其数据的表单）和有状态表单（使用状态来处理其数据的表单）集成。在本教程中，我们将首先创建一个无状态表单来演示我们如何将Netlify表单与之集成。但稍后，我们将把无状态表单重构为有状态表单，在这个表单中我们也将与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 文件。这样做需要我们同时删除index.js 文件中的导入语句和reportWebVitals 的函数调用，这样我们的React应用才能编译成功。同样，这都是可选的，所以如果你愿意，你可以直接跳过这一步。

现在，清理一下App.js 文件，使它看起来像这样。

javascript
// src/App.js
import './App.css';

function App() {
  return (

  );
}

export default App;

创建一个联系表单组件

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

javascript
// 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表单。现在，转到src 目录中的App.js 文件，渲染表单。App.js 文件应该看起来像这样。

javascript
import './App.css';
import Form from './Form'

function App() {
  return (
    <Form />
  );
}
export default App;

用普通的CSS来设计表单组件的样式

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

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表单现在看起来像下面的图片。

A simple contact form made with React

要看到这个结果，你需要换到netlify_forms_app 文件夹中并启动服务器。

cd netlify_forms_app
npm start

浏览器会打开，你可以在http://localhost:3000，查看结果。

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

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

添加一个静态HTML版本的表单

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

在这个例子中，我们将在我们的index.html 文件中打开<body> 标签后添加这个HTML表单。

markup
<!-- 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 属性来对我们的用户隐藏表单。没有必要为这个表单添加标签或提交按钮，因为它是在我们的网站上隐藏的。

在JJSX表单中添加一个隐藏的输入元素

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

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

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

javascript
// 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，也可以使用拖放的方法，这需要我们将运行npm run build 命令创建的build 文件转移到Netlify的拖放页面。这两种部署方法都将在下面的章节中介绍，但在本教程中，我们将使用 GitHub 进行部署。

使用GitHub进行部署

从GitHub部署我们的React应用将为我们的持续部署做准备，这意味着对我们的存储库所做的修改将自动触发我们网站的重新部署，这比使用拖放方法有优势。

为了能够从GitHub部署，我们必须首先使我们的React应用在GitHub上可用。进入GitHub，创建一个新的仓库。

Create a new repository page on GitHub

在本教程中，我们将该仓库命名为 "NelifyForms"。现在在页面的底部，点击创建仓库按钮，我们将被转到新创建的仓库页面。

Created new 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。

Repositories URL

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

NetlifyForms repository

现在我们的React应用已经在GitHub上可用了，是时候在Netlify上部署它了。登录你的Netlify账户，进入仪表盘，然后点击从Git上新建网站按钮。我们会被带到创建一个新网站的页面。

Create a new site page

点击持续部署部分下的GitHub按钮。然后我们会被转到一个授权页面，Netlify会要求我们访问GitHub。给予Netlify访问权后，我们会看到一个类似下图的页面。

Create a new site page

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

要做到这一点，请点击页面底部的配置GitHub上的Netlify应用链接。我们会看到一个类似下图的页面。

Configuration page for Netlify on GitHub

滚动到页面底部的存储库访问部分，点击选择存储库按钮。我们会看到一个 GitHub 仓库的列表。

Configuration page for Netlify on GitHub

选择NelifyForms仓库，然后点击保存，让 Netlify 访问这个仓库。保存后，我们会被重定向到Netlify的创建新网站页面。

Create a new site page on Nelify

我们的NetlifyForms资源库现在显示在列表中。点击它，我们会看到一个像这样的页面。

Site build and deployment page

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

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

Sites URL

这样，我们的React应用就已经从GitHub成功部署到Netlify了。当我们点击这个链接时，我们会看到我们建立的React表单。

React form

继续阅读 在SitePoint 上用Netlify表单为React应用程序添加一个联系表单。

avatar
文章
阅读
粉丝