Question

如何将数据从网络表单发送到Google电子表格？我使用Google云端硬盘制作了一个表单，但要运行自定义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云端硬盘？

Answer 1

这对我有用：

创建自定义表单
点击查看实时表单后，创建您的Google表单并查看来源
从＆lt; form＆gt;开始复制html代码直到＆lt; / form＆gt;
Google表单中的每个输入字段都有name和id属性，需要复制到您的个人表单
在表单中使用Google表单的表单操作中的网址。
确保即使是提交按钮也具有与Google表单源匹配的ID和名称属性。
如果您现在提交，则会转到Google表单回复页面。您可以通过提交ajax表单来避免这种情况。

如果您的自定义表单未验证Google表单必填元素，则您将再次被重定向到Google表单页面。

Answer 2

完成分步说明

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

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

该脚本会将通过HTTP POST发送的所有数据保存在Google电子表格中，可选将内容转发到电子邮件地址。（如果您希望收到有关新数据的通知，则非常有用）

HTML表格：

contact form

结果（表格中的行）：

row in sheet

我们对Google脚本进行了评论，所以很明显，但如果您有任何问题，请不要犹豫！： - ）

Answer 3

我创建了一个名为Magic Forms的实用程序来添加一些超出Google端点提供的额外功能。创建一个魔术表单项目，它将为您提供一个HTTP端点，您可以在其中将表单POST到（常规HTTP或Ajax），在成功/错误时设置自定义重定向，还可以根据发布的任何数据自动创建列，这允许一些非常灵活的用例。

Answer 4

最近Google似乎已更新了创建表单的方式，因此现在字段的名称位于隐藏输入中，而不是正常字段（https://github.com/heaversm/google-custom-form）。

我也尝试过@nelsonic方法，并且它正确地以JSON格式通过电子邮件发送答案，但它并没有将它们加载到Google电子表格中，至少对我而言。这就是为什么我希望将两种方法结合起来，以便在将来更多模糊处理更改的情况下始终保存用户数据。

因此，我建议您在其中设置一个iframe的网页。这个iframe将包含您自己的自定义表单，来自其他网页，或者在我的示例中为了方便起见 - 使用srcdoc属性。

然后，您从 Google表格预览中复制 names隐藏输入以及 action 表单网址页面并将其粘贴到自定义表单中。

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

这样，使用iframe和Ajax，我们避免将url重定向到已注册的＆＃39;将表单提交给Google时的页面，但我们可以将父视图中的iframe隐藏为100％确定。

我在这里发布了所有代码供您测试：

自定义表单：

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

希望它可以帮助别人！

Answer 5

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

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

Answer 6

这很简单。

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

Answer 7

过去几天我一直在努力，没有任何工作。最后，我找到了一个非常好的解决方案。

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

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

7 个答案:

完成分步说明

HTML表格：

结果（表格中的行）：

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

7 个答案:

完成 分步说明

HTML表格：

结果（表格中的行）：

完成分步说明