Google 表单：将数据发送到电子表格答案

【问题标题】：Google Forms: Send data to spreadsheetGoogle 表单：将数据发送到电子表格
【发布时间】：2014-02-01 20:54:56
【问题描述】：

如何将数据从网络表单发送到 Google 电子表格？我使用 Google Drive 制作了一个表单，但要运行自定义 CSS，我需要复制表单标签。

就我而言，这就是谷歌为发送按钮行为生成的内容

<form action="https://docs.google.com/forms/d/113H_71nd98TWE0bByjHYNpnC-
 oVA6OBDWtppU30rBrU/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">

但是，我想将我自己设计的表单中的数据发布到上述 Google 表单响应电子表格中。这是我的表单代码（使用 Bootstrap 3）：

<form class="form-horizontal" role="form" id="ftk-contact">
<h4>Get in touch with us now</h4>
<div class="form-group">
<label for="inputType" class="col-lg-2 control-label">Type of Inquiry</label>
<div class="col-lg-10">
<select class="form-control" id="inputType">
<option>Request a Quotation</option>
<option>Request a Bluebook</option>
<option>General Inquiry</option>
</select>
</div>
</div>

<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name *</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Your Name">
</div>
</div>

<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email *</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Your Email">
</div>
</div>

<div class="form-group">
<label for="inputCompany" class="col-lg-2 control-label">Company</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputCompany" placeholder="Your Company Name">
</div>
</div>

<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message *</label>
<div class="col-lg-10">
<textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
</div>
</div>

<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Phone</label>
<div class="col-lg-10">
<input type="tel" class="form-control" id="inputPhone" placeholder="Your Phone Number">
</div>
</div>

<div class="form-group">
<label for="inputWeb" class="col-lg-2 control-label">URL</label>
<div class="col-lg-10">
<input type="url" class="form-control" id="inputWeb" placeholder="Your Website URL">
</div>
</div>

<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary btn-lg">Send your Inquiry now</button>
</div>
</div>
</form>

当使用上述 Google 表单操作时=...按发送时，我会转到原始 Google 表单，而不是将表单条目复制到电子表格中。

如果上述方法不起作用，我还能如何将表单数据发送到电子邮件或 Google Drive？

【问题讨论】：

有用链接：eureka.ykyuen.info/2014/07/30/…

标签： html forms twitter-bootstrap google-drive-api

【解决方案1】：

