如何为现有Google Apps Script表单添加时间戳、捕获邮箱并转为弹窗模态框

需求说明 #

• 表单提交时自动捕获时间戳和提交者邮箱地址
• 将原独立Web应用表单改为Bootstrap模态框，嵌入到现有数据表页面中

修改后的完整代码 #

1. Code.gs #

// 新增：打开反馈模态框的函数（用于数据表页面触发）
function showFeedbackModal() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
    .setWidth(600)
    .setHeight(500);
  SpreadsheetApp.getUi().showModalDialog(html, 'App Directory 反馈表单');
}

// 保留include函数，用于加载JS文件
function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// 修改processForm函数：添加时间戳和邮箱捕获
function processForm(formObject){
  var url="你的数据表URL"; // 替换为实际的Spreadsheet URL
  var ss= SpreadsheetApp.openByUrl(url);
  var ws=ss.getSheetByName("Feedback");

  // 获取当前时间戳和提交者邮箱
  var timestamp = new Date();
  var submitterEmail = Session.getActiveUser().getEmail(); // 仅域内用户可获取，匿名用户返回空

  ws.appendRow([
    timestamp,
    submitterEmail,
    formObject.need,
    formObject.message
  ]);
}

// 可选：添加自定义菜单，方便用户打开模态框
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('反馈')
    .addItem('提交反馈', 'showFeedbackModal')
    .addToUi();
}

2. Index.html（改为Bootstrap模态框结构） #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <?!= include('JavaScript'); ?>
    <style>
      body {
        font-family: 'Lato', sans-serif;
        padding: 15px;
      }
      h4 {
        margin-bottom: 20px;
      }
      .btn-send {
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        width: 100%;
      }
      .help-block.with-errors {
        color: #ff5050;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h4>App Directory 反馈表单</h4>
      <form id="myForm" onsubmit="handleFormSubmit(this)">
        <div class="controls">
          <div class="row mb-3">
            <div class="col-md-12">
              <div class="form-group">
                <label for="need">请求类型 *</label>
                <select id="need" name="need" class="form-control" required="required" data-error="请选择需求类型">
                  <option value="" selected disabled>--选择你的需求--</option>
                  <option>添加新队列</option>
                  <option>添加应用</option>
                  <option>更新信息</option>
                  <option>其他</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12">
              <div class="form-group">
                <label for="message">反馈内容 *</label>
                <textarea id="message" name="message" class="form-control" placeholder="请输入你的反馈内容" rows="5" required="required" data-error="请填写反馈内容"></textarea>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <input type="submit" class="btn btn-success btn-send" value="提交请求">
            </div>
          </div>
        </div>
      </form>
      <div id="output" class="mt-3 text-success"></div>
    </div>

    <!-- Bootstrap JS依赖 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

3. JavaScript（修改提交逻辑，添加成功提示与模态框关闭） #

<script>
  function preventFormSubmit(){
    var forms=document.querySelectorAll('form');
    for (var i=0;i<forms.length;i++){
      forms[i].addEventListener('submit',function(event){
        event.preventDefault();
      });
    }
  }
  window.addEventListener('load',preventFormSubmit);

  function handleFormSubmit(formObject){
    google.script.run
      .withSuccessHandler(function() {
        document.getElementById("myForm").reset();
        document.getElementById("output").innerHTML = "反馈提交成功！";
        // 3秒后自动关闭模态框
        setTimeout(function() {
          google.script.host.close();
        }, 3000);
      })
      .processForm(formObject);
  }
</script>

关键修改说明 #

1. 自动捕获信息：

   • 在processForm中通过new Date()获取当前时间戳
   • 通过Session.getActiveUser().getEmail()获取提交者邮箱（仅适用于Google Workspace域内用户，匿名访问时返回空字符串）
   • 将时间戳和邮箱作为前两列追加到数据表中

2. 模态框嵌入改造：

   • 新增showFeedbackModal函数，使用SpreadsheetApp.getUi().showModalDialog在数据表页面打开模态框
   • 添加onOpen函数，自动在数据表菜单中添加「反馈」入口，方便用户触发
   • 修改Index.html为紧凑的模态框布局，适配Sheet内弹窗显示
   • 优化提交逻辑，添加成功提示并自动关闭模态框

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