Google Sheet联系表单邮件发送与加载动画问题求助

一、修复邮件发送功能 #

问题根源 #

1. MailApp.sendEmail参数错误：重复声明to属性，无法同时指定多个收件人；
2. 邮件正文未填充实际表单数据，仅使用固定字符串占位；
3. 未处理上传文件的链接展示逻辑；
4. formObject构建存在冗余循环，导致数据覆盖风险。

修改方案 #

• 用to指定主收件人，cc（抄送）添加发件人邮箱实现副本发送；
• 动态拼接表单数据到邮件正文，包含文件上传后的访问链接；
• 简化formObject构建逻辑，通过一次循环完成数据映射。

修改后的processForm函数：

function processForm(formdata) {
  var superscript = SuperScript.initSuper(url, sh);
  // 简化formObject构建
  var formObject = formdata.reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});

  var file = "";
  if (formObject.myfile && formObject.myfile.name && formObject.myfile.data) {
    file = superscript.uploadFile(folderId, formObject.myfile.data, formObject.myfile.name);
  }

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheets()[0];
  ws.appendRow([
    new Date(),
    formObject.name,
    formObject.message,
    formObject.email,
    formObject.phone,
    file ? file.getUrl() : ""
  ]);

  // 发送邮件
  const receiverEmail = "receiver_email@gmail.com"; // 替换为实际收件人邮箱
  const subject = "新表单提交通知";
  const body = `
姓名: ${formObject.name}
邮箱: ${formObject.email}
电话: ${formObject.phone}
留言: ${formObject.message}
${file ? `文件链接: ${file.getUrl()}` : "无附件"}
  `;

  MailApp.sendEmail({
    to: receiverEmail,
    cc: formObject.email, // 抄送给提交表单的用户
    subject: subject,
    body: body.trim()
  });
}

二、整合加载动画 #

问题根源 #

1. 加载动画的CSS未嵌入到HTML文件中；
2. 事件监听的表单ID与实际ID不匹配（原代码用#myform，实际为#myForm）；
3. 未在表单提交成功后隐藏加载动画。

修改方案 #

• 将加载动画CSS放入HTML的<style>标签内；
• 调整事件监听的表单ID为#myForm；
• 在handleFormSubmit中显示加载动画，在success回调中隐藏。

修改后的index.html完整代码：

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- 加载动画CSS -->
    <style>
        #preloder {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999999;
            background: #ffffff;
        }
        .loader {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -20px;
            margin-left: -20px;
            border-radius: 60px;
            animation: loader 0.8s linear infinite;
            -webkit-animation: loader 0.8s linear infinite;
        }
        @keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                border: 4px solid #056d4d;      
                border-left-color: transparent;
            }
            50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
        }
        @-webkit-keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            50% {
                -webkit-transform: rotate(180deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            100% {
                -webkit-transform: rotate(360deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
        }
    </style>
</head>
<body>
    <!-- 加载动画DOM -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
                <nav class="navbar navbar-dark bg-primary">
                    <a class="navbar-brand" href="#" fw-bold mb-3>WRITE YOUR QUERY / MESSAGE</a>
                </nav>
                <br>
                <form id="myForm">
                    <div id="form_alerts"></div>
                    <div class="form-group mb-3">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter your Name here|" name="name"required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="email" >Email</label>
                        <input type="email"  class="form-control" id="email" placeholder="Enter your email address here|" name="email" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="phone">phone number</label>
                        <input type="tel" id="phone" class="form-control" name="phone" placeholder="Enter your phone number here with country code|" pattern="[+]{1}[0-9]{2}[0-9]{10}" required>
                        <small>requested example Format: +919263943858</small>
                    </div>

                    <div class="form-group mb-3">
                        <label for="message">Message</label>
                        <textarea class="form-control" id="message" placeholder="Write your message here|" name="message" required ></textarea>
                    </div>

                    <div class="form-group mb-3">
                        <label for="uploadFile">Upload File</label>
                        <input type="file" class="form-control" id="file">
                        <small>For multiple/bigger file size please attach/share via google drive link in message section.</small>
                    </div>

                    <button type="submit" onclick="handleFormSubmit()" class= "btn btn-primary btn-block">SEND</button>
                </form>
            </div>
        </div>
    </div>

    <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() {
            // 显示加载动画
            $("#preloder").fadeIn();
            
            var formdata = $('#myForm').serializeArray()
            formdata.push({
                name: 'myfile',
                value: myfile
            })
            google.script.run.withSuccessHandler(success).processForm(formdata);
        }

        function success(){
            // 隐藏加载动画
            $("#preloder").fadeOut();
            
            document.getElementById("myForm").reset()
            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Sended successfully! Be ready we will contact you shortly',
                showConfirmButton: true,
            })
        }

        var myfile ={},file, reader = new FileReader();
        reader.onloadend = function(e) {
            myfile.data = e.target.result
            myfile.name = file.name
        };
        $('#file').change(function(){
            file = $('#file')[0].files[0]
            reader.readAsDataURL(file);
        })
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>

重要注意事项 #

1. 替换code.gs中的url、folderId、receiverEmail为实际项目值；
2. 确保SuperScript库已正确添加到Google Apps Script项目中；
3. 首次运行时需授权邮件发送权限，否则邮件功能无法正常工作。

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