表单提交后邮件通知、后端获提交者邮箱及全表单重置需求

API 探路者

2026-8-20

解决方案

针对你的三个需求，以下是修改后的代码及说明：

1. 表单提交时发送包含详情的邮件

在Google Apps Script中添加邮件发送逻辑，使用MailApp.sendEmail发送包含所有提交信息的邮件到指定邮箱。

2. 后端获取提交者邮箱并存入Google Sheets

通过Session.getActiveUser().getEmail()获取当前提交者的邮箱，将其添加到表格的行数据中。

3. 修复全表单重置问题

移除JavaScript中重复定义的handleFormSubmit函数，确保form.reset()能正确重置所有表单元素（包括文本域和文件输入）。

修改后的Code.gs

var folderID = ""; //替换为你的文件夹ID
var sheetName = "Data"; //替换为你的数据表名称
var recipientEmail = "你的邮箱地址"; //替换为接收通知的邮箱

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function uploadFiles(formObject) {
  try {
    var folder = DriveApp.getFolderById(folderID);
    var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
    var fileUrl = "";
    var fileName = "";
    var submitterEmail = Session.getActiveUser().getEmail(); //获取提交者邮箱

    //上传文件（如果存在）
    if (formObject.myFile.length > 0) {
      var blob = formObject.myFile;
      var file = folder.createFile(blob);
      file.setDescription("提交者: " + submitterEmail + " | 请求类型: " + formObject.need);
      fileUrl = file.getUrl();
      fileName = file.getName();
    } else {
      fileUrl = "无附件";
    }

    //保存记录到Google Sheets，包含提交者邮箱
    var submitDate = Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd HH:mm:ss");
    sheet.appendRow([
      submitterEmail,
      formObject.need,
      formObject.message,
      fileName,
      fileUrl,
      submitDate
    ]);

    //发送通知邮件
    var emailSubject = "新的IM增强请求提交";
    var emailBody = `
请求详情：
提交者邮箱：${submitterEmail}
请求类型：${formObject.need}
留言内容：${formObject.message}
附件名称：${fileName}
附件链接：${fileUrl}
提交时间：${submitDate}
    `;
    MailApp.sendEmail(recipientEmail, emailSubject, emailBody);

    return fileUrl;
  } catch (error) {
    return error.toString();
  }
}

修改后的Index.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <?!= include('JavaScript'); ?>
        <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            background-color: #161615;
            background-image: linear-gradient(180deg, #161615 0%, #0f5e59 17%, #20abad 63%, #000000 100%);
        }
        
        h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 70px;
            color: white;
            font-variant: small-caps;
            text-align: center;
            font-weight: bold;
            padding: 15px 0px 15px 0px;
        }
        
        label {
            color: #333;
        }
        
        .btn-send {
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            width: 80%;
            margin-left: 3px;
        }
        
        .help-block.with-errors {
            color: #ff5050;
            margin-top: 5px;
        }
        
        .card {
            margin-left: 10px;
            margin-right: 10px;
        }
        </style>
</head>

<body>
    <div class="formcontainer">
        <div class=" text-center mt-5 ">
            <h1>IM增强请求表单</h1> </div>
        <div class="row ">
            <div class="col-lg-7 mx-auto">
                <div class="card mt-2 mx-auto p-4 bg-light">
                    <div class="card-body bg-light">
                        <div class="container">
                            <form id="myForm" onsubmit="handleFormSubmit(this)">
                                <div class="controls">
                                    <div class="row">
                                        <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">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="message">留言内容 *</label>
                                                <textarea id="message" name="message" class="form-control" placeholder="请在这里输入你的留言。" rows="7" required="required" data-error="请填写留言内容。"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="FormControlFile">上传文件（可选）</label>
                                                <input name="myFile" class="form-control-file" type="file" id="FormControlFile" /> </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-12">
                                    <input type="submit" class="btn btn-success btn-send  pt-2 btn-block" value="提交请求"> </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="FormControlFile">说明：如需在应用目录中添加新队列或应用，请选择「添加队列」或「添加应用」；如需反馈建议，请选择「其他」。</label>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                
                                <div id="output"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

修改后的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(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
  }

  function updateUrl(url) {
    var div = document.getElementById('output');
    if(isValidURL(url)){
      div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">文件上传成功！</a></div>';
      document.getElementById("myForm").reset();
    }else{
      div.innerHTML = '<div class="alert alert-success" role="alert">请求提交成功！</div>';
      document.getElementById("myForm").reset();
    }
  }

  function onFailure(error) {
    var div = document.getElementById('output');
    div.innerHTML = '<div class="alert alert-danger" role="alert">' + error.message + '！</div>';
  }

  function isValidURL(string) {
    var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    return (res !== null);
  }
</script>

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

表单提交后邮件通知、后端获提交者邮箱及全表单重置需求

1. 表单提交时发送包含详情的邮件 #

2. 后端获取提交者邮箱并存入Google Sheets #

3. 修复全表单重置问题 #

修改后的Code.gs #

修改后的Index.html #