如何实现表单提交内容自动发布至网站指定页面？

纯HTML/CSS无法完成数据持久化和跨页面展示，必须结合后端逻辑或静态站点服务实现，以下是几种实用方案：

方案一：后端语言处理（通用生产方案） #

核心逻辑是通过后端接收表单数据，同步完成「存储数据+发送邮件」两个动作，再让展示页面从存储介质中读取数据渲染。

示例：Node.js + Express 实现 #

1. 搭建后端服务接收表单：

const express = require('express');
const fs = require('fs');
const path = require('path');
const nodemailer = require('nodemailer');
const app = express();

// 解析表单提交的urlencoded数据
app.use(express.urlencoded({ extended: true }));

// 处理表单提交请求
app.post('/submit-form', (req, res) => {
  const formData = req.body;
  const dataFile = path.join(__dirname, 'submissions.json');

  // 1. 保存数据到JSON文件（也可替换为MySQL、SQLite等数据库）
  let submissions = [];
  if (fs.existsSync(dataFile)) {
    submissions = JSON.parse(fs.readFileSync(dataFile, 'utf8'));
  }
  submissions.push({ ...formData, createdAt: new Date().toISOString() });
  fs.writeFileSync(dataFile, JSON.stringify(submissions, null, 2));

  // 2. 发送邮件到指定邮箱（需提前配置邮箱授权信息）
  const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: 'your-email@gmail.com',
      pass: 'your-app-specific-password'
    }
  });
  const mailOptions = {
    from: 'your-email@gmail.com',
    to: 'your-email@gmail.com',
    subject: '新的表单提交通知',
    text: `提交内容：\n${JSON.stringify(formData, null, 2)}`
  };
  transporter.sendMail(mailOptions, (err) => err && console.log(err));

  // 提交成功后跳转至感谢页
  res.redirect('/thank-you.html');
});

// 提供获取提交数据的接口
app.get('/get-submissions', (req, res) => {
  const dataFile = path.join(__dirname, 'submissions.json');
  const submissions = fs.existsSync(dataFile) ? JSON.parse(fs.readFileSync(dataFile, 'utf8')) : [];
  res.json(submissions);
});

// 托管前端静态文件
app.use(express.static('public'));
app.listen(3000, () => console.log('服务运行在 http://localhost:3000'));

2. 前端展示页面（如submissions.html）渲染数据：

<!DOCTYPE html>
<html>
<body>
  <h2>用户提交内容</h2>
  <div id="submissions-container"></div>

  <script>
    // 从后端接口拉取数据并渲染
    fetch('/get-submissions')
      .then(res => res.json())
      .then(data => {
        const container = document.getElementById('submissions-container');
        data.forEach(item => {
          const card = document.createElement('div');
          card.style.border = '1px solid #ddd';
          card.style.padding = '1rem';
          card.style.margin = '1rem 0';
          card.innerHTML = `
            <h3>${item.username || '匿名用户'}</h3>
            <p>${item.content}</p>
            <small>${new Date(item.createdAt).toLocaleString()}</small>
          `;
          container.appendChild(card);
        });
      });
  </script>
</body>
</html>

方案二：静态站点服务集成（无自建后端） #

如果你的站点是静态托管（如GitHub Pages、Netlify），可以用平台自带的表单处理能力：

• 配置平台表单功能，提交后数据会存储在平台后台
• 通过平台提供的API或数据导出功能，将提交数据导出为JSON文件
• 在展示页面通过JS读取JSON文件并渲染，同时配置平台的邮件通知功能，让提交内容自动发送到你的邮箱

方案三：本地存储（仅个人测试用） #

如果仅用于个人测试，不需要其他用户看到提交内容，可使用localStorage临时存储，但数据仅在当前浏览器可见，不适合生产环境：

<!-- 表单页面提交逻辑 -->
<form id="user-form">
  <input type="text" name="username" placeholder="你的名字">
  <textarea name="content" placeholder="提交内容"></textarea>
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('user-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    // 存储到localStorage
    const submissions = JSON.parse(localStorage.getItem('submissions')) || [];
    submissions.push(data);
    localStorage.setItem('submissions', JSON.stringify(submissions));
    // 跳转至展示页
    window.location.href = '/submissions.html';
  });
</script>

<!-- 展示页面渲染逻辑 -->
<div id="submissions-list"></div>
<script>
  const submissions = JSON.parse(localStorage.getItem('submissions')) || [];
  const list = document.getElementById('submissions-list');
  submissions.forEach(item => {
    const div = document.createElement('div');
    div.innerHTML = `<p><strong>${item.username}:</strong> ${item.content}</p>`;
    list.appendChild(div);
  });
</script>

内容的提问来源于stack exchange，提问作者teddi heberle