Automating form submission to Google Sheets via bookmarklet

Other Questions Google docs
1

I’m working on a bookmarklet to scrape data from a webpage and send it to a Google Sheets spreadsheet using a custom form. Here’s what I’ve tried so far:

let formElement = document.createElement('form');
formElement.action = 'https://docs.google.com/forms/d/e/your-form-id/formResponse';
formElement.method = 'POST';
formElement.id = 'data-form';

formElement.innerHTML = `
  <input name='entry.1234567890' value='${scrapedDate}'>
  <input name='entry.0987654321' value='${scrapedEmail}'>
  <input name='entry.1122334455' value='${scrapedID}'>
`;

formElement.submit();
console.log(formElement.innerHTML);

The form doesn’t seem to be saving any data. How can I check if the submission is working? Is there a way to see Google’s response in my bookmarklet code?

I’ve also considered using the ‘viewform’ method instead of ‘formResponse’. Any tips on how to inject my scraped values into the viewform URL and submit it from within the bookmarklet?

Thanks for any help!

2

hey there FlyingLeaf, have u tried using fetch() instead of form submission? it might give u more control. something like:

fetch(formUrl, {
  method: 'POST',
  body: new FormData(formElement)
})
.then(response => console.log(response))
.catch(error => console.error('Error:', error));

this way u can see the response and handle errors. good luck!

3

I’ve encountered similar issues when working with Google Forms submissions via JavaScript. One crucial step you might be missing is appending the form to the document before submitting. Try this:

document.body.appendChild(formElement);
formElement.submit();
document.body.removeChild(formElement);

Also, ensure your form ID and entry IDs are correct. Google sometimes changes these unexpectedly. For debugging, you could use the Network tab in your browser’s developer tools to monitor the POST request and see if it’s being sent correctly.

Regarding the ‘viewform’ method, it’s generally less reliable for automated submissions. Stick with ‘formResponse’ if possible. If you’re still having trouble, consider using Google Sheets API directly for more robust data insertion.

4

I’ve tackled similar challenges before, and here’s what worked for me. Instead of creating and submitting a form element, I found success using XMLHttpRequest. It gives you more control over the process and allows you to see the response from Google.

Here’s a snippet that might help:

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://docs.google.com/forms/d/e/your-form-id/formResponse', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send('entry.1234567890=' + encodeURIComponent(scrapedDate) + '&entry.0987654321=' + encodeURIComponent(scrapedEmail) + '&entry.1122334455=' + encodeURIComponent(scrapedID));

This approach lets you see Google’s response and helps with debugging. Also, make sure you’re not hitting any CORS issues. If you are, you might need to set up a proxy server to handle the requests.

As for the ‘viewform’ method, it’s generally less reliable for automated submissions. Stick with ‘formResponse’ if possible.