最近 Google 似乎更新了创建表单的方式，因此现在字段名称隐藏在普通输入下方 (https://github.com/heaversm/google-custom-form)。

我也尝试了@nelsonic 方法，它以 JSON 格式正确地通过电子邮件发送答案，但至少对我而言，它不会将它们加载到 Google 电子表格中。这就是为什么我想结合两种方法来始终保存用户数据，以防 Google 将来进行更多混淆更改。

所以我建议你有一个包含iframe 的网页。这个 iframe 将包含您自己的自定义表单，来自另一个网页，或者（出于方便的原因在我的示例中）来自使用 srcdoc 属性的自身。

然后，您从 Google 表单预览页面复制这些隐藏输入的 names 以及 action 表单 URL > 并将它们粘贴到自定义表单中。

最后，使用 Ajax，我们可以轻松地将表单数据的一份副本发送到普通的 Google 电子表格，然后使用 @nelsonic 脚本解决方案将另一份发送到我们的邮件。

通过这种方式，使用 iframe 和 Ajax，我们可以避免在将表单提交给 Google 时将 url 重定向到“已注册响应”页面，但是我们可以 100% 确定地从父视图中隐藏 iframe。

我在这里发布我所有的代码供你测试：

自定义表单：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom Form to Google SpreadSheets</title>
</head>

<body>
  <script type="text/javascript">
    function hideIframeAndShowThankYouMessage(){
      document.getElementById('iframe').style.display = "none";
      document.getElementById('thankyou').style.display = "block";
    }
  </script>
   <iframe id="iframe" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" srcdoc="<html><head></head><body>
   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
   <script type='text/javascript'>

    $(document).ready(function(){

      $('#form').submit(function(e) {

        // You could also here, for example, valid an email address input

        // It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js:

        window.top.hideIframeAndShowThankYouMessage();

        // Now we send the same form to two different locations: the first is the ordinary Google Spreadsheet, the second is the Google Apps Script which allows us to receive an email with the form info in JSON format

        var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse';

        var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec';

        $.ajax({
          type: 'POST',
          url: url_sheet,
          data: $('#form').serialize(),
          success: function(data){}
        });

        $.ajax({
          type: 'POST',
          url: url_script,
          data: $('#form').serialize(),
          success: function(data){}
        });

        e.preventDefault();

      });
    });


    </script>

    <!--
        *** TO-DO!! ***        
        1. Copy your form ACTION url from your Google Form Preview Page

        2. Replace value of var url_sheet with that form ACTION url in line 31

        3. Copy your Spreadsheet WEB APP url from Google Script Editor

        4. Replace value of url_script with that WEB APP url in line 33

        3. Look into the source of your Google Form Preview Page and search for the names of the HIDDEN fields which are each one close to the normal input type (... <input type='hidden' name='entry.314619096' jsname='L9xHkb'> ...). We don't need the jsname, only the name

        4. Replace the NAMES fields of every field of the custom form below
     --> 

   <form id='form' method='POST'>

      <label for='name'>Name: </label>
      <input type='text' name='entry.314619096' placeholder='This is easy!' />
      <br/>
      <label for='message'>Message:</label>
      <input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/>
      <br/>
      <input type='submit' value='Submit'>
  </form></body></html>">Loading...</iframe>
  <h1 id="thankyou" style="display: none">Thank you!</h1>
</body>
</html>

希望它可以帮助别人！

【讨论】：

嗨，你在哪里使用 name='entry.314619096' ？

【解决方案2】：

过去几天我一直在努力解决这个问题，但没有任何效果。最后，我找到了一个很好的解决方案。

var sheetName = 'Sheet1'  
 var scriptProp = PropertiesService.getScriptProperties()  
 function intialSetup () {  
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()  
  scriptProp.setProperty('key', activeSpreadsheet.getId())  
 }  
 function doPost (e) {  
  var lock = LockService.getScriptLock()  
  lock.tryLock(10000)  
  try {  
   var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))  
   var sheet = doc.getSheetByName(sheetName)  
   var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]  
   var nextRow = sheet.getLastRow() + 1  
   var newRow = headers.map(function(header) {  
    return header === 'timestamp' ? new Date() : e.parameter[header]  
   })  
   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))  
    .setMimeType(ContentService.MimeType.JSON)  
  }  
  catch (e) {  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))  
    .setMimeType(ContentService.MimeType.JSON)  
  }  
  finally {  
   lock.releaseLock()  
  }  

 }

For more detail information click here

【讨论】：

【解决方案3】：

完成分步说明

在阅读了 Martin Hawskey 的good 介绍（将数据从 HTML 表单发送到 Google 电子表格）并看到一些差距之后/假设，我们决定编写一个详细/全面的教程，并附有分步说明，少数人认为这很有用： p>

https://github.com/dwyl/html-form-send-email-via-google-script-without-server

脚本将通过HTTP POST 发送的所有数据保存在 Google 电子表格中，并且可选地将内容转发到电子邮件地址。（如果您想收到新数据的通知，这很有用）

HTML 表单：

结果（工作表中的行）：

我们对 Google 脚本进行了评论，希望它很清楚，但如果您有任何问题，请随时提问！ :-)

【讨论】：

谢谢@nelsonic。您的解决方案就像魔术一样工作。谢谢。

【解决方案4】：

这很简单。

从 FORM 标签“action”属性中获取表单 ID，您可以在 Google 表单网页的源代码处获取表单标签
获取您的字段 ID 前任。 "entry.1472837636"

