Google Apps脚本HTML表单 [英] Google Apps Script HTML Form

查看:124
本文介绍了Google Apps脚本HTML表单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a simple html form with email sending

这是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!';
}

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

I'm looking for a formula to view the edited fields name, email, instead of the text "Feedback Sent!"

提前感谢您的帮助!

推荐答案

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>

Google脚本:

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,看到它返回了反馈消息.

I didn't actually test it with the mailapp line. I just used the Logger and saw that it returned the feedback message.

这篇关于Google Apps脚本HTML表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