基于提交字段的引导应用程序脚本表单邮件通知答案

【问题标题】：Bootstrap Apps Script Form Mail Notification based on field submitted基于提交字段的引导应用程序脚本表单邮件通知
【发布时间】：2020-11-03 07:33:16
【问题描述】：

我在 Apps 脚本中构建了一个引导表单，用于将答案发送到 Google 电子表格。
现在，我希望当用户在下拉列表中选择特定选项时，表单会将通知发送到特定邮件地址。在特定情况下，带有“id=area”的下拉菜单。

代码.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate();
    }
    
    /* @Include JavaScript and CSS Files */
    function include(filename) {
      return HtmlService.createHtmlOutputFromFile(filename)
          .getContent();
    }
    
    /* @Process Form */
    function processForm(formObject) {
      var url = "https://docs.google.com/spreadsheets/d/xxxxx/edit#gid=0";
      var ss = SpreadsheetApp.openByUrl(url);
      var ws = ss.getSheetByName("Data");
      
      ws.appendRow([formObject.nome_cognome,
                    formObject.mail,
                    formObject.telefono,
                    formObject.sede,
                    formObject.area,
                    formObject.tipo,
                    formObject.durata]);
    }

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 type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <?!= include('JavaScript'); ?>
<script>
$(function() {
  $('input[name="durata"]').daterangepicker({
    timePicker: true,
    minDate: moment().add(3, 'day'),
    startDate: moment(),
    endDate: moment().add(5, 'day'),
    fromLabel: ('From'),
    timePicker24Hour: (true),
    locale: {
      format: 'DD/MM/YYYY HH:mm'
    }
  });
});

</script>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-8">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                    
                        <div class="form-row">
                            <div class="form-group col">
                                <label for="nome_cognome">Nome e Cognome<em class="required">*</em></label>
                                <input type="text" class="form-control" id="nome_cognome" name="nome_cognome" required="">
                            </div>
                            <div class="form-group col">
                                <label for="mail">Indirizzo E-Mail<em class="required">*</em></label>
                                <input type="email" class="form-control" id="mail" name="mail" required="">
                            </div>
                            <div class="form-group col">
                                <label for="telefono">Telefono<em class="required">*</em></label>
                                <input type="text" class="form-control" id="telefono" name="telefono" required="">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="sede">In servizio presso (indicare sede)<em class="required">*</em></label>
                                <select class="form-control" id="sede" name="sede" required="">
                                <option>--Seleziona--</option>
                                <option>Rome</option>
                                <option>Napoli</option>
                                </select>
                                </div>
                            </div>
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="area">Area<em class="required">*</em></label>
                                <select class="form-control" id="area" name="area" required="">
                                <option>--Seleziona--</option>
                                <option>Marketing</option>
                                <option>Amministrazione</option>
                                <option>Direzione</option>
                                </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="tipo">Tipo di permesso<em class="required">*</em></label>
                                <select class="form-control" id="tipo" name="tipo" required="">
                                <option>--Seleziona--</option>
                                <option>Ferie</option>

                                </select>
                                </div>
                            </div>
                            <div class="form-group col">
                                <label for="durata">Durata<em class="required">*</em></label>
                                <input type="text" class="form-control" name="durata" id="durata" required="" />
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">Invia richiesta</button>
                    </form>
                    <div id="output"></div>
                </div>
            </div>      
        </div>
    </body>
</html>

JavaScript.html

<script>
  // Prevent forms from submitting.
  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.processForm(formObject);
    document.getElementById("myForm").reset();
  }
  
</script>

【问题讨论】：

标签： forms google-apps-script bootstrap-4

【解决方案1】：

我相信你的目标如下。

当formObject.area 是特定选项时，您想发送电子邮件。

这样的话，修改processForm的功能怎么样？

修改脚本：

从：

ws.appendRow([formObject.nome_cognome,
              formObject.mail,
              formObject.telefono,
              formObject.sede,
              formObject.area,
              formObject.tipo,
              formObject.durata]);

到：

ws.appendRow([formObject.nome_cognome,
              formObject.mail,
              formObject.telefono,
              formObject.sede,
              formObject.area,
              formObject.tipo,
              formObject.durata]);

// I added below script.
var specificOption = "Marketing";  // Please set the specific option you want to use.
if (formObject.area == specificOption) {
  var specificEmailAddress = "###";  // Please set the specific email address you want to use.
  var subject = "###";  // Please set the subject of email.
  var body = "###";  // Please set the subject of body.
  GmailApp.sendEmail(specificEmailAddress, subject, body);
  // You can also use this. MailApp.sendEmail(specificEmailAddress, subject, body);
}

注意：

当您修改 Web Apps 的脚本时，请将 Web Apps 重新部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。请注意这一点。

参考资料：

【讨论】：

完美！如何将使用 HTML 模板提交的字段数据也放入邮件正文？
@Popoff 感谢您的回复。我很高兴你的问题得到了解决。关于你的新问题，不幸的是，我无法理解the data of the fields submitted using a HTML template。例如，如果您想在电子邮件中包含formObject，那么将var body = "###"; 修改为var body = JSON.stringify(formObject); 怎么样？但我不确定我是否能正确理解你的新问题。因此，如果这不是您期望的结果，我深表歉意。到时候，我可以问你关于你的新问题的细节吗？
如果你看到表格，有一些字段，姓名，电话......我如何在通知邮件（正文，主题）中也输入用户提交的这些信息？
@Popoff 感谢您的回复。请问我在回复中对您的新问题的理解是否正确？不幸的是，从您的回复中，我无法理解。这是因为我的英语水平不好。对此我深表歉意。
是的。也可以在邮件正文中使用模板 HTML。