Google Apps 脚本 HTML 表单答案

【问题标题】：Google Apps Script HTML FormGoogle Apps 脚本 HTML 表单
【发布时间】：2020-01-03 18:56:24
【问题描述】：

我有一个带有电子邮件发送功能的简单 html 表单

这是 html 文件：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function submitForm() {
        var name = document.getElementById('name').value;
        var email = document.getElementById('email').value;
        var comment = document.getElementById('comment').value;
        
        /**
         * First run submitData(name, email, comment) function of Code.gs
         * Then, run showMessage(value) function of this html file
         */
        google.script.run
              .withSuccessHandler(showMessage) // execute showMessage(value) function on success
              .submitData(name, email, comment); // call submitData(name, email, comment) function present in Code.gs file
      }
      
      function showMessage(value) {
        document.getElementById('message').innerHTML = value;
        document.getElementById('name').value = '';
        document.getElementById('email').value = '';
        document.getElementById('comment').value = '';
      }
    </script>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <p><input id="name" type="text" placeholder="Your Name"><p>
    <p><input id="email" type="email" placeholder="Your Email"></p>
    <p><textarea id="comment" rows="10" cols="40"></textarea></p>
    <p><button onclick="submitForm(); return false;">Submit</button></p>    
  </body>
</html>

这是 gs 文件：

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("Simple HTML Form Example");
}
 
function submitData(name, email, comment) {
  var subject = 'New Feedback';
  var body = 'Name: ' + name + '<br> Email: ' + email + '<br> Comment: ' + comment;
  var to = 'my-email@email.com'; // EMAIL ADDRESS WHERE THE FEEDBACK EMAIL IS SENT
  MailApp.sendEmail({
      to: to,
      subject: subject,
      htmlBody: body
    }); 
  
  return 'Feedback Sent!';
}

我正在寻找一个公式来查看已编辑的字段名称、电子邮件，而不是文本“已发送反馈！”

提前感谢您的帮助！

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

HTML 电子邮件表单

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function submitForm(form) {
        google.script.run
        .withSuccessHandler(function(value){
          document.getElementById('message').innerHTML = value;
          document.getElementById('name').value = '';
          document.getElementById('email').value = '';
          document.getElementById('comment').value = '';
        }) 
        .submitData(form);
      }
    </script>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <form>
    <br /><input id="name" type="text" name="name" placeholder="Your Name">
    <br /><input id="email" type="email" name="email" placeholder="Your Email">
    <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
    <br /><input type="button" value="Submit" onclick="submitForm(this.parentNode);" />  
  </form>  
  </body>
</html>

谷歌脚本：

function submitData(form) {
  var subject='New Feedback';
  var body=Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  var to = 'my-email@email.com'; 
  MailApp.sendEmail({to: to,subject: subject,htmlBody: body}); 
  //Logger.log('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
}
//It works as a dialog
function showTheDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq7');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Emails")
}

我实际上并没有使用 mailapp 行对其进行测试。我刚刚使用了 Logger，看到它返回了反馈消息。

【讨论】：

改用 GmailApp。
好的，谢谢先生。 Cooper，现在我无法测试，因为我已达到最大发送限制（100），所以我必须再等大约 2 小时。一旦我可以测试它，我会通知你现在，谢谢。
谢谢先生。库珀，你的公式很有效，真的很酷。现在我继续我的实现，最后我会试着告诉你也许你会给我一个判断。
先生您好。 Cooper，我已经提交了另一个请求，您可以在这里找到它：stackoverflow.com/questions/59617795/…提前感谢您的帮助！
这是一个工作示例，但不是一个网络应用程序。我构建为作为对话框运行，因为那时我不需要 doGets 或 doPosts