通过简单的 HTML 表单将基本数据添加到 Google 电子表格 [英] Add basic data to a Google Spreadsheet via a simple HTML Form

问题描述

我有一个包含姓名和电子邮件地址的表单，用户可以填写.

I have a form with a Name and an Email address, that the user can fill out.

现在，如果用户点击提交按钮，我想在不使用服务器端魔法的情况下理想地将数据发送到电子表格..

Now if the user clicks the submit button, I want to send the data to a spreadsheet ideally without using some server-side magic..

这是我的表格:

<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 表单来做到这一点.我知道您可以为给定的电子表格创建一个谷歌表单，但我想像使用某种小部件一样使用它.

Is there a way to do this with my own custom HTML-form. I know that you can create a google form for a given spread sheet, but I want to use it like some sort of widget.

推荐答案

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

Yes this is possible. Using some server side magic or not.
But what's important is to know witch server we are talking about, your server or google server, because in the end it will go server side to be stored on the spreadsheet apps :)
I think this is possible to do it in full JS (but it will be really painfull).
The solution that I propose you here is to relay on a google apps script that will handle the server side magic in a really easy way: the demo:

您网站上的 HTML 代码:

the HTML code on you site:

<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>

这里是谷歌应用程序脚本:

and here the google apps script:

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");
}

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

If you want to see the result you can have a look to the spreadsheet here

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

what you need to know:
The google apps script is here located in the spreadsheet (but that's not mandatory as in the script I call it with his id).
In order to run the script you must publish it and allow anyone to run it. When you'll do this action you will get the published URL that you need to put in your HTML code. Here its: https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec

希望这是一个令您满意的答案.

Hope this is a satisfying answer for you.

这篇关于通过简单的 HTML 表单将基本数据添加到 Google 电子表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！