如何将容器绑定侧边栏HTML表单结果提交至Google Script并存入表格？

Hey there! I totally get how overwhelming this can be when you're just starting out with HTML, JavaScript, and Google Apps Script (GAS). Let's break this down step by step with a complete, working example that you can copy-paste and tweak for your needs.

1. Prepare Your Google Sheet #

• Create a new Google Sheet and name it something like Form Responses.
• In the first row (header row), add column names that match the data you want to collect. For example:
  • A1: Timestamp
  • B1: Name
  • C1: Email
  • D1: Message

2. Open the Google Apps Script Editor #

• In your Google Sheet, go to Extensions > Apps Script.
• Rename the default project (click "Untitled project" at the top) to something like SidebarFormToSheets.

3. Write the Server-Side GAS Code #

Replace the default code in Code.gs with this:

// Load the sidebar with your form
function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('SidebarForm')
      .setTitle('Submit Form to Sheet');
  SpreadsheetApp.getUi().showSidebar(html);
}

// Handle form submission and write data to the sheet
function submitForm(formData) {
  // Get the first sheet in your spreadsheet
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  // Append a new row with timestamp + form data
  sheet.appendRow([new Date(), formData.name, formData.email, formData.message]);
  return "Submission successful!";
}

4. Create the HTML Sidebar File #

• In the Apps Script editor, click File > New > HTML file.
• Name it SidebarForm and paste this code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* Simple styling to make the form look clean */
      .form-wrapper {
        padding: 20px;
        font-family: Arial, sans-serif;
      }
      .form-group {
        margin-bottom: 16px;
      }
      label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
      }
      input, textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      button {
        background-color: #2196F3;
        color: white;
        padding: 10px 18px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #1976D2;
      }
      #feedback {
        margin-top: 15px;
        padding: 10px;
        border-radius: 4px;
        display: none;
      }
      .success {
        background-color: #E8F5E9;
        color: #2E7D32;
      }
      .error {
        background-color: #FFEBEE;
        color: #C62828;
      }
    </style>
  </head>
  <body>
    <div class="form-wrapper">
      <h3>Send Your Info</h3>
      <form id="myForm">
        <div class="form-group">
          <label for="name">Your Name:</label>
          <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="email">Your Email:</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="message">Your Message:</label>
          <textarea id="message" name="message" rows="4"></textarea>
        </div>
        <button type="submit">Submit</button>
      </form>
      <div id="feedback"></div>
    </div>

    <script>
      // Listen for form submission
      document.getElementById('myForm').addEventListener('submit', function(e) {
        e.preventDefault(); // Stop the default form refresh behavior

        // Collect form data into an object
        var formData = {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
          message: document.getElementById('message').value
        };

        // Send data to the server-side GAS function
        google.script.run
          .withSuccessHandler(function(response) {
            // Show success message
            var feedback = document.getElementById('feedback');
            feedback.textContent = response;
            feedback.className = 'success';
            feedback.style.display = 'block';
            // Reset the form
            document.getElementById('myForm').reset();
          })
          .withFailureHandler(function(error) {
            // Show error message
            var feedback = document.getElementById('feedback');
            feedback.textContent = 'Submission failed: ' + error.message;
            feedback.className = 'error';
            feedback.style.display = 'block';
          })
          .submitForm(formData);
      });
    </script>
  </body>
</html>

5. Test the Setup #

• In the Apps Script editor, click Run > Run function > showSidebar.
• The first time you run this, you'll need to authorize the script: follow the prompts, click "Advanced" > "Go to [Your Project Name]" to allow permissions.
• Back in your Google Sheet, you'll see the sidebar appear. Fill out the form and click "Submit"—check your sheet, and you should see a new row with your data plus a timestamp!

Common Troubleshooting Tips for Beginners #

• Permission Errors: Make sure you completed the authorization step correctly. The script needs permission to edit your sheet.
• Typos: Double-check that function names match exactly (e.g., submitForm in both GAS and JS can't be misspelled).
• Form Field Mismatch: Ensure the keys in the formData object match the data you're trying to collect and write to the sheet.

内容的提问来源于stack exchange，提问作者AKD