Googleフォーム：データをスプレッドシートに送信
Webフォームから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フォームを使用する場合action = ...フォームのエントリがスプレッドシートにコピーされる代わりに、送信を押すと元のGoogleフォームが表示されます。
上記の方法がうまくいかない場合、フォームデータをメールまたはGoogleドライブに送信するにはどうすればよいですか？
これが私のために働いたものです：
- カスタムフォームを作成する
- Googleフォームを作成し、[ライブフォームを表示]をクリックした後にソースを表示します
- <form>から</ form>までのHTMLコードをコピーします
- Googleフォームの各入力フィールドには、個人用フォームにコピーする必要があるname属性とid属性があります。
- フォームでGoogleフォームのフォームアクションにURLを使用します。
- 送信ボタンにも、Googleフォームソースと一致するID属性と名前属性があることを確認してください。
- 今すぐ送信すると、Googleフォームの応答ページに移動します。これは、ajaxフォームを送信することで回避できます。
カスタムフォームがGoogleフォームの必須要素を検証しない場合、再びGoogleフォームページにリダイレクトされます。
完了ステップバイステップ手順
Martin Hawskeyのgoodの概要（HTMLフォームからGoogleスプレッドシートにデータを送信する場合）を読み、いくつかのギャップ/仮定を確認した後、私たちはステップバイステップの説明を含む詳細な/包括的なチュートリアルを書くことにしました少数 =人々は便利だと思った：
https://github.com/dwyl/html-form-send-email-via-google-script-without-server
スクリプトは、HTTP POST経由で送信されたすべてのデータをGoogleスプレッドシートに保存し、オプションはコンテンツをメールアドレスに転送します。 （新しいデータを通知したい場合に便利）
HTMLフォーム：
結果（シートの行）：
私たちはGoogle Scriptにコメントしたので、それが明確であることを願っていますが、anyの質問がある場合は、遠慮なく質問してください！ :-)
私は Magic Forms と呼ばれるユーティリティを作成して、Googleのエンドポイントが提供する機能を超えていくつかの追加機能を追加しました。魔法のフォームプロジェクトを作成すると、POSTフォームを（通常のHTTPまたはAjax）に設定し、成功/エラー時にカスタムリダイレクトを設定し、列に基づいて列を自動作成することができるHTTPエンドポイントが提供されます投稿されるすべてのデータについて、かなり柔軟な使用例が可能になります。
最近、Googleはフォームを作成する方法を更新したようです。そのため、フィールドの名前は通常の入力の下の非表示の入力にあります（ https://github.com/heaversm/google-custom-form =）。
私も@nelsonicアプローチを試してみましたが、JSON形式で回答を適切にメールで送信しましたが、少なくとも私にとっては、Googleスプレッドシートにそれらをロードしていません。そのため、今後Googleで難読化の変更が行われる場合に備えて、2つの方法を組み合わせてユーザーデータを常に保存したいと考えていました。
そのため、iframeを内部に含むWebページを用意することをお勧めします。このiframeには、別のWebページからの、または（例のように、便宜上の理由で）srcdoc属性を使用したそれ自体からの、独自のカスタムフォームが含まれます。
次に、namesの隠し入力とactionGoogleフォームプレビューページのフォームURLを入力して、カスタムフォームに貼り付けます。
そして最後に、Ajaxを使用すると、@ nelsonicスクリプトソリューションを使用して、フォームデータの1つのコピーを通常のGoogleスプレッドシートに、もう1つのコピーをメールに簡単に送信できます。
このように、iframeとAjaxを使用すると、フォームがGoogleに送信されるときに「Response registered」ページへのURLリダイレクトが回避されますが、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>
それが誰かを助けることを願っています！
Googleが生成したフォームのHTMLをコピーして、カスタムHTMLページに含めることができます。このようにして、Googleフォームの外観を希望どおりに再設計し、jQueryまたは同様の手法を使用して、独自のロジックをフォームに追加できます（必要な場合）。
ここに例があります： http://www.immersionmedia.com/blog/customizing-and-styling-google-forms/
とても簡単です。
FORMタグの「action」プロパティからフォームIDを取得します。GoogleフォームWebページのソースでフォームタグを取得できます
フィールド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>
私はここ数日からそれと格闘していましたが、何もうまくいきませんでした。最後に、私は非常に良い解決策を見つけました。
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()
}
}