HTML 使用 Apps 腳本登陸“謝謝”頁面向 Google 表格提交表單

Question

我已將 Google Apps 腳本設置為 WebApp，以從 HTML 表單（非 Google 表單）中獲取表單數據並將結果插入 Google 表格。 一切正常，但我正在嘗試獲取自定義登錄頁面而不是當前的 Apps 腳本頁面，這對最終用戶沒有用處。

我用這個作為參考： https://github.com/levinunnink/html-form-to-google-sheet

在本 GitHub 指南的末尾有一些信息，但它不是描述性的，我在這里或 GitHub 上找不到任何有用的信息。 我知道一些 JS，但我不是專家，真的可以用手來解決這個問題。 以下是我所擁有的，這是我最接近所有工作的地方。

這是我的 HTML。

 <script> function myFunction() { alert("The form was submitted successfully. Please press okay to continue..."); window.open("URL-to-thanks-page", "_top"); } </script> <form class="googleform" name="googleform" id="googleform" target="_top" method="POST" onsubmit="myFunction()" action="MY-GOOGLE-APPS-SCRIPTS-URL"> <!--FORM STUFF--> <button type="submit" class="btn-default btn" name="submit" access="false" style="default" id="submit">Submit</button> </form>

這是我的 Code.gs

 const sheetName = 'RSVP' const scriptProp = PropertiesService.getScriptProperties() function intialSetup () { const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet() scriptProp.setProperty('key', activeSpreadsheet.getId()) } function doPost (e) { const lock = LockService.getScriptLock() lock.tryLock(10000) try { const doc = SpreadsheetApp.openById(scriptProp.getProperty('key')) const sheet = doc.getSheetByName(sheetName) const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0] const nextRow = sheet.getLastRow() + 1 const newRow = headers.map(function(header) { return header === 'Date'? 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() } }

任何幫助將不勝感激。

尊敬，

Answer 1

從您的顯示腳本中，我不確定<!--FORM STUFF-->的細節。 因此，盡管很遺憾，我不確定這是否是實現您目標的直接解決方案，例如，以下修改如何？

修改后的腳本：

在這個修改中，我修改了 HTML 和 Javascript 端。

<form class="googleform" name="googleform" id="googleform">
  <!--FORM STUFF-->
  <button type="submit" class="btn-default btn" name="submit" access="false" style="default" id="submit" onclick="myFunction(this); return false;">Submit</button>
</form>

<script>
function myFunction(e){
  const obj = [...e.parentNode].reduce((o, e) => (o[e.name] = e.value, o), {});
  const q = new URLSearchParams(obj);
  const url = "MY-GOOGLE-APPS-SCRIPTS-URL";
  fetch(`${url}?${q}`, {method: "POST"})
    .then(res => res.json())
    .then(res => window.open("URL-to-thanks-page", "_top"))
    .catch(err => console.log(err));
}
</script>

• 在此修改中，提交的數據使用fetch發送。 提交表單后，數據將發送到您的 Web 應用程序。

筆記：

• 在此修改中，假設您的 Web 應用程序的 Google Apps 腳本端有效。 請注意這一點。

參考：

• 使用 Fetch

Answer 2

我實際上想通了這一點。 我使用了原始指南上的代碼並進行了修改。 在我的 HTML 中，我刪除了之前的<script>部分並將其更改為以下內容：

 <script> window.addEventListener("load", function() { const form = document.getElementById('googleform'); form.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(form); const action = e.target.action; fetch(action, { method: 'POST', body: data, }).then(() => { window.location.href = 'URL of thank you page'; }) }); }); </script>

這解決了問題，現在一切正常。