通过简单的 HTML 表单将基本数据添加到 Google 电子表格答案

【问题标题】：Add basic data to a Google Spreadsheet via a simple HTML Form通过简单的 HTML 表单将基本数据添加到 Google 电子表格
【发布时间】：2014-03-29 04:05:55
【问题描述】：

我有一个用户可以填写的带有姓名和电子邮件地址的表单。

现在，如果用户单击提交按钮，我希望理想情况下将数据发送到电子表格，而无需使用一些服务器端魔法..

这是我的表格：

<form method="post" action="SOME-ACTION-HERE" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe" />
</form>

有没有办法用我自己的自定义 HTML 表单来做到这一点。我知道您可以为给定的电子表格创建一个谷歌表单，但我想像某种小部件一样使用它。

【问题讨论】：

标签： javascript html ajax forms google-sheets

【解决方案1】：

是的，这是可能的。是否使用一些服务器端魔法。
但重要的是要了解我们正在谈论的女巫服务器，您的服务器或谷歌服务器，因为最终它将进入服务器端存储在电子表格应用程序中:)
我认为这可以在完整的 JS 中完成（但这真的很痛苦）。
我在这里向您提出的解决方案是中继一个谷歌应用程序脚本，该脚本将以一种非常简单的方式处理服务器端魔法：演示：

您网站上的 HTML 代码：

<form  id="form" method="get" action="https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe"/>
</form>

这里是谷歌应用脚本：

function doGet(e){
  var vals=[];
  vals.push(new Date());
  for(var i in e.parameter){
    vals.push(e.parameter[i]);
  }
  SpreadsheetApp.openById("0Ao02g19G1-G-dElQQW92ekZWa0lGRGREYUpHRWQwTVE").appendRow(vals);
  return ContentService.createTextOutput("added");
}

如果您想查看结果，可以查看电子表格here

你需要知道的：
谷歌应用程序脚本位于电子表格中（但这不是强制性的，因为在我用他的 ID 调用它的脚本中）。
为了运行脚本，您必须发布它并允许任何人运行它。当您执行此操作时，您将获得需要放入 HTML 代码的已发布 URL。这里是：https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec

希望这是一个满意的答案。

【讨论】：

是的，这太棒了。我不知道这个脚本外观。优秀的答案。谢谢