JSignature及表单字段无法同步至Google Sheets问题咨询

Hey there! Let’s figure out why your name and email fields aren’t making it to Google Sheets, even though your JSignature setup is working great for saving signatures to Drive and Sheets. Your hunch about google.script.run.writeForm(this.parentNode) is spot-on—here are the most common fixes:

1. Make Sure Your Inputs Have Proper name Attributes #

This is the #1 culprit! Google Apps Script’s google.script.run uses the name attribute of form fields to populate the form object passed to your server-side function. If your inputs don’t have these attributes, the values won’t be included.

Check your HTML for something like this:

<!-- Good: inputs have name attributes -->
<input type="text" id="nameInput" name="name" placeholder="Your Name">
<input type="email" id="emailInput" name="email" placeholder="Your Email">

Avoid just using id without name—the name is what matters for form data submission.

2. Verify this.parentNode Is the Full Form #

If your signature component is nested inside a smaller container (like a div), this.parentNode might only reference that container, not the entire form holding your name/email fields. Instead, target the actual form element directly:

First, add an id to your form:

<form id="signatureForm">
  <!-- Your name, email, and signature fields here -->
</form>

Then update your google.script.run call to use the form ID:

// Replace this.parentNode with the form element
google.script.run.withFailureHandler(handleError).writeForm(document.getElementById('signatureForm'));

Adding a failure handler is also helpful for catching errors—here’s a simple one to add:

function handleError(error) {
  console.error('Submission failed:', error.message);
  alert('Oops! There was an issue saving your info. Check the console for details.');
}

3. Double-Check Your Server-Side writeForm Function #

Make sure your Google Apps Script function is actually using the name and email values from the form object. Here’s a basic example of how it should look:

function writeForm(formObject) {
  // Log the form data to debug (check Apps Script Editor > View > Logs)
  console.log('Received form data:', JSON.stringify(formObject));

  // Extract the values
  const userName = formObject.name;
  const userEmail = formObject.email;
  const signatureUrl = formObject.signature; // Match this to your signature field's name

  // Write to Google Sheets
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Responses');
  if (sheet) {
    sheet.appendRow([userName, userEmail, signatureUrl]);
  } else {
    throw new Error('Sheet "Responses" not found!');
  }
}

4. Debug What’s Being Passed #

If you’re still stuck, use the Apps Script logs to see exactly what data is reaching the server. After submitting the form, go to your Apps Script Editor, click View > Logs—you’ll see the full form object printed out. If name or email are missing, you’ll know to fix your HTML inputs or form targeting.

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