发送电子邮件并在联系表单谷歌表中加载动画

问题描述 投票：0回答：1

努力实现

  • 向收件人和发件人电子邮件地址发送电子邮件，或至少向收件人发送电子邮件，其中包含表单中输入的所有数据（例如：姓名、电子邮件、电话、消息、文件）。 这是电子邮件的图片，其中包含以表单提交的所有数据。

  • 还在提交表单和显示成功消息之间的时间延迟期间显示加载动画（我正在使用 swal.fire() 显示成功消息）。

什么不起作用

  • 我尝试添加功能，例如如果用户提交表单，则电子邮件会发送到收件人以及发件人的电子邮件地址（电子邮件副本），并包含表单中输入的所有数据（例如：姓名、电子邮件、电话、消息、文件）。但没有成功，这是代码：

MailApp.sendEmail({ to: [email protected], to: formObject.email,
 subject: "message submited",
 body: "name,email,phone,messsage,file" });

  • 我还成功编写了“提交表单并显示成功消息之后”之间的时间延迟加载动画代码（我使用 swal.fire() 显示成功消息），但无法在 google appscript 中的单个 html 中添加此单独的 css 和代码.

这是我尝试的延时加载动画

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#preloder").fadeIn();
  });//submit
});//document ready
/* Preloder */

#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    /* background: #000; */
    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: 4px solid #f44336; */
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #056d4d;
        /* border: 4px solid #673ab7; */
        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;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

这是我尝试添加电子邮件发送功能和延时加载动画功能的应用程序脚本。 {appscript 中制作的文件: (code.gs 和 index.html 以及库 ID)}.

图书馆编号

1CcBYkrGSeBRgphHUE92vWInyULOcJ1Ub6eFUR0_gI1h9I6whLjXtDA-P

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = '#'
var sh = 'file1'
var folderId = '#'

function processForm(formdata) {
  var superscript = SuperScript.initSuper(url, sh);
  var formObject = {};
  formdata.forEach(element => formObject[element.name] = element.value);
  formdata.forEach(element => formObject[element.message] = element.value);
  formdata.forEach(element => formObject[element.email] = element.value);
  formdata.forEach(element => formObject[element.phone] = element.value);

  var f = formdata.find(({ name }) => name == "myfile");
  var file = (f && f.value?.name && f.value?.data) ? superscript.uploadFile(folderId, formObject.myfile.data, formObject.myfilename) : "";
  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()
  ]);

}

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/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  
  
</head>
<body>
    <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" onsubmit="handleFormSubmit()">
                    <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" File="file" id="file">
              <small>For multiple/bigger file size please attach/share via google drive link in message section.</small>
                            </div>

                            <button type="submit" class= "btn btn-primary btn-block">SEND</button>
                        </div>
                    </div>
                </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() {
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',
                  value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            function success(){
                 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
          console.log(myfile)
      };
     $('#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>
  <script src="sweetalert2.all.min.js"></script>
</body>
</html>

javascript html jquery css google-apps-script
1个回答
0
投票

使用 GmailApp 发送多封电子邮件

我没有使用 

MailApp.sendEmail()
，而是使用 
GmailApp.sendEmail()
，因为它接受具有多个电子邮件的数组。我还添加了 
htmlbody
以匹配联系表单提交输出。

更改如下：

来自邮件应用程序：

MailApp.sendEmail({ to: [email protected], to: formObject.email,
 subject: "message submited",
 body: "name,email,phone,messsage,file" });

至 Gmail 应用程序：

  GmailApp.sendEmail(
    ["[email protected]", formObject.email],
    "message submited", '',
    { htmlBody: htmlEvaluate })

我有 2 个更改，即 

Code.gs
和添加的 
email.html
。

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .addMetaTag('viewport', 'width  =device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = 'sheets-url'
var sh = 'sheet-name'
var folderId = 'drive-folder-id'

function processForm(formdata) {
  var superscript = SuperScript.initSuper(url, sh);

  var formObject = {};
  formdata.forEach(element => formObject[element.name] = element.value);
  formdata.forEach(element => formObject[element.message] = element.value);
  formdata.forEach(element => formObject[element.email] = element.value);
  formdata.forEach(element => formObject[element.phone] = element.value);

  var f = formdata.find(({ name }) => name == "myfile");
  var file = (f && f.value?.name && f.value?.data) ? 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()
  ]);

  var html = HtmlService.createTemplateFromFile("email");

  html.info = {
    name: formObject.name,
    message: formObject.message,
    email: formObject.email,
    phone: formObject.phone,
    file: file && file.getUrl()
  }

  const htmlEvaluate = html.evaluate().getContent();

  GmailApp.sendEmail(
    ["[email protected]", formObject.email],
    "message submited", '',
    { htmlBody: htmlEvaluate }
  )
}

电子邮件.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Name: <?= info.name ?><br>
    Email: <?= info.email ?><br>
    Message: <?= info.message ?><br>
    <b>File</b>: <?= info.file ?>
  </body>
</html>

示例输出：

发送者和接收者的示例输出。

Sample Output

参考：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.