网页表单数据提交至Google Sheet脚本失效问题咨询

Hey there! I totally get the frustration when a trusted old tutorial breaks because a platform like Google updates its under-the-hood mechanics. Let’s walk through how to fix your embedded Google Form submission script so it stops redirecting to Google’s default response page.

Why the Old Script Isn’t Working #

Google has updated how Form submissions are handled—they’ve tightened up CORS policies, changed the submission endpoint behavior, and modified how form data is processed. The original tutorial’s script relied on outdated assumptions about these systems, hence the breakage.

Step-by-Step Fixes #

1. Grab the Correct Submission Endpoint

First, make sure you’re using the latest form action URL from Google:

• Open your Google Form, click Send → Embed HTML
• Copy the action attribute value from the generated <form> tag (it’ll look something like https://docs.google.com/forms/d/e/XXXX/formResponse)
• Replace the old action URL in your embedded form with this new one.

2. Update the Submission Script (Prevent Redirect)

Use modern JavaScript to handle the form submit event without triggering Google’s redirect. Here’s a native JS example you can drop into your page:

// Replace 'your-google-form' with your form's ID
const form = document.getElementById('your-google-form');

form.addEventListener('submit', async (event) => {
  // Stop the default form redirect
  event.preventDefault();
  
  // Collect form data
  const formData = new FormData(form);
  
  try {
    // Submit data to Google's endpoint
    await fetch(form.action, {
      method: 'POST',
      body: formData,
      mode: 'no-cors' // Bypass CORS restrictions since Google doesn't allow cross-origin responses
    });
    
    // Success handling: show a message, reset the form, etc.
    alert('Your submission was sent successfully!');
    form.reset();
  } catch (error) {
    // Error handling
    alert('Oops, something went wrong. Please try again.');
    console.error('Submission error:', error);
  }
});

• The mode: 'no-cors' is key here—Google’s form endpoint doesn’t return a readable cross-origin response, but this mode lets us submit data successfully without errors.

3. Verify Form Field Names

Double-check that every input in your embedded form has the exact name attribute from Google’s generated embed code. These names look like entry.123456789 (unique to each field in your form). Mismatched names will cause data to not show up in your Google Sheet.

4. Advanced: Use Google Apps Script for Response Feedback

If you need to confirm the submission was successful (instead of just assuming), set up a simple Apps Script proxy:

1. Open your linked Google Sheet, go to Extensions > Apps Script
2. Paste this code (update field names to match your form):

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
  
  // Collect and format form data (replace entry IDs with your own)
  const submissionData = [
    new Date(),
    e.parameter['entry.123456789'], // Example: Name field
    e.parameter['entry.987654321']  // Example: Email field
  ];
  
  // Add data to the sheet
  sheet.appendRow(submissionData);
  
  // Return a success response
  return ContentService.createTextOutput(JSON.stringify({ success: true }))
    .setMimeType(ContentService.MimeType.JSON);
}

3. Deploy the script as a Web App:
   • Click Deploy > New deployment
   • Set Type to Web app, Execute as to Me, Who has access to Anyone, even anonymous
   • Copy the deployed URL and use it as your form’s action attribute
4. Now you can remove mode: 'no-cors' from your fetch call and handle the success response directly!

Give these steps a shot—they should get your embedded form working smoothly without redirecting to Google’s page. If you hit any specific roadblocks, feel free to share details and I’ll help you troubleshoot further.

内容的提问来源于stack exchange，提问作者Christopher Angulo-Bertram