如何手动半填充HTML表单并邮件发送？动态填充字段及弃用谷歌表格需求

嘿，我刚好处理过类似的需求，完全脱离Google表格也能实现你的目标——既可以在撰写邮件时动态填充部分字段，又能把HTML表单嵌入邮件正文发送。下面是几个落地性强的方法：

1. 浏览器书签脚本：一键快速填充 #

适合你日常手动写邮件时，快速给表单填充固定/动态字段（比如日期、编号、默认信息）。

步骤： #

• 先把你的HTML表单存成一个本地HTML文件，或者放在一个静态页面上。
• 创建一个浏览器书签，把下面的代码粘贴进去（根据你的字段ID修改）：

javascript:(function(){
  // 填充当前日期（格式可自定义）
  document.getElementById('form-date').value = new Date().toLocaleDateString('zh-CN');
  // 填充你的默认姓名/邮箱
  document.getElementById('sender-info').value = '你的姓名 <your-email@example.com>';
  // 生成随机工单编号
  document.getElementById('ticket-number').value = 'WORK-' + Math.floor(Math.random() * 10000);
})();

• 每次需要发邮件时，打开你的表单页面，点击这个书签，指定字段就会自动填充，然后你复制整个表单的HTML到邮件正文（记得切换到邮件客户端的HTML编辑模式）。

2. 本地HTML模板：自动加载填充 #

做一个带自动填充逻辑的本地HTML模板，打开页面就自动填好部分字段，你只需要补充剩余内容再复制到邮件。

示例模板代码（可以直接存成.html文件本地打开）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>预填充表单模板</title>
  <script>
    window.onload = function() {
      // 页面加载时自动填充动态字段
      document.getElementById('auto-date').value = new Date().toLocaleString();
      document.getElementById('auto-sender').value = '你的姓名';
      // 用时间戳生成唯一参考码
      document.getElementById('auto-ref').value = 'REF-' + Date.now().toString().slice(-6);
    };
  </script>
</head>
<body>
  <form action="你的Google Apps Script Web App地址" method="POST">
    <div>
      <label>提交日期：</label>
      <input type="text" id="auto-date" name="submit-date" readonly>
    </div>
    <div>
      <label>发件人：</label>
      <input type="text" id="auto-sender" name="sender-name">
    </div>
    <div>
      <label>参考码：</label>
      <input type="text" id="auto-ref" name="ref-code" readonly>
    </div>
    <div>
      <label>问题描述：</label>
      <textarea name="issue-desc" rows="4" placeholder="请手动填写问题详情"></textarea>
    </div>
    <button type="submit">提交表单</button>
  </form>
  <p style="color:#666; margin-top:20px;">提示：选中整个表单区域，复制后粘贴到邮件的HTML编辑模式中</p>
</body>
</html>

优势： #

• 完全本地运行，不需要依赖任何在线工具
• 预填字段设置readonly可以防止误修改
• 收件人收到邮件后，直接填写剩余字段就能提交到你的Web App（之前的Google Apps Script可以继续用，它只负责接收数据存表格，和发邮件方式无关）

3. 邮件客户端模板+变量替换 #

如果常用Gmail、Outlook这类支持模板的客户端，可以创建带占位符的HTML表单模板，再用脚本或插件替换占位符为动态内容。

比如Gmail模板里的片段：

<div>
  <label>日期：</label>
  <input type="text" name="date" value="{{CURRENT_DATE}}">
</div>
<div>
  <label>工单编号：</label>
  <input type="text" name="ticket-id" value="{{RANDOM_ID}}">
</div>

你可以用简单的JavaScript脚本把{{CURRENT_DATE}}替换成当前日期，{{RANDOM_ID}}替换成随机编号，再粘贴到邮件里。

关键注意事项 #

• 邮件客户端兼容性：部分邮件客户端（比如苹果邮件）可能会禁用表单提交功能，建议先测试目标收件人的客户端。如果提交有问题，可以改成让收件人填写后回复邮件，或者引导他们跳转到在线表单。
• HTML编辑模式：大多数邮件客户端默认是可视化编辑，需要切换到HTML模式才能正确粘贴表单代码。

内容的提问来源于stack exchange，提问作者Ankit Aggarwal