如何在任何静态网站上添加联系表单（无后端）

看起来您只提供了来源链接，但没有贴出需要翻译的正文内容。请把要翻译的文本（文章正文）粘贴在这里，我会按照要求保留链接并翻译成简体中文。

介绍

静态站点速度快、成本低、部署简便，但它们缺乏内置的表单提交处理方式。没有后端（PHP、Node、数据库等），你需要使用第三方服务来收集数据、发送邮件通知并防止垃圾信息。

本指南展示了三种方法——从最简单的两分钟设置到完全自定义的解决方案——以 SnapForm 为示例服务。

Source: …

选项 1：使用 SnapForm 后端的纯 HTML 表单

最快的方法是将你的 HTML 表单指向 SnapForm 的端点。SnapForm 会存储提交内容、发送邮件通知，并提供开箱即用的垃圾信息防护（蜜罐）。

基本表单

<form action="https://snapform.cc/api/f/YOUR_FORM_ID" method="POST">
  <label>
    Name
    <input type="text" name="name" required />
  </label>

  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <button type="submit">Send Message</button>
</form>

无需 JavaScript、无需构建步骤、无需依赖。 每一次提交都会出现在你的 SnapForm 仪表盘中，并触发邮件通知。

免费功能

• 邮件通知
• 文件上传（大多数服务对此收费）
• 垃圾信息防护（蜜罐，无需 CAPTCHA）
• CSV 导出

添加文件上传

<form action="https://snapform.cc/api/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
  <label>
    Attach your resume
    <input type="file" name="resume" />
  </label>

  <button type="submit">Submit</button>
</form>

支持的文件类型：JPEG、PNG、GIF、PDF、DOC/DOCX、XLS/XLSX、TXT、CSV、ZIP。

使用 JavaScript 上传文件

const form = document.querySelector('form');
const formData = new FormData(form);

// Do NOT set Content-Type; the browser adds the multipart boundary automatically
const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
  method: 'POST',
  body: formData,
});

提示： 在通过 fetch 上传文件时，省略 Content-Type 头部，让浏览器自行设置正确的 multipart 边界。

选项 2：使用 JavaScript 处理提交（不进行页面重定向）

如果你更喜欢单页体验（例如在 React、Vue、Astro 中），可以拦截表单提交并通过 fetch 发送数据。

const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);
  const data = Object.fromEntries(formData);

  try {
    const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (res.ok) {
      form.reset();
      alert('Message sent!');
    } else {
      alert('Something went wrong. Please try again.');
    }
  } catch (err) {
    alert('Network error. Please try again.');
  }
});

这在任何域名下都能工作，因为 SnapForm 支持 CORS。

React 示例

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');

    const data = Object.fromEntries(new FormData(e.target));

    const res = await fetch('https://snapform.cc/api/f/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? 'sent' : 'error');
  }

  if (status === 'sent')
    return <p>Thanks! Message received.</p>;

  return (
    <form id="contact-form" onSubmit={handleSubmit}>
      {/* form fields go here */}
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending...' : 'Send'}
      </button>
    </form>
  );
}

选项 3：高级集成（Webhook、API）

将提交发送到 Slack、Zapier 或您自己的 API

在 SnapForm 仪表盘中添加一个 webhook URL。每次提交都会触发一次带有以下负载的 POST 请求：

{
  "formId": "your-form-id",
  "formName": "Contact Form",
  "submissionId": "abc123",
  "data": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "message": "Hello!"
  },
  "createdAt": "2026-02-28T10:30:00.000Z"
}

编程访问（专业/企业计划）

您可以通过 API 查询表单和提交记录。

# 列出所有表单
curl -H "Authorization: Bearer sk_live_xxx" \
  https://snapform.cc/api/v1/forms

# 使用分页获取提交记录
curl -H "Authorization: Bearer sk_live_xxx" \
  "https://snapform.cc/api/v1/forms/FORM_ID/submissions?page=1&limit=10"

这对于构建自定义仪表盘、同步到 CRM，或进行定时导出非常有用。

定价比较

结论

对于大多数静态站点，选项 1（纯 HTML + SnapForm 后端）已足够。它可在任何地方运行——GitHub Pages、Vercel、Netlify、Cloudflare Pages，或本地 HTML 文件——无需任何 JavaScript、后端或 CAPTCHA。

如果需要更流畅的用户体验，请使用 选项 2 通过 JavaScript 处理提交。对于复杂的工作流，可将 选项 3 与 webhook 或 SnapForm API 集成。

有用链接

• SnapForm – Free signup (no credit card required)
• SnapForm Documentation
• Full API Reference