表单处理 #

什么是 Netlify Forms？ #

Netlify Forms 是一个内置的表单处理服务，无需编写后端代码即可处理表单提交。

text

用户提交表单 → Netlify 自动处理 → 存储并发送通知

优势 #

优势	说明
零后端	无需服务器或 API
自动存储	提交数据自动保存
邮件通知	新提交自动通知
反垃圾	内置垃圾过滤
Webhook	支持集成其他服务

基本使用 #

HTML 表单 #

最简单的方式是在 HTML 表单中添加 data-netlify="true" 属性：

html

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>姓名：<input type="text" name="name" /></label>
  </p>
  <p>
    <label>邮箱：<input type="email" name="email" /></label>
  </p>
  <p>
    <label>消息：<textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">提交</button>
  </p>
</form>

关键属性 #

属性	说明
`name`	表单名称，用于识别
`method="POST"`	必须使用 POST 方法
`data-netlify="true"`	启用 Netlify Forms

表单类型 #

联系表单 #

html

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" placeholder="姓名" required />
  <input type="email" name="email" placeholder="邮箱" required />
  <textarea name="message" placeholder="留言"></textarea>
  <button type="submit">发送</button>
</form>

订阅表单 #

html

<form name="subscribe" method="POST" data-netlify="true">
  <input type="email" name="email" placeholder="邮箱地址" required />
  <button type="submit">订阅</button>
</form>

文件上传表单 #

html

<form name="upload" method="POST" data-netlify="true" enctype="multipart/form-data">
  <input type="text" name="name" placeholder="姓名" />
  <input type="file" name="attachment" />
  <button type="submit">上传</button>
</form>

React 表单 #

方式一：隐藏表单 #

jsx

function ContactForm() {
  return (
    <form 
      name="contact" 
      method="POST" 
      data-netlify="true"
      netlify-honeypot="bot-field"
    >
      <input type="hidden" name="form-name" value="contact" />
      <p hidden>
        <label>
          不要填写：<input name="bot-field" />
        </label>
      </p>
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <textarea name="message" placeholder="留言"></textarea>
      <button type="submit">发送</button>
    </form>
  )
}

方式二：JavaScript 提交 #

jsx

import { useState } from 'react'

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  })

  const handleSubmit = async (e) => {
    e.preventDefault()
    
    const data = new FormData()
    data.append('form-name', 'contact')
    data.append('name', formData.name)
    data.append('email', formData.email)
    data.append('message', formData.message)

    await fetch('/', {
      method: 'POST',
      body: data
    })

    alert('提交成功！')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        placeholder="姓名"
        required
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        placeholder="邮箱"
        required
      />
      <textarea
        name="message"
        value={formData.message}
        onChange={(e) => setFormData({...formData, message: e.target.value})}
        placeholder="留言"
      />
      <button type="submit">发送</button>
    </form>
  )
}

Vue 表单 #

vue

<template>
  <form 
    name="contact" 
    method="POST" 
    data-netlify="true"
    @submit.prevent="handleSubmit"
  >
    <input type="hidden" name="form-name" value="contact" />
    <input 
      type="text" 
      name="name" 
      v-model="form.name" 
      placeholder="姓名"
      required 
    />
    <input 
      type="email" 
      name="email" 
      v-model="form.email" 
      placeholder="邮箱"
      required 
    />
    <textarea 
      name="message" 
      v-model="form.message" 
      placeholder="留言"
    />
    <button type="submit">发送</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        message: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      const data = new FormData()
      data.append('form-name', 'contact')
      data.append('name', this.form.name)
      data.append('email', this.form.email)
      data.append('message', this.form.message)

      await fetch('/', {
        method: 'POST',
        body: data
      })

      alert('提交成功！')
    }
  }
}
</script>

表单通知 #

邮件通知 #

text

Site settings → Forms → Form notifications → Add notification → Email

配置选项：

通知邮箱地址
邮件主题

Slack 通知 #

text

Site settings → Forms → Form notifications → Add notification → Slack

需要配置 Slack Webhook URL。

Webhook 通知 #

text

Site settings → Forms → Form notifications → Add notification → Webhook

Webhook 载荷示例：

json

{
  "data": {
    "name": "张三",
    "email": "zhangsan@example.com",
    "message": "这是一条测试消息"
  },
  "form_name": "contact",
  "form_id": "xxx",
  "site_url": "https://example.com",
  "created_at": "2024-01-01T00:00:00.000Z"
}

查看提交 #

控制台查看 #

text

Forms → 选择表单 → 查看提交列表

提交信息 #

每条提交包含：

提交时间
表单字段值
来源页面
用户 IP（部分）

导出提交 #

text

Forms → 选择表单 → Download CSV

反垃圾 #

Honeypot 字段 #

添加隐藏字段，机器人填写后会被标记为垃圾：

html

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <p hidden>
    <label>
      不要填写：<input name="bot-field" />
    </label>
  </p>
  <!-- 其他字段 -->
</form>

reCAPTCHA #

启用 Google reCAPTCHA：

html

<form name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true">
  <!-- 表单字段 -->
  <div data-netlify-recaptcha="true"></div>
  <button type="submit">提交</button>
</form>

垃圾过滤 #

Netlify 内置垃圾过滤：

自动检测垃圾提交
可手动标记/取消标记
垃圾提交不计入配额

自定义感谢页面 #

配置方式 #

html

<form 
  name="contact" 
  method="POST" 
  data-netlify="true"
  action="/thank-you"
>
  <!-- 表单字段 -->
</form>

提交后跳转到 /thank-you 页面。

感谢页面示例 #

html

<!DOCTYPE html>
<html>
<head>
  <title>感谢提交</title>
</head>
<body>
  <h1>感谢您的提交！</h1>
  <p>我们会尽快回复您。</p>
  <a href="/">返回首页</a>
</body>
</html>

表单限制 #

免费方案限制 #

限制项	免费额度
每月提交数	100 条
文件上传	10MB
保留时间	30 天

超出限制 #

超出后新提交会被拒绝
升级 Pro 方案可增加配额

表单 API #

获取表单列表 #

bash

curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://api.netlify.com/api/v1/sites/YOUR_SITE_ID/forms

获取提交列表 #

bash

curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://api.netlify.com/api/v1/forms/FORM_ID/submissions

获取单个提交 #

bash

curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://api.netlify.com/api/v1/submissions/SUBMISSION_ID

常见问题 #

Q: 表单提交后显示 404？ #

确保表单有正确的 name 属性和 data-netlify="true"。

Q: React 表单不工作？ #

确保添加隐藏字段：

html

<input type="hidden" name="form-name" value="contact" />

Q: 如何处理文件上传？ #

添加 enctype="multipart/form-data"：

html

<form enctype="multipart/form-data" ...>

Q: 如何防止垃圾提交？ #

使用 honeypot 字段和 reCAPTCHA。

最佳实践 #

1. 使用 Honeypot #

简单有效的反垃圾方法。

2. 添加验证 #

html

<input type="email" name="email" required />
<input type="text" name="name" minlength="2" required />

3. 设置感谢页面 #

提供良好的用户体验。

4. 配置通知 #

及时了解新提交。

5. 定期清理 #

导出并清理旧提交数据。

下一步 #

掌握了表单处理后，继续学习 Serverless Functions 扩展站点功能！