现在请参考下面的例子。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CUSTOM GOOGLE FORM</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

        <form id="input-form" action="" method="POST" target="no-target">
            <table>
                <tr>        
                    <td>Rate this help note</td>
                    <td><input type="radio" value="1" name="rating" class="rating" checked="">1</td>
                    <td><input type="radio" value="2" name="rating" class="rating">2</td>
                    <td><input type="radio" value="3" name="rating" class="rating">3</td>
                    <td><input type="radio" value="4" name="rating" class="rating">4</td>
                    <td><input type="radio" value="5" name="rating" class="rating">5</td>
                    <td><input type="radio" value="6" name="rating" class="rating">6</td>
                    <td><input type="radio" value="7" name="rating" class="rating">7</td>
                    <td><input type="radio" value="8" name="rating" class="rating">8</td>
                    <td><input type="radio" value="9" name="rating" class="rating">9</td>
                    <td><input type="radio" value="10" name="rating" class="rating">10</td>
                </tr>    
                <tr>        
                    <td>Are you satisfied from this help module ?</td>
                    <td><input type="radio" value="Yes" name="sat" class="sat" checked="">Yes</td>
                    <td><input type="radio" value="No" name="sat" class="sat">No</td>
                </tr>
                <tr><td>comments</td><td><input id="comments" name="comments"><td></tr>    
                <tr><td><button id="form-submit" type="submit">SUBMIT</button></td></tr>
            </table>
        </form>

        <p id="input-feedback"></p>

        <iframe src="#" id="no-target" name="no-target" style="visibility:hidden"></iframe>

        <script>
            jQuery('#input-form').one('submit', function() {
                var rating = encodeURIComponent(jQuery('input[name=rating]:checked').val());
                var sat = encodeURIComponent(jQuery('input[name=sat]:checked').val());
                var comments = encodeURIComponent(jQuery('#comments').val());
                var q1ID = "your-field-id";
                var q2ID = "your-field-id";
                var q3ID = "your-field-id";
                var baseURL = 'https://docs.google.com/forms/d/e/your-form-id/formResponse?';
                var submitRef = '&submit=Submit';
                var submitURL = (baseURL + q1ID + "=" + sat + "&" + q2ID + "=" + rating + "&" + q3ID + "=" + comments + submitRef);
                console.log(submitURL);
                jQuery(this)[0].action = submitURL;
                jQuery('#input-feedback').text('Thank You!');
            });
        </script>

    </body>
</html>

【讨论】：

我在输入字段中没有entryXXX 名称，我该怎么办？

【解决方案5】：

这对我有用：

创建您的自定义表单
创建您的 Google 表单并在点击查看实时表单后查看源代码
从
到
Google 表单中的每个输入字段都有 name 和 id 属性，需要将它们复制到您的个人表单中
在您的表单中使用 Google 表单的表单操作中的 URL。
确保即使是提交按钮也具有与 Google 表单源匹配的 ID 和名称属性。
如果您现在提交，它会将您带到 Google 表单响应页面。您可以通过提交 ajax 表单来避免这种情况。

如果您的自定义表单未验证 Google 表单强制元素，那么您将再次被重定向到 Google 表单页面。

【讨论】：

虽然我没有验证是否有必要，但我也复制了脚本
一切都好，但是当我被重定向到 Google 表单页面时，您能否提供更多信息来说明您在第 7 点中的确切含义
@SujayDSa 我们可以处理部分表格吗

【解决方案6】：

您可以复制 Google 生成的表单的 HTML，并将其包含在您的自定义 HTML 页面中。通过这种方式，您可以根据需要重新设计 google 表单的外观，并使用 jQuery 或类似技术将您自己的逻辑添加到表单中（如果需要）。

这里有一个例子： http://www.immersionmedia.com/blog/customizing-and-styling-google-forms/

【讨论】：

此链接不是最新的

完成 分步说明

HTML 表单：

结果（工作表中的行）：

完成分步说明